From 9ea42ebff22149b4abf6e8f7b5021f310a71448f Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Tue, 16 Nov 2021 23:25:19 +0530
Subject: [PATCH 01/69] chore: Add the support for list and checkbox in custom
 attribute model (#3400)

ref: #3399
---
 app/models/custom_attribute_definition.rb                    | 5 +++--
 ...11116131740_add_values_to_custom_attribute_definitions.rb | 5 +++++
 db/schema.rb                                                 | 3 ++-
 3 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 db/migrate/20211116131740_add_values_to_custom_attribute_definitions.rb

diff --git a/app/models/custom_attribute_definition.rb b/app/models/custom_attribute_definition.rb
index d3f40e0f4..a79b8ca95 100644
--- a/app/models/custom_attribute_definition.rb
+++ b/app/models/custom_attribute_definition.rb
@@ -3,12 +3,13 @@
 # Table name: custom_attribute_definitions
 #
 #  id                     :bigint           not null, primary key
+#  attribute_description  :text
 #  attribute_display_name :string
 #  attribute_display_type :integer          default("text")
-#  attribute_description  :text
 #  attribute_key          :string
 #  attribute_model        :integer          default("conversation_attribute")
 #  default_value          :integer
+#  values                 :jsonb
 #  created_at             :datetime         not null
 #  updated_at             :datetime         not null
 #  account_id             :bigint
@@ -30,7 +31,7 @@ class CustomAttributeDefinition < ApplicationRecord
   validates :attribute_model, presence: true
 
   enum attribute_model: { conversation_attribute: 0, contact_attribute: 1 }
-  enum attribute_display_type: { text: 0, number: 1, currency: 2, percent: 3, link: 4, date: 5 }
+  enum attribute_display_type: { text: 0, number: 1, currency: 2, percent: 3, link: 4, date: 5, list: 6, checkbox: 7 }
 
   belongs_to :account
 end
diff --git a/db/migrate/20211116131740_add_values_to_custom_attribute_definitions.rb b/db/migrate/20211116131740_add_values_to_custom_attribute_definitions.rb
new file mode 100644
index 000000000..2625fe30c
--- /dev/null
+++ b/db/migrate/20211116131740_add_values_to_custom_attribute_definitions.rb
@@ -0,0 +1,5 @@
+class AddValuesToCustomAttributeDefinitions < ActiveRecord::Migration[6.1]
+  def change
+    add_column :custom_attribute_definitions, :values, :jsonb, default: []
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 9ad249a38..946f2829e 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2021_09_29_150415) do
+ActiveRecord::Schema.define(version: 2021_11_16_131740) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
@@ -355,6 +355,7 @@ ActiveRecord::Schema.define(version: 2021_09_29_150415) do
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
     t.text "attribute_description"
+    t.jsonb "values", default: []
     t.index ["account_id"], name: "index_custom_attribute_definitions_on_account_id"
     t.index ["attribute_key", "attribute_model"], name: "attribute_key_model_index", unique: true
   end

From fec4a290817f9587f98fe520027420dae7861ffd Mon Sep 17 00:00:00 2001
From: Shivam Chahar <chahar.shivam@yahoo.com>
Date: Wed, 17 Nov 2021 18:05:53 +0530
Subject: [PATCH 02/69] Feat: Include previous messages in mention/assign
 notifications email (#3385)

---
 app/drops/conversation_drop.rb                | 12 ++++++++++
 app/models/conversation.rb                    |  4 ++++
 .../conversation_assignment.liquid            | 24 +++++++++++++++++++
 .../conversation_mention.liquid               | 24 +++++++++++++++++++
 spec/models/conversation_spec.rb              | 24 +++++++++++++++++++
 5 files changed, 88 insertions(+)

diff --git a/app/drops/conversation_drop.rb b/app/drops/conversation_drop.rb
index 03bab2f58..1758c29c5 100644
--- a/app/drops/conversation_drop.rb
+++ b/app/drops/conversation_drop.rb
@@ -1,5 +1,17 @@
 class ConversationDrop < BaseDrop
+  include MessageFormatHelper
+
   def display_id
     @obj.try(:display_id)
   end
+
+  def recent_messages
+    @obj.try(:recent_messages).map do |message|
+      {
+        'sender' => message.sender&.available_name || message.sender&.name,
+        'content' => transform_user_mention_content(message.content),
+        'attachments' => message.attachments.map(&:file_url)
+      }
+    end
+  end
 end
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index fdfd5002a..a7a5b5b6d 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -147,6 +147,10 @@ class Conversation < ApplicationRecord
     inbox.inbox_type == 'Twitter' && additional_attributes['type'] == 'tweet'
   end
 
+  def recent_messages
+    messages.chat.last(5)
+  end
+
   private
 
   def execute_after_update_commit_callbacks
diff --git a/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_assignment.liquid b/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_assignment.liquid
index 63e22f093..e138fd11a 100644
--- a/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_assignment.liquid
+++ b/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_assignment.liquid
@@ -2,6 +2,30 @@
 
 <p>Time to save the world. A new conversation has been assigned to you</p>
 
+{% for chat_message in conversation.recent_messages %}
+  <div>
+    {% if chat_message.sender == user.available_name %}
+      <h4 style="margin: 0;">You</h4>
+    {% else %}
+      <h4 style="margin: 0;">{{chat_message.sender}}</h4>
+    {% endif %}
+  </div>
+
+  <div>
+    <p style="padding: 10px 20px; margin: 5px 0 20px 0; background: #F2F3F7; border-radius: 10px; display: inline-block; font-family: "Helvetica Neue",Tahoma,Arial,sans-serif; text-align: start; unicode-bidi: plaintext;">
+      {% if chat_message.content %}
+        {{chat_message.content}}
+      {% endif %}
+
+      {% if chat_message.attachments %}
+        {% for attachment in chat_message.attachments %}
+          Attachment [<a href="{{ attachment }}" _target="blank">Click here to view</a>]
+        {% endfor %}
+      {% endif %}
+    </p>
+  </div>
+{% endfor %}
+
 <p>
 Click <a href="{{action_url}}">here</a> to get cracking.
 </p>
diff --git a/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_mention.liquid b/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_mention.liquid
index 4783b1dde..9a30e6e09 100644
--- a/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_mention.liquid
+++ b/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_mention.liquid
@@ -5,4 +5,28 @@
   {{message.text_content}}
 </blockquote>
 
+{% for chat_message in conversation.recent_messages %}
+  <div>
+    {% if chat_message.sender == user.available_name %}
+      <h4 style="margin: 0;">You</h4>
+    {% else %}
+      <h4 style="margin: 0;">{{chat_message.sender}}</h4>
+    {% endif %}
+  </div>
+
+  <div>
+    <p style="padding: 10px 20px; margin: 5px 0 20px 0; background: #F2F3F7; border-radius: 10px; display: inline-block; font-family: "Helvetica Neue",Tahoma,Arial,sans-serif; text-align: start; unicode-bidi: plaintext;">
+      {% if chat_message.content %}
+        {{chat_message.content}}
+      {% endif %}
+
+      {% if chat_message.attachments %}
+        {% for attachment in chat_message.attachments %}
+          Attachment [<a href="{{ attachment }}" _target="blank">Click here to view</a>]
+        {% endfor %}
+      {% endif %}
+    </p>
+  </div>
+{% endfor %}
+
 <p><a href="{{ action_url }}">View Message</a></p>
diff --git a/spec/models/conversation_spec.rb b/spec/models/conversation_spec.rb
index 9d7fa2c8c..71adf6970 100644
--- a/spec/models/conversation_spec.rb
+++ b/spec/models/conversation_spec.rb
@@ -340,6 +340,30 @@ RSpec.describe Conversation, type: :model do
     end
   end
 
+  describe 'recent_messages' do
+    subject(:recent_messages) { conversation.recent_messages }
+
+    let(:conversation) { create(:conversation, agent_last_seen_at: 1.hour.ago) }
+    let(:message_params) do
+      {
+        conversation: conversation,
+        account: conversation.account,
+        inbox: conversation.inbox,
+        sender: conversation.assignee
+      }
+    end
+    let!(:messages) do
+      create_list(:message, 10, **message_params) do |message, i|
+        message.created_at = i.minute.ago
+      end
+    end
+
+    it 'returns upto 5 recent messages' do
+      expect(recent_messages.length).to be < 6
+      expect(recent_messages).to eq messages.last(5)
+    end
+  end
+
   describe 'unread_incoming_messages' do
     subject(:unread_incoming_messages) { conversation.unread_incoming_messages }
 

From d227a567475c9bf08485b29fc9c0e274d14ad0fd Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Wed, 17 Nov 2021 18:27:14 +0530
Subject: [PATCH 03/69] fix: Set default value of sortBy to empty string
 (#3406)

---
 .../dashboard/contacts/components/ContactsTable.vue  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index f3d27032a..412b3f2fc 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -114,7 +114,7 @@ export default {
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.NAME'),
           fixed: 'left',
           align: 'left',
-          sortBy: this.sortConfig.name || undefined,
+          sortBy: this.sortConfig.name || '',
           width: 300,
           renderBodyCell: ({ row }) => (
             <woot-button
@@ -150,7 +150,7 @@ export default {
           key: 'email',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.EMAIL_ADDRESS'),
           align: 'left',
-          sortBy: this.sortConfig.email || undefined,
+          sortBy: this.sortConfig.email || '',
           width: 240,
           renderBodyCell: ({ row }) => {
             if (row.email)
@@ -171,21 +171,21 @@ export default {
         {
           field: 'phone_number',
           key: 'phone_number',
-          sortBy: this.sortConfig.phone_number || undefined,
+          sortBy: this.sortConfig.phone_number || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.PHONE_NUMBER'),
           align: 'left',
         },
         {
           field: 'company',
           key: 'company',
-          sortBy: this.sortConfig.company_name || undefined,
+          sortBy: this.sortConfig.company_name || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COMPANY'),
           align: 'left',
         },
         {
           field: 'city',
           key: 'city',
-          sortBy: this.sortConfig.city || undefined,
+          sortBy: this.sortConfig.city || '',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.CITY'),
           align: 'left',
         },
@@ -194,7 +194,7 @@ export default {
           key: 'country',
           title: this.$t('CONTACTS_PAGE.LIST.TABLE_HEADER.COUNTRY'),
           align: 'left',
-          sortBy: this.sortConfig.country || undefined,
+          sortBy: this.sortConfig.country || '',
           renderBodyCell: ({ row }) => {
             if (row.country) {
               return (

From e500d1216b908a6211ff24f2491d790987eeb59b Mon Sep 17 00:00:00 2001
From: Jan-David <jdsalchow@gmail.com>
Date: Wed, 17 Nov 2021 14:25:15 +0100
Subject: [PATCH 04/69] Fix: Make swagger doc compliant to OpenAPI  (#3394)

This fixes issues in the swagger.json file. The motivation to do so is to be able to generate API clients using https://openapi-generator.tech Doing so will require further changes to the api spec, but this seems like a good first step since it is now "valid" according to editor.swagger.io and openapi-generator validate.

Fixes #2806
---
 .circleci/config.yml                          |  14 +-
 .../definitions/request/contact/create.yml    |   5 +-
 .../request/conversation/create_message.yml   |   4 +-
 swagger/definitions/resource/conversation.yml |   4 +-
 .../definitions/resource/custom_filter.yml    |   6 +-
 .../definitions/resource/integrations/app.yml |   2 +
 .../resource/public/conversation.yml          |   6 +-
 .../definitions/resource/public/message.yml   |   4 +-
 swagger/index.yml                             |   2 +-
 swagger/parameters/account_id.yml             |   3 +-
 swagger/parameters/agent_bot_id.yml           |   3 +-
 swagger/parameters/contact_sort.yml           |  21 +-
 swagger/parameters/conversation_id.yml        |   3 +-
 swagger/parameters/custom_filter_id.yml       |   3 +-
 swagger/parameters/hook_id.yml                |   3 +-
 swagger/parameters/inbox_id.yml               |   3 +-
 swagger/parameters/message_id.yml             |   3 +-
 swagger/parameters/page.yml                   |   5 +-
 swagger/parameters/platform_user_id.yml       |   3 +-
 .../parameters/public/contact_identifier.yml  |   3 +-
 .../parameters/public/inbox_identifier.yml    |   3 +-
 swagger/parameters/report_metric.yml          |  11 +-
 swagger/parameters/report_type.yml            |  12 +-
 swagger/parameters/source_id.yml              |   5 +-
 swagger/parameters/team_id.yml                |   3 +-
 .../paths/application/agent_bots/index.yml    |   2 +-
 swagger/paths/application/agents/create.yml   |  13 +-
 swagger/paths/application/agents/delete.yml   |   3 +-
 swagger/paths/application/agents/update.yml   |  12 +-
 .../application/contact_inboxes/create.yml    |   6 +-
 swagger/paths/application/contacts/crud.yml   |  29 +-
 .../paths/application/conversation/create.yml |  41 --
 .../paths/application/conversation/filter.yml |  85 ++-
 .../paths/application/conversation/index.yml  |  24 +-
 .../conversation/labels/create.yml            |   2 +-
 .../messages/create_attachment.yml            |   3 +-
 .../conversation/messages/index.yml           |  11 +-
 .../conversation/toggle_status.yml            |   3 +-
 swagger/paths/application/inboxes/create.yml  |   3 +-
 .../inboxes/inbox_members/create.yml          |   9 +-
 .../inboxes/inbox_members/delete.yml          |   9 +-
 .../inboxes/inbox_members/update.yml          |  11 +-
 .../application/inboxes/set_agent_bot.yml     |   3 +-
 swagger/paths/application/inboxes/update.yml  |   7 +-
 swagger/paths/index.yml                       |  81 +--
 .../paths/platform/account_users/create.yml   |   5 +-
 .../paths/platform/account_users/delete.yml   |   3 +-
 swagger/paths/platform/users/login.yml        |  41 +-
 .../paths/public/inboxes/contacts/create.yml  |   3 +-
 .../paths/public/inboxes/contacts/show.yml    |   3 +-
 .../paths/public/inboxes/contacts/update.yml  |   3 +-
 .../public/inboxes/conversations/create.yml   |   3 +-
 .../paths/public/inboxes/messages/create.yml  |   3 +-
 .../paths/public/inboxes/messages/update.yml  |   3 +-
 swagger/swagger.json                          | 664 +++++++-----------
 55 files changed, 527 insertions(+), 695 deletions(-)
 delete mode 100644 swagger/paths/application/conversation/create.yml

diff --git a/.circleci/config.yml b/.circleci/config.yml
index c5a6430a3..5c9b27f03 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -7,7 +7,7 @@ defaults: &defaults
   working_directory: ~/build
   docker:
     # specify the version you desire here
-    - image: cimg/ruby:3.0.2-node
+    - image: cimg/ruby:3.0.2-browsers
 
     # Specify service dependencies here if necessary
     # CircleCI maintains a library of pre-built images
@@ -77,6 +77,18 @@ jobs:
           paths:
             - cc-test-reporter
 
+      # verify swagger specification
+      - run:
+          name: Verify swagger API specification
+          command: |
+            bundle exec rake swagger:build
+            if [[ `git status swagger/swagger.json --porcelain` ]]
+            then
+              echo "ERROR: The swagger.json file is not in sync with the yaml specification. Run 'rake swagger:build' and commit 'swagger/swagger.json'."
+              exit 1
+            fi
+            curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/5.3.0/openapi-generator-cli-5.3.0.jar > ~/tmp/openapi-generator-cli-5.3.0.jar
+            java -jar ~/tmp/openapi-generator-cli-5.3.0.jar validate -i swagger/swagger.json
       # Database setup
       - run: yarn install --check-files
       - run: bundle exec rake db:create
diff --git a/swagger/definitions/request/contact/create.yml b/swagger/definitions/request/contact/create.yml
index c2b010892..068dda9ae 100644
--- a/swagger/definitions/request/contact/create.yml
+++ b/swagger/definitions/request/contact/create.yml
@@ -1,8 +1,9 @@
 type: object
+required:
+  - inbox_id
 properties:
   inbox_id:
     type: number
-    required: true
   name:
     type: string
     description: name of the contact
@@ -12,7 +13,7 @@ properties:
   phone_number:
     type: string
     description: phone number of the contact
-  identifier: 
+  identifier:
     type: string
     description: A unique identifier for the contact in external system
   custom_attributes:
diff --git a/swagger/definitions/request/conversation/create_message.yml b/swagger/definitions/request/conversation/create_message.yml
index da3b27a2d..9082f1318 100644
--- a/swagger/definitions/request/conversation/create_message.yml
+++ b/swagger/definitions/request/conversation/create_message.yml
@@ -1,9 +1,10 @@
 type: object
+required:
+  - content
 properties:
   content:
     type: string
     description: The content of the message
-    required: true
   message_type:
     type: string
     enum: ['outgoing', 'incoming']
@@ -18,4 +19,3 @@ properties:
   content_attributes:
     type: object
     description: attributes based on your content type
-    
diff --git a/swagger/definitions/resource/conversation.yml b/swagger/definitions/resource/conversation.yml
index 9de4dafb8..24c27f681 100644
--- a/swagger/definitions/resource/conversation.yml
+++ b/swagger/definitions/resource/conversation.yml
@@ -5,6 +5,8 @@ properties:
     description: ID of the conversation
   messages:
     type: array
+    items:
+      $ref: '#/definitions/message'
   account_id:
     type: number
     description: Account Id
@@ -21,7 +23,7 @@ properties:
   contact_last_seen_at:
     type: string
   agent_last_seen_at:
-    type: agent_last_seen_at
+    type: string
   unread_count:
     type: number
     description: The number of unread messages
diff --git a/swagger/definitions/resource/custom_filter.yml b/swagger/definitions/resource/custom_filter.yml
index 130377d62..6d96c1e84 100644
--- a/swagger/definitions/resource/custom_filter.yml
+++ b/swagger/definitions/resource/custom_filter.yml
@@ -14,8 +14,10 @@ properties:
     type: object
     description: A query that needs to be saved as a custom filter
   created_at:
-    type: datetime
+    type: string
+    format: date-time
     description: The time at which the custom filter was created
   updated_at:
-    type: datetime
+    type: string
+    format: date-time
     description: The time at which the custom filter was updated
diff --git a/swagger/definitions/resource/integrations/app.yml b/swagger/definitions/resource/integrations/app.yml
index ce7fb1e75..1136f2aca 100644
--- a/swagger/definitions/resource/integrations/app.yml
+++ b/swagger/definitions/resource/integrations/app.yml
@@ -20,4 +20,6 @@ properties:
     description: Whether multiple hooks can be created for the integration
   hooks:
     type: array
+    items:
+      type: object
     description: If there are any hooks created for this integration
diff --git a/swagger/definitions/resource/public/conversation.yml b/swagger/definitions/resource/public/conversation.yml
index 97e4b48eb..a2f797e1b 100644
--- a/swagger/definitions/resource/public/conversation.yml
+++ b/swagger/definitions/resource/public/conversation.yml
@@ -1,5 +1,5 @@
 type: object
-properties: 
+properties:
   id:
     type: integer
     description: Id of the conversation
@@ -8,7 +8,9 @@ properties:
     description: The inbox id of the conversation
   messages:
     type: array
+    items:
+      $ref: '#/definitions/message'
     description: Messages in the conversation
   contact:
     type: object
-    description: The contact information associated to the conversation
\ No newline at end of file
+    description: The contact information associated to the conversation
diff --git a/swagger/definitions/resource/public/message.yml b/swagger/definitions/resource/public/message.yml
index fe2c80a0c..242a4fbf4 100644
--- a/swagger/definitions/resource/public/message.yml
+++ b/swagger/definitions/resource/public/message.yml
@@ -1,5 +1,5 @@
 type: object
-properties: 
+properties:
   id:
     type: string
     description: Id of the message
@@ -23,6 +23,8 @@ properties:
     description: Conversation Id of the message
   attachments:
     type: array
+    items:
+      type: object
     description: Attachments if any
   sender:
     type: object
diff --git a/swagger/index.yml b/swagger/index.yml
index 908c27509..2420658e3 100644
--- a/swagger/index.yml
+++ b/swagger/index.yml
@@ -10,7 +10,7 @@ info:
     name: MIT License
     url: https://opensource.org/licenses/MIT
 host: app.chatwoot.com
-basePath:
+basePath: /
 schemes:
   - https
 produces:
diff --git a/swagger/parameters/account_id.yml b/swagger/parameters/account_id.yml
index 133155c21..aa3d48a8a 100644
--- a/swagger/parameters/account_id.yml
+++ b/swagger/parameters/account_id.yml
@@ -1,6 +1,5 @@
 in: path
 name: account_id
-schema:
-  type: integer
+type: integer
 required: true
 description: The numeric ID of the account
diff --git a/swagger/parameters/agent_bot_id.yml b/swagger/parameters/agent_bot_id.yml
index 4d1479cb4..6c94ef5dc 100644
--- a/swagger/parameters/agent_bot_id.yml
+++ b/swagger/parameters/agent_bot_id.yml
@@ -1,6 +1,5 @@
 in: path
 name: id
-schema:
-  type: integer
+type: integer
 required: true
 description: The ID of the agentbot to be updated
diff --git a/swagger/parameters/contact_sort.yml b/swagger/parameters/contact_sort.yml
index f25d07760..6f3da0b1b 100644
--- a/swagger/parameters/contact_sort.yml
+++ b/swagger/parameters/contact_sort.yml
@@ -1,15 +1,14 @@
 in: query
 name: sort
-schema:
-  type: string
-  enum:
-    - name
-    - email
-    - phone_number
-    - last_activity_at
-    - -name
-    - -email
-    - -phone_number
-    - -last_activity_at
+type: string
+enum:
+  - name
+  - email
+  - phone_number
+  - last_activity_at
+  - -name
+  - -email
+  - -phone_number
+  - -last_activity_at
 required: false
 description: The attribute by which list should be sorted
diff --git a/swagger/parameters/conversation_id.yml b/swagger/parameters/conversation_id.yml
index 4f4cb19ab..d8de755fe 100644
--- a/swagger/parameters/conversation_id.yml
+++ b/swagger/parameters/conversation_id.yml
@@ -1,6 +1,5 @@
 in: path
 name: conversation_id
-schema:
-  type: integer
+type: integer
 required: true
 description: The numeric ID of the conversation
diff --git a/swagger/parameters/custom_filter_id.yml b/swagger/parameters/custom_filter_id.yml
index 46776511f..b19f52f8e 100644
--- a/swagger/parameters/custom_filter_id.yml
+++ b/swagger/parameters/custom_filter_id.yml
@@ -1,6 +1,5 @@
 in: path
 name: custom_filter_id
-schema:
-  type: integer
+type: integer
 required: true
 description: The numeric ID of the custom filter
diff --git a/swagger/parameters/hook_id.yml b/swagger/parameters/hook_id.yml
index f1c50c3d4..c1600def4 100644
--- a/swagger/parameters/hook_id.yml
+++ b/swagger/parameters/hook_id.yml
@@ -1,6 +1,5 @@
 in: path
 name: hook_id
-schema:
-  type: integer
+type: integer
 required: true
 description: The numeric ID of the integration hook
diff --git a/swagger/parameters/inbox_id.yml b/swagger/parameters/inbox_id.yml
index 58640fb08..716d34de6 100644
--- a/swagger/parameters/inbox_id.yml
+++ b/swagger/parameters/inbox_id.yml
@@ -1,6 +1,5 @@
 in: path
 name: inbox_id
-schema:
-  type: integer
+type: integer
 required: true
 description: The ID of the Inbox
diff --git a/swagger/parameters/message_id.yml b/swagger/parameters/message_id.yml
index 3064a31e2..3fc6edfcf 100644
--- a/swagger/parameters/message_id.yml
+++ b/swagger/parameters/message_id.yml
@@ -1,6 +1,5 @@
 in: path
 name: message_id
-schema:
-  type: integer
+type: integer
 required: true
 description: The numeric ID of the message
diff --git a/swagger/parameters/page.yml b/swagger/parameters/page.yml
index 3ef0f55b6..8cdc77b1e 100644
--- a/swagger/parameters/page.yml
+++ b/swagger/parameters/page.yml
@@ -1,7 +1,6 @@
 in: query
 name: page
-schema:
-  type: integer
-  default: 1
+type: integer
+default: 1
 required: false
 description: The page parameter
diff --git a/swagger/parameters/platform_user_id.yml b/swagger/parameters/platform_user_id.yml
index 708a0aad9..d31f71878 100644
--- a/swagger/parameters/platform_user_id.yml
+++ b/swagger/parameters/platform_user_id.yml
@@ -1,6 +1,5 @@
 in: path
 name: id
-schema:
-  type: integer
+type: integer
 required: true
 description: The numeric ID of the user on the platform
diff --git a/swagger/parameters/public/contact_identifier.yml b/swagger/parameters/public/contact_identifier.yml
index 3dd2d28c2..6bb522c6b 100644
--- a/swagger/parameters/public/contact_identifier.yml
+++ b/swagger/parameters/public/contact_identifier.yml
@@ -1,6 +1,5 @@
 in: path
 name: contact_identifier
-schema:
-  type: string
+type: string
 required: true
 description: The source id of contact obtained on contact create
diff --git a/swagger/parameters/public/inbox_identifier.yml b/swagger/parameters/public/inbox_identifier.yml
index 35e33e6c2..091c0d73e 100644
--- a/swagger/parameters/public/inbox_identifier.yml
+++ b/swagger/parameters/public/inbox_identifier.yml
@@ -1,6 +1,5 @@
 in: path
 name: inbox_identifier
-schema:
-  type: string
+type: string
 required: true
 description: The identifier obtained from API inbox channel
diff --git a/swagger/parameters/report_metric.yml b/swagger/parameters/report_metric.yml
index d40cadc9c..552b0d310 100644
--- a/swagger/parameters/report_metric.yml
+++ b/swagger/parameters/report_metric.yml
@@ -1,7 +1,12 @@
 in: query
 name: metric
-schema:
-  type: string
-  enum: [conversations_count, incoming_messages_count, outgoing_messages_count, avg_first_response_time, avg_resolution_time, resolutions_count]
+type: string
+enum:
+  - conversations_count
+  - incoming_messages_count
+  - outgoing_messages_count
+  - avg_first_response_time
+  - avg_resolution_time
+  - resolutions_count
 required: true
 description: The type of metric
diff --git a/swagger/parameters/report_type.yml b/swagger/parameters/report_type.yml
index 407478d9d..5def952c6 100644
--- a/swagger/parameters/report_type.yml
+++ b/swagger/parameters/report_type.yml
@@ -1,7 +1,11 @@
 in: query
 name: report_type
-schema:
-  type: string
-  enum: [account,agent,inbox,label,team]
+type: string
+enum:
+  - account
+  - agent
+  - inbox
+  - label
+  - team
 required: true
-description: Type of report 
+description: Type of report
diff --git a/swagger/parameters/source_id.yml b/swagger/parameters/source_id.yml
index 47536332f..408beed86 100644
--- a/swagger/parameters/source_id.yml
+++ b/swagger/parameters/source_id.yml
@@ -1,2 +1,5 @@
+in: path
+name: source_id
+required: true
 type: string
-description: "Id of the session for which the conversation is created.\n\n\n\n Source Ids can be obtained through contactable inboxes API or via generated.<br/><br/>Website: Chatwoot generated string which can be obtained from webhook events. <br/> Phone Channels(Twilio): Phone number in e164 format <br/> Email Channels: Contact Email address <br/> API Channel: Any Random String"
\ No newline at end of file
+description: "Id of the session for which the conversation is created.\n\n\n\n Source Ids can be obtained through contactable inboxes API or via generated.<br/><br/>Website: Chatwoot generated string which can be obtained from webhook events. <br/> Phone Channels(Twilio): Phone number in e164 format <br/> Email Channels: Contact Email address <br/> API Channel: Any Random String"
diff --git a/swagger/parameters/team_id.yml b/swagger/parameters/team_id.yml
index e71d32d6e..805c32c2d 100644
--- a/swagger/parameters/team_id.yml
+++ b/swagger/parameters/team_id.yml
@@ -1,6 +1,5 @@
 in: path
 name: id
-schema:
-  type: integer
+type: integer
 required: true
 description: The ID of the team to be updated
diff --git a/swagger/paths/application/agent_bots/index.yml b/swagger/paths/application/agent_bots/index.yml
index 26766f5c8..2c5fe289f 100644
--- a/swagger/paths/application/agent_bots/index.yml
+++ b/swagger/paths/application/agent_bots/index.yml
@@ -10,7 +10,7 @@ responses:
       type: array
       description: 'Array of agent bots'
       items:
-        - $ref: '#/definitions/agent_bot'
+        $ref: '#/definitions/agent_bot'
 
   401:
     description: Unauthorized
diff --git a/swagger/paths/application/agents/create.yml b/swagger/paths/application/agents/create.yml
index 01ae1ed42..b206eb306 100644
--- a/swagger/paths/application/agents/create.yml
+++ b/swagger/paths/application/agents/create.yml
@@ -11,21 +11,22 @@ parameters:
     required: true
     schema:
       type: object
+      required:
+        - name
+        - email
+        - role
       properties:
-        name: 
+        name:
           type: string
           description: Full Name of the agent
-          required: true
         email:
           type: string
           description: Email of the Agent
-          required: true
-        role: 
+        role:
           type: string
           enum: ['agent', 'administrator']
           description: Whether its administrator or agent
-          required: true
-        availability_status: 
+        availability_status:
           type: string
           enum: ['available', 'busy', 'offline']
           description: The availability setting of the agent.
diff --git a/swagger/paths/application/agents/delete.yml b/swagger/paths/application/agents/delete.yml
index 533d3f1ca..1872fd8ea 100644
--- a/swagger/paths/application/agents/delete.yml
+++ b/swagger/paths/application/agents/delete.yml
@@ -8,8 +8,7 @@ security:
 parameters:
   - in: path
     name: id
-    schema:
-      type: integer
+    type: integer
     required: true
     description: The ID of the agent to be deleted
 responses:
diff --git a/swagger/paths/application/agents/update.yml b/swagger/paths/application/agents/update.yml
index bd3b3f2cb..693bef5b2 100644
--- a/swagger/paths/application/agents/update.yml
+++ b/swagger/paths/application/agents/update.yml
@@ -8,8 +8,7 @@ security:
 parameters:
   - in: path
     name: id
-    schema:
-      type: integer
+    type: integer
     required: true
     description: The ID of the agent to be updated.
   - name: data
@@ -17,13 +16,14 @@ parameters:
     required: true
     schema:
       type: object
+      required:
+        - role
       properties:
-        role: 
+        role:
           type: string
           enum: ['agent', 'administrator']
           description: Whether its administrator or agent
-          required: true
-        availability: 
+        availability:
           type: string
           enum: ['available', 'busy', 'offline']
           description: The availability setting of the agent.
@@ -39,4 +39,4 @@ responses:
   404:
     description: Agent not found
   403:
-    description: Access denied
\ No newline at end of file
+    description: Access denied
diff --git a/swagger/paths/application/contact_inboxes/create.yml b/swagger/paths/application/contact_inboxes/create.yml
index 210949ebf..2b784b5dd 100644
--- a/swagger/paths/application/contact_inboxes/create.yml
+++ b/swagger/paths/application/contact_inboxes/create.yml
@@ -16,13 +16,15 @@ post:
       required: true
       schema:
         type: object
+        required:
+          - inbox_id
         properties:
           inbox_id:
             type: number
             description: The ID of the inbox
-            required: true
           source_id:
-            $ref: '#/parameters/source_id'
+            type: string
+            description: Contact Inbox Source Id
   responses:
     200:
       description: Success
diff --git a/swagger/paths/application/contacts/crud.yml b/swagger/paths/application/contacts/crud.yml
index 7f0089b4b..af9fecff7 100644
--- a/swagger/paths/application/contacts/crud.yml
+++ b/swagger/paths/application/contacts/crud.yml
@@ -1,16 +1,17 @@
+parameters:
+  - $ref: '#/parameters/account_id'
+  - name: id
+    in: path
+    type: number
+    description: ID of the contact
+    required: true
+
 get:
   tags:
     - Contact
   operationId: contactDetails
   summary: Show Contact
   description: Get a contact belonging to the account using ID
-  parameters:
-    - $ref: '#/parameters/account_id'
-    - name: id
-      in: path
-      type: number
-      description: ID of the contact
-      required: true
   responses:
     200:
       description: Success
@@ -28,12 +29,6 @@ put:
   summary: Update Contact
   description: Update a contact belonging to the account using ID
   parameters:
-    - $ref: '#/parameters/account_id'
-    - name: id
-      in: path
-      type: number
-      description: ID of the contact
-      required: true
     - name: data
       in: body
       required: true
@@ -54,16 +49,10 @@ delete:
     - Contact
   operationId: contactDelete
   summary: Delete Contact
-  parameters:
-    - name: id
-      in: path
-      type: number
-      description: ID of the contact
-      required: true
   responses:
     200:
       description: Success
     401:
       description: Unauthorized
     404:
-      description: Contact not found
\ No newline at end of file
+      description: Contact not found
diff --git a/swagger/paths/application/conversation/create.yml b/swagger/paths/application/conversation/create.yml
deleted file mode 100644
index 104460bae..000000000
--- a/swagger/paths/application/conversation/create.yml
+++ /dev/null
@@ -1,41 +0,0 @@
-get:
-  tags:
-    - Conversation
-  operationId: conversationList
-  description: List all the conversations with pagination
-  summary: Conversations List
-  parameters:
-    - $ref: '#/parameters/account_id'
-    - name: assignee_type
-      in: query
-      type: string
-      enum: ['me', 'unassigned', 'all', 'assigned']
-      required: true
-    - name: status
-      in: query
-      type: string
-      enum: ['open', 'resolved', 'pending']
-      required: true
-    - name: page
-      in: query
-      type: integer
-      required: true
-    - name: inbox_id
-      in: query
-      type: integer
-    - name: labels
-      in: query
-      type: array
-      items:
-        type: string
-
-  responses:
-    200:
-      description: Success
-      schema:
-        $ref: '#/definitions/conversation_list'
-    400:
-      description: Bad Request Error
-      schema:
-        $ref: '#/definitions/bad_request_error'
-    description: Access denied
\ No newline at end of file
diff --git a/swagger/paths/application/conversation/filter.yml b/swagger/paths/application/conversation/filter.yml
index 39d8259cf..ce14b7823 100644
--- a/swagger/paths/application/conversation/filter.yml
+++ b/swagger/paths/application/conversation/filter.yml
@@ -1,44 +1,43 @@
-post:
-  tags:
-    - Conversation
-  operationId: conversationFilter
-  description: Filter conversations with custom filter options and pagination
-  summary: Conversations Filter
-  security:
-    - userApiKey: []
-    - agentBotApiKey: []
-  parameters:
-    - name: page
-      in: query
-      type: integer
-    - name: payload
-      in: body
-      required: true
-      schema:
-        type: array
-        items:
-          type: object
-          properties:
-            attribute_key:
+tags:
+  - Conversation
+operationId: conversationFilter
+description: Filter conversations with custom filter options and pagination
+summary: Conversations Filter
+security:
+  - userApiKey: []
+  - agentBotApiKey: []
+parameters:
+  - name: page
+    in: query
+    type: integer
+  - name: payload
+    in: body
+    required: true
+    schema:
+      type: array
+      items:
+        type: object
+        properties:
+          attribute_key:
+            type: string
+            description: filter attribute name
+          filter_operator:
+            type: string
+            description: filter operator name
+          values:
+            type: array
+            items:
               type: string
-              description: filter attribute name
-            filter_operator:
-              type: string
-              description: filter operator name
-            values:
-              type: array
-              description: array of the attribute values to filter
-            query_operator:
-              type: string
-              description: query operator name
-    - $ref: '#/parameters/account_id'
-  responses:
-    200:
-      description: Success
-      schema:
-        $ref: '#/definitions/conversation_list'
-    400:
-      description: Bad Request Error
-      schema:
-        $ref: '#/definitions/bad_request_error'
-    description: Access denied
+            description: array of the attribute values to filter
+          query_operator:
+            type: string
+            description: query operator name
+responses:
+  200:
+    description: Success
+    schema:
+      $ref: '#/definitions/conversation_list'
+  400:
+    description: Bad Request Error
+    schema:
+      $ref: '#/definitions/bad_request_error'
diff --git a/swagger/paths/application/conversation/index.yml b/swagger/paths/application/conversation/index.yml
index 022fe7911..d5f8f9c0c 100644
--- a/swagger/paths/application/conversation/index.yml
+++ b/swagger/paths/application/conversation/index.yml
@@ -1,24 +1,27 @@
+parameters:
+  - $ref: '#/parameters/account_id'
+
 get:
   tags:
     - Conversation
-  operationId: conversationSearch
-  description: Search for conversations containing a messages with the query string
-  summary: Conversations Search
+  operationId: conversationList
+  description: List all the conversations with pagination
+  summary: Conversations List
   parameters:
-    - name: q
-      in: query
-      type: string
     - name: assignee_type
       in: query
       type: string
       enum: ['me', 'unassigned', 'all', 'assigned']
+      required: true
     - name: status
       in: query
       type: string
-      enum: ['open', 'resolved', 'pending', 'all']
+      enum: ['open', 'resolved', 'pending']
+      required: true
     - name: page
       in: query
       type: integer
+      required: true
     - name: inbox_id
       in: query
       type: integer
@@ -27,7 +30,6 @@ get:
       type: array
       items:
         type: string
-    - $ref: '#/parameters/account_id'
 
   responses:
     200:
@@ -38,8 +40,6 @@ get:
       description: Bad Request Error
       schema:
         $ref: '#/definitions/bad_request_error'
-    description: Access denied
-
 
 post:
   tags:
@@ -51,7 +51,6 @@ post:
     - userApiKey: []
     - agentBotApiKey: []
   parameters:
-    - $ref: '#/parameters/account_id'
     - name: data
       in: body
       required: true
@@ -59,7 +58,8 @@ post:
         type: object
         properties:
           source_id:
-            $ref: '#/parameters/source_id'
+            type: string
+            description: Conversation source id
           inbox_id:
             type: string
             description: "Id of inbox in which the conversation is created <br/> Allowed Inbox Types: Website, Phone, Api, Email "
diff --git a/swagger/paths/application/conversation/labels/create.yml b/swagger/paths/application/conversation/labels/create.yml
index 6082ccae4..0f686ee24 100644
--- a/swagger/paths/application/conversation/labels/create.yml
+++ b/swagger/paths/application/conversation/labels/create.yml
@@ -13,7 +13,7 @@ parameters:
         labels:
           type: array
           description: Array of labels (comma-separated strings)
-          properties:
+          items:
             type: string
 responses:
   200:
diff --git a/swagger/paths/application/conversation/messages/create_attachment.yml b/swagger/paths/application/conversation/messages/create_attachment.yml
index 155876e13..594f9a819 100644
--- a/swagger/paths/application/conversation/messages/create_attachment.yml
+++ b/swagger/paths/application/conversation/messages/create_attachment.yml
@@ -31,7 +31,8 @@ post:
       type: array
       description: The files to be uploaded.
       items:
-        type: file
+        type: string
+        format: binary
 
 
   responses:
diff --git a/swagger/paths/application/conversation/messages/index.yml b/swagger/paths/application/conversation/messages/index.yml
index 8fe7558ae..d99e8393b 100644
--- a/swagger/paths/application/conversation/messages/index.yml
+++ b/swagger/paths/application/conversation/messages/index.yml
@@ -6,12 +6,13 @@ description: List all messages of a conversation
 responses:
   200:
     description: Success
-    type: array
-    description: Array of messages
     schema:
-      allOf:
-        - $ref: '#/definitions/generic_id'
-        - $ref: '#/definitions/message'
+      type: array
+      description: Array of messages
+      items:
+        allOf:
+          - $ref: '#/definitions/generic_id'
+          - $ref: '#/definitions/message'
   404:
     description: Conversation not found
   401:
diff --git a/swagger/paths/application/conversation/toggle_status.yml b/swagger/paths/application/conversation/toggle_status.yml
index a737281a4..14172e27c 100644
--- a/swagger/paths/application/conversation/toggle_status.yml
+++ b/swagger/paths/application/conversation/toggle_status.yml
@@ -12,11 +12,12 @@ parameters:
     required: true
     schema:
       type: object
+      required:
+        - status
       properties:
         status:
           type: string
           enum: ["open", "resolved", "pending"]
-          required: true
           description: The status of the conversation
 responses:
   200:
diff --git a/swagger/paths/application/inboxes/create.yml b/swagger/paths/application/inboxes/create.yml
index 3cb30689e..2a63775e7 100644
--- a/swagger/paths/application/inboxes/create.yml
+++ b/swagger/paths/application/inboxes/create.yml
@@ -16,7 +16,8 @@ post:
             type: string
             description: The name of the inbox
           avatar:
-            type: file
+            type: string
+            format: binary
             description: File for avatar image
           channel:
             type: object
diff --git a/swagger/paths/application/inboxes/inbox_members/create.yml b/swagger/paths/application/inboxes/inbox_members/create.yml
index 6ffd75af5..2cbbb4598 100644
--- a/swagger/paths/application/inboxes/inbox_members/create.yml
+++ b/swagger/paths/application/inboxes/inbox_members/create.yml
@@ -11,15 +11,18 @@ parameters:
     required: true
     schema:
       type: object
+      required:
+          - inbox_id
+          - user_ids
       properties:
         inbox_id:
           type: string
           description: The ID of the inbox
-          required: true
-        user_ids: 
+        user_ids:
           type: array
+          items:
+            type: integer
           description: IDs of users to be added to the inbox
-          required: true
 responses:
   200:
     description: Success
diff --git a/swagger/paths/application/inboxes/inbox_members/delete.yml b/swagger/paths/application/inboxes/inbox_members/delete.yml
index a19f1c179..3167b28c6 100644
--- a/swagger/paths/application/inboxes/inbox_members/delete.yml
+++ b/swagger/paths/application/inboxes/inbox_members/delete.yml
@@ -11,15 +11,18 @@ parameters:
     required: true
     schema:
       type: object
+      required:
+        - inbox_id
+        - user_ids
       properties:
         inbox_id:
           type: string
           description: The ID of the inbox
-          required: true
-        user_ids: 
+        user_ids:
           type: array
+          items:
+            type: integer
           description: IDs of users to be deleted from the inbox
-          required: true
 responses:
   200:
     description: Success
diff --git a/swagger/paths/application/inboxes/inbox_members/update.yml b/swagger/paths/application/inboxes/inbox_members/update.yml
index 0bcf81747..3a06cef27 100644
--- a/swagger/paths/application/inboxes/inbox_members/update.yml
+++ b/swagger/paths/application/inboxes/inbox_members/update.yml
@@ -2,7 +2,7 @@ tags:
   - Inbox
 operationId: update-agents-in-inbox
 summary: Update Agents in Inbox
-description: All agents execept the one passed in params will be removed
+description: All agents except the one passed in params will be removed
 security:
   - userApiKey: []
 parameters:
@@ -11,15 +11,18 @@ parameters:
     required: true
     schema:
       type: object
+      required:
+        - inbox_id
+        - user_ids
       properties:
         inbox_id:
           type: string
           description: The ID of the inbox
-          required: true
-        user_ids: 
+        user_ids:
           type: array
+          items:
+            type: integer
           description: IDs of users to be added to the inbox
-          required: true
 responses:
   200:
     description: Success
diff --git a/swagger/paths/application/inboxes/set_agent_bot.yml b/swagger/paths/application/inboxes/set_agent_bot.yml
index fbe0c03ab..b37b06915 100644
--- a/swagger/paths/application/inboxes/set_agent_bot.yml
+++ b/swagger/paths/application/inboxes/set_agent_bot.yml
@@ -16,10 +16,11 @@ post:
       required: true
       schema:
         type: object
+        required:
+          - agent_bot
         properties:
           agent_bot:
             type: number
-            required: true
             description: 'Agent bot ID'
   responses:
     204:
diff --git a/swagger/paths/application/inboxes/update.yml b/swagger/paths/application/inboxes/update.yml
index 90a3d13ce..d44822114 100644
--- a/swagger/paths/application/inboxes/update.yml
+++ b/swagger/paths/application/inboxes/update.yml
@@ -16,17 +16,18 @@ patch:
       required: true
       schema:
         type: object
+        required:
+          - enable_auto_assignment
         properties:
           name:
             type: string
             description: The name of the inbox
           enable_auto_assignment:
             type: boolean
-            required: true
             description: 'Enable Auto Assignment'
           avatar:
-            type: file
-            required: false
+            type: string
+            format: binary
             description: 'Image file for avatar'
           channel:
             type: object
diff --git a/swagger/paths/index.yml b/swagger/paths/index.yml
index 7f25ec67e..b25d6ff68 100644
--- a/swagger/paths/index.yml
+++ b/swagger/paths/index.yml
@@ -2,10 +2,10 @@
 
 # Accounts
 
-platform/api/v1/accounts:
+/platform/api/v1/accounts:
   post:
     $ref: ./platform/accounts/create.yml
-platform/api/v1/accounts/{id}:
+/platform/api/v1/accounts/{account_id}:
   parameters:
     - $ref: '#/parameters/account_id'
   get:
@@ -18,7 +18,7 @@ platform/api/v1/accounts/{id}:
 
 # Account Users
 
-platform/api/v1/accounts/{id}/account_users:
+/platform/api/v1/accounts/{account_id}/account_users:
   parameters:
     - $ref: '#/parameters/account_id'
   get:
@@ -30,12 +30,12 @@ platform/api/v1/accounts/{id}/account_users:
 
 # AgentBots
 
-platform/api/v1/agent_bots:
+/platform/api/v1/agent_bots:
   get:
     $ref: ./platform/agent_bots/index.yml
   post:
     $ref: ./platform/agent_bots/create.yml
-platform/api/v1/agent_bots/{id}:
+/platform/api/v1/agent_bots/{id}:
   parameters:
     - $ref: '#/parameters/agent_bot_id'
   get:
@@ -47,10 +47,10 @@ platform/api/v1/agent_bots/{id}:
 
 # Users
 
-platform/api/v1/users:
+/platform/api/v1/users:
   post:
     $ref: ./platform/users/create.yml
-platform/api/v1/users/{id}:
+/platform/api/v1/users/{id}:
   parameters:
     - $ref: '#/parameters/platform_user_id'
   get:
@@ -59,10 +59,11 @@ platform/api/v1/users/{id}:
     $ref: ./platform/users/update.yml
   delete:
     $ref: ./platform/users/delete.yml
-platform/api/v1/users/{id}/login:
+/platform/api/v1/users/{id}/login:
   parameters:
     - $ref: '#/parameters/platform_user_id'
-  $ref: './platform/users/login.yml'
+  get:
+    $ref: './platform/users/login.yml'
 
 
 # ---------------- end of platform path -----------#
@@ -71,12 +72,12 @@ platform/api/v1/users/{id}/login:
 
 # Contacts
 
-public/api/v1/inboxes/{inbox_identifier}/contacts:
+/public/api/v1/inboxes/{inbox_identifier}/contacts:
   parameters:
     - $ref: '#/parameters/public_inbox_identifier'
   post:
     $ref: ./public/inboxes/contacts/create.yml
-public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}:
+/public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}:
   parameters:
     - $ref: '#/parameters/public_inbox_identifier'
     - $ref: '#/parameters/public_contact_identifier'
@@ -86,7 +87,7 @@ public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}:
     $ref: ./public/inboxes/contacts/update.yml
 
 
-public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations:
+/public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations:
   parameters:
     - $ref: '#/parameters/public_inbox_identifier'
     - $ref: '#/parameters/public_contact_identifier'
@@ -95,7 +96,7 @@ public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversat
   get:
     $ref: ./public/inboxes/conversations/index.yml
 
-public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations/{conversation_id}/messages:
+/public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations/{conversation_id}/messages:
   parameters:
     - $ref: '#/parameters/public_inbox_identifier'
     - $ref: '#/parameters/public_contact_identifier'
@@ -104,7 +105,7 @@ public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversat
     $ref: ./public/inboxes/messages/create.yml
   get:
     $ref: ./public/inboxes/messages/index.yml
-public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations/{conversation_id}/messages/{message_id}:
+/public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations/{conversation_id}/messages/{message_id}:
   parameters:
     - $ref: '#/parameters/public_inbox_identifier'
     - $ref: '#/parameters/public_contact_identifier'
@@ -139,11 +140,15 @@ public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversat
 
 # Agents
 /api/v1/accounts/{account_id}/agents:
+  parameters:
+    - $ref: '#/parameters/account_id'
   get:
     $ref: ./application/agents/index.yml
   post:
     $ref: ./application/agents/create.yml
 /api/v1/accounts/{account_id}/agents/{id}:
+  parameters:
+    - $ref: '#/parameters/account_id'
   patch:
     $ref: ./application/agents/update.yml
   delete:
@@ -167,18 +172,13 @@ public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversat
 
 # Conversations
 /api/v1/accounts/{account_id}/conversations:
-  parameters:
-    - $ref: '#/parameters/account_id'
   $ref: ./application/conversation/index.yml
-/api/v1/accounts/{account_id}/conversations/:
-  parameters:
-    - $ref: '#/parameters/account_id'
-  $ref: ./application/conversation/create.yml
 /api/v1/accounts/{account_id}/conversations/filter:
   parameters:
     - $ref: '#/parameters/account_id'
-  $ref: ./application/conversation/filter.yml
-/api/v1/accounts/{account_id}/conversations/{converstion_id}:
+  post:
+    $ref: ./application/conversation/filter.yml
+/api/v1/accounts/{account_id}/conversations/{conversation_id}:
   parameters:
     - $ref: '#/parameters/account_id'
     - $ref: '#/parameters/conversation_id'
@@ -227,7 +227,10 @@ public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversat
   $ref: ./application/inboxes/set_agent_bot.yml
 
 # Inbox Members
-/api/v1/accounts/{account_id}/inbox_members:
+/api/v1/accounts/{account_id}/inbox_members/{inbox_id}:
+  parameters:
+    - $ref: '#/parameters/account_id'
+    - $ref: '#/parameters/inbox_id'
   get:
     $ref: ./application/inboxes/inbox_members/show.yml
   post:
@@ -240,9 +243,7 @@ public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversat
 
 
 # Messages
-/api/v1/accounts/{account_id}/conversations/{id}/messages:
-  $ref: ./application/conversation/messages/create_attachment.yml
-/api/v1/accounts/{account_id}/conversations/{converstion_id}/messages:
+/api/v1/accounts/{account_id}/conversations/{conversation_id}/messages:
   parameters:
     - $ref: '#/parameters/account_id'
     - $ref: '#/parameters/conversation_id'
@@ -269,6 +270,7 @@ public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversat
 /api/v1/accounts/{account_id}/integrations/hooks:
   post:
     $ref: './application/integrations/hooks/create.yml'
+/api/v1/accounts/{account_id}/integrations/hooks/{hook_id}:
   patch:
     $ref: ./application/integrations/hooks/update.yml
   delete:
@@ -308,9 +310,8 @@ public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversat
     - $ref: '#/parameters/account_id'
     - in: query
       name: filter_type
-      schema:
-        type: string
-        enum: ['conversation', 'contact', 'report']
+      type: string
+      enum: ['conversation', 'contact', 'report']
       required: false
       description: The type of custom filter
   get:
@@ -331,48 +332,42 @@ public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversat
 ### Reports
 
 # List
-/api/v2/accounts/{id}/reports:
+/api/v2/accounts/{account_id}/reports:
   parameters:
     - $ref: '#/parameters/account_id'
     - $ref: '#/parameters/report_metric'
     - $ref: '#/parameters/report_type'
     - in: query
       name: id
-      schema:
-        type: string
+      type: string
       description: The Id of specific object in case of agent/inbox/label
     - in: query
       name: since
-      schema:
-        type: string
+      type: string
       description: The timestamp from where report should start.
     - in: query
       name: until
-      schema:
-        type: string
+      type: string
       description: The timestamp from where report should stop.
   get:
     $ref: './application/reports/index.yml'
 
 # Summary
-/api/v2/accounts/{id}/reports/summary:
+/api/v2/accounts/{account_id}/reports/summary:
   parameters:
     - $ref: '#/parameters/account_id'
     - $ref: '#/parameters/report_type'
     - in: query
       name: id
-      schema:
-        type: string
+      type: string
       description: The Id of specific object in case of agent/inbox/label
     - in: query
       name: since
-      schema:
-        type: string
+      type: string
       description: The timestamp from where report should start.
     - in: query
       name: until
-      schema:
-        type: string
+      type: string
       description: The timestamp from where report should stop.
   get:
     $ref: './application/reports/summary.yml'
diff --git a/swagger/paths/platform/account_users/create.yml b/swagger/paths/platform/account_users/create.yml
index 614efb7a8..97dc7127d 100644
--- a/swagger/paths/platform/account_users/create.yml
+++ b/swagger/paths/platform/account_users/create.yml
@@ -11,15 +11,16 @@ parameters:
     required: true
     schema:
       type: object
+      required:
+        - user_id
+        - role
       properties: 
         user_id:
           type: integer
           description: The ID of the user
-          required: true
         role:
           type: string
           description: whether user is an administrator or agent
-          required: true
       
 responses:
   200:
diff --git a/swagger/paths/platform/account_users/delete.yml b/swagger/paths/platform/account_users/delete.yml
index 1ff822a9e..d864619f7 100644
--- a/swagger/paths/platform/account_users/delete.yml
+++ b/swagger/paths/platform/account_users/delete.yml
@@ -11,11 +11,12 @@ parameters:
     required: true
     schema:
       type: object
+      required:
+        - user_id
       properties: 
         user_id:
           type: integer
           description: The ID of the user
-          required: true
 
 responses:
   200:
diff --git a/swagger/paths/platform/users/login.yml b/swagger/paths/platform/users/login.yml
index 3f0b8b4c1..be210c7aa 100644
--- a/swagger/paths/platform/users/login.yml
+++ b/swagger/paths/platform/users/login.yml
@@ -1,21 +1,20 @@
-get:
-  tags:
-    - Users
-  operationId: get-sso-url-of-a-user
-  summary: Get User SSO Link
-  description: Get the sso link of a user
-  security:
-    - platformAppApiKey: []
-  responses:
-    200:
-      description: Success
-      schema:
-        type: object
-        properties:
-          url:
-            type: string
-            description: SSO url to autenticate the user
-    401:
-      description: Unauthorized
-    404:
-      description: The given user does not exist
+tags:
+  - Users
+operationId: get-sso-url-of-a-user
+summary: Get User SSO Link
+description: Get the sso link of a user
+security:
+  - platformAppApiKey: []
+responses:
+  200:
+    description: Success
+    schema:
+      type: object
+      properties:
+        url:
+          type: string
+          description: SSO url to autenticate the user
+  401:
+    description: Unauthorized
+  404:
+    description: The given user does not exist
diff --git a/swagger/paths/public/inboxes/contacts/create.yml b/swagger/paths/public/inboxes/contacts/create.yml
index e504ee9e7..51d894f3e 100644
--- a/swagger/paths/public/inboxes/contacts/create.yml
+++ b/swagger/paths/public/inboxes/contacts/create.yml
@@ -3,8 +3,7 @@ tags:
 operationId: create-a-contact
 summary: Create a contact
 description: Create a contact
-security:
-  - nil
+security: []
 parameters:
   - name: data
     in: body
diff --git a/swagger/paths/public/inboxes/contacts/show.yml b/swagger/paths/public/inboxes/contacts/show.yml
index a57d3e0b5..a5d8b8fdc 100644
--- a/swagger/paths/public/inboxes/contacts/show.yml
+++ b/swagger/paths/public/inboxes/contacts/show.yml
@@ -3,8 +3,7 @@ tags:
 operationId: get-details-of-a-contact
 summary: Get a contact
 description: Get the details of a contact
-security:
-  - nil
+security: []
 responses:
   200:
     description: Success
diff --git a/swagger/paths/public/inboxes/contacts/update.yml b/swagger/paths/public/inboxes/contacts/update.yml
index 084926134..a413c76b3 100644
--- a/swagger/paths/public/inboxes/contacts/update.yml
+++ b/swagger/paths/public/inboxes/contacts/update.yml
@@ -3,8 +3,7 @@ tags:
 operationId: update-a-contact
 summary: Update a contact
 description: Update a contact's attributes
-security:
-  - nil
+security: []
 parameters:
   - name: data
     in: body
diff --git a/swagger/paths/public/inboxes/conversations/create.yml b/swagger/paths/public/inboxes/conversations/create.yml
index 2654685f5..5f694ff34 100644
--- a/swagger/paths/public/inboxes/conversations/create.yml
+++ b/swagger/paths/public/inboxes/conversations/create.yml
@@ -3,8 +3,7 @@ tags:
 operationId: create-a-conversation
 summary: Create a conversation
 description: Create a conversation
-security:
-  - nil
+security: []
 responses:
   200:
     description: Success
diff --git a/swagger/paths/public/inboxes/messages/create.yml b/swagger/paths/public/inboxes/messages/create.yml
index 16e44eb0d..902090952 100644
--- a/swagger/paths/public/inboxes/messages/create.yml
+++ b/swagger/paths/public/inboxes/messages/create.yml
@@ -3,8 +3,7 @@ tags:
 operationId: create-a-message
 summary: Create a message
 description: Create a message
-security:
-  - nil
+security: []
 parameters:
   - name: data
     in: body
diff --git a/swagger/paths/public/inboxes/messages/update.yml b/swagger/paths/public/inboxes/messages/update.yml
index 70ffb9d0c..a211f39ca 100644
--- a/swagger/paths/public/inboxes/messages/update.yml
+++ b/swagger/paths/public/inboxes/messages/update.yml
@@ -3,8 +3,7 @@ tags:
 operationId: update-a-message
 summary: Update a message
 description: Update a message
-security:
-  - nil
+security: []
 parameters:
   - name: data
     in: body
diff --git a/swagger/swagger.json b/swagger/swagger.json
index fadd07720..d19f43a7f 100644
--- a/swagger/swagger.json
+++ b/swagger/swagger.json
@@ -14,7 +14,7 @@
     }
   },
   "host": "app.chatwoot.com",
-  "basePath": null,
+  "basePath": "/",
   "schemes": [
     "https"
   ],
@@ -52,7 +52,7 @@
     }
   ],
   "paths": {
-    "platform/api/v1/accounts": {
+    "/platform/api/v1/accounts": {
       "post": {
         "tags": [
           "Accounts"
@@ -90,7 +90,7 @@
         }
       }
     },
-    "platform/api/v1/accounts/{id}": {
+    "/platform/api/v1/accounts/{account_id}": {
       "parameters": [
         {
           "$ref": "#/parameters/account_id"
@@ -188,7 +188,7 @@
         }
       }
     },
-    "platform/api/v1/accounts/{id}/account_users": {
+    "/platform/api/v1/accounts/{account_id}/account_users": {
       "parameters": [
         {
           "$ref": "#/parameters/account_id"
@@ -259,16 +259,18 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "user_id",
+                "role"
+              ],
               "properties": {
                 "user_id": {
                   "type": "integer",
-                  "description": "The ID of the user",
-                  "required": true
+                  "description": "The ID of the user"
                 },
                 "role": {
                   "type": "string",
-                  "description": "whether user is an administrator or agent",
-                  "required": true
+                  "description": "whether user is an administrator or agent"
                 }
               }
             }
@@ -320,11 +322,13 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "user_id"
+              ],
               "properties": {
                 "user_id": {
                   "type": "integer",
-                  "description": "The ID of the user",
-                  "required": true
+                  "description": "The ID of the user"
                 }
               }
             }
@@ -343,7 +347,7 @@
         }
       }
     },
-    "platform/api/v1/agent_bots": {
+    "/platform/api/v1/agent_bots": {
       "get": {
         "tags": [
           "AgentBots"
@@ -411,7 +415,7 @@
         }
       }
     },
-    "platform/api/v1/agent_bots/{id}": {
+    "/platform/api/v1/agent_bots/{id}": {
       "parameters": [
         {
           "$ref": "#/parameters/agent_bot_id"
@@ -509,7 +513,7 @@
         }
       }
     },
-    "platform/api/v1/users": {
+    "/platform/api/v1/users": {
       "post": {
         "tags": [
           "Users"
@@ -547,7 +551,7 @@
         }
       }
     },
-    "platform/api/v1/users/{id}": {
+    "/platform/api/v1/users/{id}": {
       "parameters": [
         {
           "$ref": "#/parameters/platform_user_id"
@@ -645,7 +649,12 @@
         }
       }
     },
-    "platform/api/v1/users/{id}/login": {
+    "/platform/api/v1/users/{id}/login": {
+      "parameters": [
+        {
+          "$ref": "#/parameters/platform_user_id"
+        }
+      ],
       "get": {
         "tags": [
           "Users"
@@ -682,7 +691,7 @@
         }
       }
     },
-    "public/api/v1/inboxes/{inbox_identifier}/contacts": {
+    "/public/api/v1/inboxes/{inbox_identifier}/contacts": {
       "parameters": [
         {
           "$ref": "#/parameters/public_inbox_identifier"
@@ -696,7 +705,7 @@
         "summary": "Create a contact",
         "description": "Create a contact",
         "security": [
-          "nil"
+
         ],
         "parameters": [
           {
@@ -721,7 +730,7 @@
         }
       }
     },
-    "public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}": {
+    "/public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}": {
       "parameters": [
         {
           "$ref": "#/parameters/public_inbox_identifier"
@@ -738,7 +747,7 @@
         "summary": "Get a contact",
         "description": "Get the details of a contact",
         "security": [
-          "nil"
+
         ],
         "responses": {
           "200": {
@@ -763,7 +772,7 @@
         "summary": "Update a contact",
         "description": "Update a contact's attributes",
         "security": [
-          "nil"
+
         ],
         "parameters": [
           {
@@ -788,7 +797,7 @@
         }
       }
     },
-    "public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations": {
+    "/public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations": {
       "parameters": [
         {
           "$ref": "#/parameters/public_inbox_identifier"
@@ -805,7 +814,7 @@
         "summary": "Create a conversation",
         "description": "Create a conversation",
         "security": [
-          "nil"
+
         ],
         "responses": {
           "200": {
@@ -843,7 +852,7 @@
         }
       }
     },
-    "public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations/{conversation_id}/messages": {
+    "/public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations/{conversation_id}/messages": {
       "parameters": [
         {
           "$ref": "#/parameters/public_inbox_identifier"
@@ -863,7 +872,7 @@
         "summary": "Create a message",
         "description": "Create a message",
         "security": [
-          "nil"
+
         ],
         "parameters": [
           {
@@ -911,7 +920,7 @@
         }
       }
     },
-    "public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations/{conversation_id}/messages/{message_id}": {
+    "/public/api/v1/inboxes/{inbox_identifier}/contacts/{contact_identifier}/conversations/{conversation_id}/messages/{message_id}": {
       "parameters": [
         {
           "$ref": "#/parameters/public_inbox_identifier"
@@ -934,7 +943,7 @@
         "summary": "Update a message",
         "description": "Update a message",
         "security": [
-          "nil"
+
         ],
         "parameters": [
           {
@@ -978,11 +987,9 @@
             "schema": {
               "type": "array",
               "description": "Array of agent bots",
-              "items": [
-                {
-                  "$ref": "#/definitions/agent_bot"
-                }
-              ]
+              "items": {
+                "$ref": "#/definitions/agent_bot"
+              }
             }
           },
           "401": {
@@ -1104,6 +1111,11 @@
       }
     },
     "/api/v1/accounts/{account_id}/agents": {
+      "parameters": [
+        {
+          "$ref": "#/parameters/account_id"
+        }
+      ],
       "get": {
         "tags": [
           "Agent"
@@ -1155,16 +1167,19 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "name",
+                "email",
+                "role"
+              ],
               "properties": {
                 "name": {
                   "type": "string",
-                  "description": "Full Name of the agent",
-                  "required": true
+                  "description": "Full Name of the agent"
                 },
                 "email": {
                   "type": "string",
-                  "description": "Email of the Agent",
-                  "required": true
+                  "description": "Email of the Agent"
                 },
                 "role": {
                   "type": "string",
@@ -1172,8 +1187,7 @@
                     "agent",
                     "administrator"
                   ],
-                  "description": "Whether its administrator or agent",
-                  "required": true
+                  "description": "Whether its administrator or agent"
                 },
                 "availability_status": {
                   "type": "string",
@@ -1206,6 +1220,11 @@
       }
     },
     "/api/v1/accounts/{account_id}/agents/{id}": {
+      "parameters": [
+        {
+          "$ref": "#/parameters/account_id"
+        }
+      ],
       "patch": {
         "tags": [
           "Agent"
@@ -1224,9 +1243,7 @@
           {
             "in": "path",
             "name": "id",
-            "schema": {
-              "type": "integer"
-            },
+            "type": "integer",
             "required": true,
             "description": "The ID of the agent to be updated."
           },
@@ -1236,6 +1253,9 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "role"
+              ],
               "properties": {
                 "role": {
                   "type": "string",
@@ -1243,8 +1263,7 @@
                     "agent",
                     "administrator"
                   ],
-                  "description": "Whether its administrator or agent",
-                  "required": true
+                  "description": "Whether its administrator or agent"
                 },
                 "availability": {
                   "type": "string",
@@ -1296,9 +1315,7 @@
           {
             "in": "path",
             "name": "id",
-            "schema": {
-              "type": "integer"
-            },
+            "type": "integer",
             "required": true,
             "description": "The ID of the agent to be deleted"
           }
@@ -1387,6 +1404,18 @@
       }
     },
     "/api/v1/accounts/{account_id}/contacts/{id}": {
+      "parameters": [
+        {
+          "$ref": "#/parameters/account_id"
+        },
+        {
+          "name": "id",
+          "in": "path",
+          "type": "number",
+          "description": "ID of the contact",
+          "required": true
+        }
+      ],
       "get": {
         "tags": [
           "Contact"
@@ -1394,18 +1423,6 @@
         "operationId": "contactDetails",
         "summary": "Show Contact",
         "description": "Get a contact belonging to the account using ID",
-        "parameters": [
-          {
-            "$ref": "#/parameters/account_id"
-          },
-          {
-            "name": "id",
-            "in": "path",
-            "type": "number",
-            "description": "ID of the contact",
-            "required": true
-          }
-        ],
         "responses": {
           "200": {
             "description": "Success",
@@ -1429,16 +1446,6 @@
         "summary": "Update Contact",
         "description": "Update a contact belonging to the account using ID",
         "parameters": [
-          {
-            "$ref": "#/parameters/account_id"
-          },
-          {
-            "name": "id",
-            "in": "path",
-            "type": "number",
-            "description": "ID of the contact",
-            "required": true
-          },
           {
             "name": "data",
             "in": "body",
@@ -1469,15 +1476,6 @@
         ],
         "operationId": "contactDelete",
         "summary": "Delete Contact",
-        "parameters": [
-          {
-            "name": "id",
-            "in": "path",
-            "type": "number",
-            "description": "ID of the contact",
-            "required": true
-          }
-        ],
         "responses": {
           "200": {
             "description": "Success"
@@ -1598,14 +1596,17 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "inbox_id"
+              ],
               "properties": {
                 "inbox_id": {
                   "type": "number",
-                  "description": "The ID of the inbox",
-                  "required": true
+                  "description": "The ID of the inbox"
                 },
                 "source_id": {
-                  "$ref": "#/parameters/source_id"
+                  "type": "string",
+                  "description": "Contact Inbox Source Id"
                 }
               }
             }
@@ -1670,19 +1671,19 @@
       }
     },
     "/api/v1/accounts/{account_id}/conversations": {
+      "parameters": [
+        {
+          "$ref": "#/parameters/account_id"
+        }
+      ],
       "get": {
         "tags": [
           "Conversation"
         ],
-        "operationId": "conversationSearch",
-        "description": "Search for conversations containing a messages with the query string",
-        "summary": "Conversations Search",
+        "operationId": "conversationList",
+        "description": "List all the conversations with pagination",
+        "summary": "Conversations List",
         "parameters": [
-          {
-            "name": "q",
-            "in": "query",
-            "type": "string"
-          },
           {
             "name": "assignee_type",
             "in": "query",
@@ -1692,7 +1693,8 @@
               "unassigned",
               "all",
               "assigned"
-            ]
+            ],
+            "required": true
           },
           {
             "name": "status",
@@ -1701,14 +1703,15 @@
             "enum": [
               "open",
               "resolved",
-              "pending",
-              "all"
-            ]
+              "pending"
+            ],
+            "required": true
           },
           {
             "name": "page",
             "in": "query",
-            "type": "integer"
+            "type": "integer",
+            "required": true
           },
           {
             "name": "inbox_id",
@@ -1722,9 +1725,6 @@
             "items": {
               "type": "string"
             }
-          },
-          {
-            "$ref": "#/parameters/account_id"
           }
         ],
         "responses": {
@@ -1739,8 +1739,7 @@
             "schema": {
               "$ref": "#/definitions/bad_request_error"
             }
-          },
-          "description": "Access denied"
+          }
         }
       },
       "post": {
@@ -1763,9 +1762,6 @@
           }
         ],
         "parameters": [
-          {
-            "$ref": "#/parameters/account_id"
-          },
           {
             "name": "data",
             "in": "body",
@@ -1774,7 +1770,8 @@
               "type": "object",
               "properties": {
                 "source_id": {
-                  "$ref": "#/parameters/source_id"
+                  "type": "string",
+                  "description": "Conversation source id"
                 },
                 "inbox_id": {
                   "type": "string",
@@ -1836,79 +1833,12 @@
         }
       }
     },
-    "/api/v1/accounts/{account_id}/conversations/": {
-      "get": {
-        "tags": [
-          "Conversation"
-        ],
-        "operationId": "conversationList",
-        "description": "List all the conversations with pagination",
-        "summary": "Conversations List",
-        "parameters": [
-          {
-            "$ref": "#/parameters/account_id"
-          },
-          {
-            "name": "assignee_type",
-            "in": "query",
-            "type": "string",
-            "enum": [
-              "me",
-              "unassigned",
-              "all",
-              "assigned"
-            ],
-            "required": true
-          },
-          {
-            "name": "status",
-            "in": "query",
-            "type": "string",
-            "enum": [
-              "open",
-              "resolved",
-              "pending"
-            ],
-            "required": true
-          },
-          {
-            "name": "page",
-            "in": "query",
-            "type": "integer",
-            "required": true
-          },
-          {
-            "name": "inbox_id",
-            "in": "query",
-            "type": "integer"
-          },
-          {
-            "name": "labels",
-            "in": "query",
-            "type": "array",
-            "items": {
-              "type": "string"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "Success",
-            "schema": {
-              "$ref": "#/definitions/conversation_list"
-            }
-          },
-          "400": {
-            "description": "Bad Request Error",
-            "schema": {
-              "$ref": "#/definitions/bad_request_error"
-            }
-          },
-          "description": "Access denied"
-        }
-      }
-    },
     "/api/v1/accounts/{account_id}/conversations/filter": {
+      "parameters": [
+        {
+          "$ref": "#/parameters/account_id"
+        }
+      ],
       "post": {
         "tags": [
           "Conversation"
@@ -1953,6 +1883,9 @@
                   },
                   "values": {
                     "type": "array",
+                    "items": {
+                      "type": "string"
+                    },
                     "description": "array of the attribute values to filter"
                   },
                   "query_operator": {
@@ -1962,9 +1895,6 @@
                 }
               }
             }
-          },
-          {
-            "$ref": "#/parameters/account_id"
           }
         ],
         "responses": {
@@ -1979,12 +1909,11 @@
             "schema": {
               "$ref": "#/definitions/bad_request_error"
             }
-          },
-          "description": "Access denied"
+          }
         }
       }
     },
-    "/api/v1/accounts/{account_id}/conversations/{converstion_id}": {
+    "/api/v1/accounts/{account_id}/conversations/{conversation_id}": {
       "parameters": [
         {
           "$ref": "#/parameters/account_id"
@@ -2051,6 +1980,9 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "status"
+              ],
               "properties": {
                 "status": {
                   "type": "string",
@@ -2059,7 +1991,6 @@
                     "resolved",
                     "pending"
                   ],
-                  "required": true,
                   "description": "The status of the conversation"
                 }
               }
@@ -2183,7 +2114,7 @@
                 "labels": {
                   "type": "array",
                   "description": "Array of labels (comma-separated strings)",
-                  "properties": {
+                  "items": {
                     "type": "string"
                   }
                 }
@@ -2300,7 +2231,8 @@
                   "description": "The name of the inbox"
                 },
                 "avatar": {
-                  "type": "file",
+                  "type": "string",
+                  "format": "binary",
                   "description": "File for avatar image"
                 },
                 "channel": {
@@ -2379,6 +2311,9 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "enable_auto_assignment"
+              ],
               "properties": {
                 "name": {
                   "type": "string",
@@ -2386,12 +2321,11 @@
                 },
                 "enable_auto_assignment": {
                   "type": "boolean",
-                  "required": true,
                   "description": "Enable Auto Assignment"
                 },
                 "avatar": {
-                  "type": "file",
-                  "required": false,
+                  "type": "string",
+                  "format": "binary",
                   "description": "Image file for avatar"
                 },
                 "channel": {
@@ -2500,10 +2434,12 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "agent_bot"
+              ],
               "properties": {
                 "agent_bot": {
                   "type": "number",
-                  "required": true,
                   "description": "Agent bot ID"
                 }
               }
@@ -2523,7 +2459,15 @@
         }
       }
     },
-    "/api/v1/accounts/{account_id}/inbox_members": {
+    "/api/v1/accounts/{account_id}/inbox_members/{inbox_id}": {
+      "parameters": [
+        {
+          "$ref": "#/parameters/account_id"
+        },
+        {
+          "$ref": "#/parameters/inbox_id"
+        }
+      ],
       "get": {
         "tags": [
           "Inbox"
@@ -2583,16 +2527,21 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "inbox_id",
+                "user_ids"
+              ],
               "properties": {
                 "inbox_id": {
                   "type": "string",
-                  "description": "The ID of the inbox",
-                  "required": true
+                  "description": "The ID of the inbox"
                 },
                 "user_ids": {
                   "type": "array",
-                  "description": "IDs of users to be added to the inbox",
-                  "required": true
+                  "items": {
+                    "type": "integer"
+                  },
+                  "description": "IDs of users to be added to the inbox"
                 }
               }
             }
@@ -2626,7 +2575,7 @@
         ],
         "operationId": "update-agents-in-inbox",
         "summary": "Update Agents in Inbox",
-        "description": "All agents execept the one passed in params will be removed",
+        "description": "All agents except the one passed in params will be removed",
         "security": [
           {
             "userApiKey": [
@@ -2641,16 +2590,21 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "inbox_id",
+                "user_ids"
+              ],
               "properties": {
                 "inbox_id": {
                   "type": "string",
-                  "description": "The ID of the inbox",
-                  "required": true
+                  "description": "The ID of the inbox"
                 },
                 "user_ids": {
                   "type": "array",
-                  "description": "IDs of users to be added to the inbox",
-                  "required": true
+                  "items": {
+                    "type": "integer"
+                  },
+                  "description": "IDs of users to be added to the inbox"
                 }
               }
             }
@@ -2699,16 +2653,21 @@
             "required": true,
             "schema": {
               "type": "object",
+              "required": [
+                "inbox_id",
+                "user_ids"
+              ],
               "properties": {
                 "inbox_id": {
                   "type": "string",
-                  "description": "The ID of the inbox",
-                  "required": true
+                  "description": "The ID of the inbox"
                 },
                 "user_ids": {
                   "type": "array",
-                  "description": "IDs of users to be deleted from the inbox",
-                  "required": true
+                  "items": {
+                    "type": "integer"
+                  },
+                  "description": "IDs of users to be deleted from the inbox"
                 }
               }
             }
@@ -2730,92 +2689,7 @@
         }
       }
     },
-    "/api/v1/accounts/{account_id}/conversations/{id}/messages": {
-      "post": {
-        "tags": [
-          "Messages"
-        ],
-        "operationId": "conversationNewMessageAttachment",
-        "summary": "Create New Message Attachment",
-        "description": "Create an attachment message. Refer to this discussion if you have any further doubts. https://github.com/chatwoot/chatwoot/discussions/1809#discussioncomment-1211845",
-        "consumes": [
-          "multipart/form-data"
-        ],
-        "security": [
-          {
-            "userApiKey": [
-
-            ]
-          },
-          {
-            "agentBotApiKey": [
-
-            ]
-          }
-        ],
-        "parameters": [
-          {
-            "$ref": "#/parameters/account_id"
-          },
-          {
-            "$ref": "#/parameters/conversation_id"
-          },
-          {
-            "in": "formData",
-            "name": "content",
-            "type": "string",
-            "description": "The content of the message",
-            "required": true
-          },
-          {
-            "in": "formData",
-            "name": "message_type",
-            "type": "string",
-            "enum": [
-              "outgoing",
-              "incoming"
-            ]
-          },
-          {
-            "in": "formData",
-            "name": "private",
-            "type": "boolean",
-            "description": "Flag to identify if it is a private note"
-          },
-          {
-            "in": "formData",
-            "name": "attachments[]",
-            "type": "array",
-            "description": "The files to be uploaded.",
-            "items": {
-              "type": "file"
-            }
-          }
-        ],
-        "responses": {
-          "200": {
-            "description": "Success",
-            "schema": {
-              "allOf": [
-                {
-                  "$ref": "#/definitions/generic_id"
-                },
-                {
-                  "$ref": "#/definitions/message"
-                }
-              ]
-            }
-          },
-          "404": {
-            "description": "Conversation not found"
-          },
-          "403": {
-            "description": "Access denied"
-          }
-        }
-      }
-    },
-    "/api/v1/accounts/{account_id}/conversations/{converstion_id}/messages": {
+    "/api/v1/accounts/{account_id}/conversations/{conversation_id}/messages": {
       "parameters": [
         {
           "$ref": "#/parameters/account_id"
@@ -2833,17 +2707,20 @@
         "description": "List all messages of a conversation",
         "responses": {
           "200": {
-            "description": "Array of messages",
-            "type": "array",
+            "description": "Success",
             "schema": {
-              "allOf": [
-                {
-                  "$ref": "#/definitions/generic_id"
-                },
-                {
-                  "$ref": "#/definitions/message"
-                }
-              ]
+              "type": "array",
+              "description": "Array of messages",
+              "items": {
+                "allOf": [
+                  {
+                    "$ref": "#/definitions/generic_id"
+                  },
+                  {
+                    "$ref": "#/definitions/message"
+                  }
+                ]
+              }
             }
           },
           "404": {
@@ -3003,7 +2880,9 @@
             "description": "Unauthorized"
           }
         }
-      },
+      }
+    },
+    "/api/v1/accounts/{account_id}/integrations/hooks/{hook_id}": {
       "patch": {
         "tags": [
           "Integrations"
@@ -3238,14 +3117,12 @@
         {
           "in": "query",
           "name": "filter_type",
-          "schema": {
-            "type": "string",
-            "enum": [
-              "conversation",
-              "contact",
-              "report"
-            ]
-          },
+          "type": "string",
+          "enum": [
+            "conversation",
+            "contact",
+            "report"
+          ],
           "required": false,
           "description": "The type of custom filter"
         }
@@ -3386,7 +3263,7 @@
         }
       }
     },
-    "/api/v2/accounts/{id}/reports": {
+    "/api/v2/accounts/{account_id}/reports": {
       "parameters": [
         {
           "$ref": "#/parameters/account_id"
@@ -3400,25 +3277,19 @@
         {
           "in": "query",
           "name": "id",
-          "schema": {
-            "type": "string"
-          },
+          "type": "string",
           "description": "The Id of specific object in case of agent/inbox/label"
         },
         {
           "in": "query",
           "name": "since",
-          "schema": {
-            "type": "string"
-          },
+          "type": "string",
           "description": "The timestamp from where report should start."
         },
         {
           "in": "query",
           "name": "until",
-          "schema": {
-            "type": "string"
-          },
+          "type": "string",
           "description": "The timestamp from where report should stop."
         }
       ],
@@ -3449,7 +3320,7 @@
         }
       }
     },
-    "/api/v2/accounts/{id}/reports/summary": {
+    "/api/v2/accounts/{account_id}/reports/summary": {
       "parameters": [
         {
           "$ref": "#/parameters/account_id"
@@ -3460,25 +3331,19 @@
         {
           "in": "query",
           "name": "id",
-          "schema": {
-            "type": "string"
-          },
+          "type": "string",
           "description": "The Id of specific object in case of agent/inbox/label"
         },
         {
           "in": "query",
           "name": "since",
-          "schema": {
-            "type": "string"
-          },
+          "type": "string",
           "description": "The timestamp from where report should start."
         },
         {
           "in": "query",
           "name": "until",
-          "schema": {
-            "type": "string"
-          },
+          "type": "string",
           "description": "The timestamp from where report should stop."
         }
       ],
@@ -3587,7 +3452,10 @@
           "description": "ID of the conversation"
         },
         "messages": {
-          "type": "array"
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/message"
+          }
         },
         "account_id": {
           "type": "number",
@@ -3614,7 +3482,7 @@
           "type": "string"
         },
         "agent_last_seen_at": {
-          "type": "agent_last_seen_at"
+          "type": "string"
         },
         "unread_count": {
           "type": "number",
@@ -3909,11 +3777,13 @@
           "description": "A query that needs to be saved as a custom filter"
         },
         "created_at": {
-          "type": "datetime",
+          "type": "string",
+          "format": "date-time",
           "description": "The time at which the custom filter was created"
         },
         "updated_at": {
-          "type": "datetime",
+          "type": "string",
+          "format": "date-time",
           "description": "The time at which the custom filter was updated"
         }
       }
@@ -4010,6 +3880,9 @@
         },
         "hooks": {
           "type": "array",
+          "items": {
+            "type": "object"
+          },
           "description": "If there are any hooks created for this integration"
         }
       }
@@ -4085,6 +3958,9 @@
         },
         "messages": {
           "type": "array",
+          "items": {
+            "$ref": "#/definitions/message"
+          },
           "description": "Messages in the conversation"
         },
         "contact": {
@@ -4126,6 +4002,9 @@
         },
         "attachments": {
           "type": "array",
+          "items": {
+            "type": "object"
+          },
           "description": "Attachments if any"
         },
         "sender": {
@@ -4183,10 +4062,12 @@
     },
     "contact_create": {
       "type": "object",
+      "required": [
+        "inbox_id"
+      ],
       "properties": {
         "inbox_id": {
-          "type": "number",
-          "required": true
+          "type": "number"
         },
         "name": {
           "type": "string",
@@ -4237,11 +4118,13 @@
     },
     "conversation_message_create": {
       "type": "object",
+      "required": [
+        "content"
+      ],
       "properties": {
         "content": {
           "type": "string",
-          "description": "The content of the message",
-          "required": true
+          "description": "The content of the message"
         },
         "message_type": {
           "type": "string",
@@ -4689,165 +4572,138 @@
     "account_id": {
       "in": "path",
       "name": "account_id",
-      "schema": {
-        "type": "integer"
-      },
+      "type": "integer",
       "required": true,
       "description": "The numeric ID of the account"
     },
     "agent_bot_id": {
       "in": "path",
       "name": "id",
-      "schema": {
-        "type": "integer"
-      },
+      "type": "integer",
       "required": true,
       "description": "The ID of the agentbot to be updated"
     },
     "team_id": {
       "in": "path",
       "name": "id",
-      "schema": {
-        "type": "integer"
-      },
+      "type": "integer",
       "required": true,
       "description": "The ID of the team to be updated"
     },
     "inbox_id": {
       "in": "path",
       "name": "inbox_id",
-      "schema": {
-        "type": "integer"
-      },
+      "type": "integer",
       "required": true,
       "description": "The ID of the Inbox"
     },
     "hook_id": {
       "in": "path",
       "name": "hook_id",
-      "schema": {
-        "type": "integer"
-      },
+      "type": "integer",
       "required": true,
       "description": "The numeric ID of the integration hook"
     },
     "source_id": {
+      "in": "path",
+      "name": "source_id",
+      "required": true,
       "type": "string",
       "description": "Id of the session for which the conversation is created.\n\n\n\n Source Ids can be obtained through contactable inboxes API or via generated.<br/><br/>Website: Chatwoot generated string which can be obtained from webhook events. <br/> Phone Channels(Twilio): Phone number in e164 format <br/> Email Channels: Contact Email address <br/> API Channel: Any Random String"
     },
     "conversation_id": {
       "in": "path",
       "name": "conversation_id",
-      "schema": {
-        "type": "integer"
-      },
+      "type": "integer",
       "required": true,
       "description": "The numeric ID of the conversation"
     },
     "message_id": {
       "in": "path",
       "name": "message_id",
-      "schema": {
-        "type": "integer"
-      },
+      "type": "integer",
       "required": true,
       "description": "The numeric ID of the message"
     },
     "contact_sort_param": {
       "in": "query",
       "name": "sort",
-      "schema": {
-        "type": "string",
-        "enum": [
-          "name",
-          "email",
-          "phone_number",
-          "last_activity_at",
-          "-name",
-          "-email",
-          "-phone_number",
-          "-last_activity_at"
-        ]
-      },
+      "type": "string",
+      "enum": [
+        "name",
+        "email",
+        "phone_number",
+        "last_activity_at",
+        "-name",
+        "-email",
+        "-phone_number",
+        "-last_activity_at"
+      ],
       "required": false,
       "description": "The attribute by which list should be sorted"
     },
     "page": {
       "in": "query",
       "name": "page",
-      "schema": {
-        "type": "integer",
-        "default": 1
-      },
+      "type": "integer",
+      "default": 1,
       "required": false,
       "description": "The page parameter"
     },
     "platform_user_id": {
       "in": "path",
       "name": "id",
-      "schema": {
-        "type": "integer"
-      },
+      "type": "integer",
       "required": true,
       "description": "The numeric ID of the user on the platform"
     },
     "custom_filter_id": {
       "in": "path",
       "name": "custom_filter_id",
-      "schema": {
-        "type": "integer"
-      },
+      "type": "integer",
       "required": true,
       "description": "The numeric ID of the custom filter"
     },
     "report_type": {
       "in": "query",
       "name": "report_type",
-      "schema": {
-        "type": "string",
-        "enum": [
-          "account",
-          "agent",
-          "inbox",
-          "label",
-          "team"
-        ]
-      },
+      "type": "string",
+      "enum": [
+        "account",
+        "agent",
+        "inbox",
+        "label",
+        "team"
+      ],
       "required": true,
       "description": "Type of report"
     },
     "report_metric": {
       "in": "query",
       "name": "metric",
-      "schema": {
-        "type": "string",
-        "enum": [
-          "conversations_count",
-          "incoming_messages_count",
-          "outgoing_messages_count",
-          "avg_first_response_time",
-          "avg_resolution_time",
-          "resolutions_count"
-        ]
-      },
+      "type": "string",
+      "enum": [
+        "conversations_count",
+        "incoming_messages_count",
+        "outgoing_messages_count",
+        "avg_first_response_time",
+        "avg_resolution_time",
+        "resolutions_count"
+      ],
       "required": true,
       "description": "The type of metric"
     },
     "public_inbox_identifier": {
       "in": "path",
       "name": "inbox_identifier",
-      "schema": {
-        "type": "string"
-      },
+      "type": "string",
       "required": true,
       "description": "The identifier obtained from API inbox channel"
     },
     "public_contact_identifier": {
       "in": "path",
       "name": "contact_identifier",
-      "schema": {
-        "type": "string"
-      },
+      "type": "string",
       "required": true,
       "description": "The source id of contact obtained on contact create"
     }

From 4eeaadbd5bcd68c904e95f125194c905f12989d0 Mon Sep 17 00:00:00 2001
From: Vinayak <58037628+vinayak-gaikwad@users.noreply.github.com>
Date: Wed, 17 Nov 2021 22:11:27 +0530
Subject: [PATCH 05/69] chore: Added SMTP_TLS and SMTP_SSL in .env.example

Added SMTP_TLS and SMTP_SSL in .env.example

Fixes #3396
---
 .env.example | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.env.example b/.env.example
index ef74a7c0f..36ca66be1 100644
--- a/.env.example
+++ b/.env.example
@@ -57,6 +57,9 @@ SMTP_AUTHENTICATION=
 SMTP_ENABLE_STARTTLS_AUTO=true
 # Can be: 'none', 'peer', 'client_once', 'fail_if_no_peer_cert', see http://api.rubyonrails.org/classes/ActionMailer/Base.html
 SMTP_OPENSSL_VERIFY_MODE=peer
+# Comment out the following environment variables if required by your SMTP server
+# SMTP_TLS=
+# SMTP_SSL=
 
 # Mail Incoming
 # This is the domain set for the reply emails when conversation continuity is enabled

From b81a9f201048cd470c9fe0fb7fb845238985c1da Mon Sep 17 00:00:00 2001
From: Akhil G Krishnan <akhilgkrishnan4u@gmail.com>
Date: Thu, 18 Nov 2021 10:32:29 +0530
Subject: [PATCH 06/69] Chore: Replaced dependent destroy with dependent
 destroy_async in all models (#3249)

---
 app/models/account.rb                     | 66 +++++++++++------------
 app/models/agent_bot.rb                   |  4 +-
 app/models/concerns/access_tokenable.rb   |  2 +-
 app/models/concerns/channelable.rb        |  2 +-
 app/models/concerns/out_of_offisable.rb   |  2 +-
 app/models/concerns/reportable.rb         |  2 +-
 app/models/contact.rb                     | 10 ++--
 app/models/contact_inbox.rb               |  2 +-
 app/models/conversation.rb                |  4 +-
 app/models/inbox.rb                       | 14 ++---
 app/models/kbase/category.rb              |  2 +-
 app/models/kbase/portal.rb                |  4 +-
 app/models/message.rb                     |  4 +-
 app/models/platform_app.rb                |  2 +-
 app/models/platform_app_permissible.rb    |  2 +-
 app/models/team.rb                        |  2 +-
 app/models/telegram_bot.rb                |  2 +-
 app/models/user.rb                        | 14 ++---
 spec/models/account_spec.rb               | 24 ++++-----
 spec/models/channel/facebook_page_spec.rb |  2 +-
 spec/models/contact_spec.rb               |  2 +-
 spec/models/inbox_spec.rb                 |  8 +--
 spec/models/user_spec.rb                  |  4 +-
 23 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/app/models/account.rb b/app/models/account.rb
index 8ce2a4beb..d16194e40 100644
--- a/app/models/account.rb
+++ b/app/models/account.rb
@@ -32,40 +32,40 @@ class Account < ApplicationRecord
   validates :name, presence: true
   validates :auto_resolve_duration, numericality: { greater_than_or_equal_to: 1, allow_nil: true }
 
-  has_many :account_users, dependent: :destroy
-  has_many :agent_bot_inboxes, dependent: :destroy
-  has_many :agent_bots, dependent: :destroy
-  has_many :csat_survey_responses, dependent: :destroy
-  has_many :data_imports, dependent: :destroy
+  has_many :account_users, dependent: :destroy_async
+  has_many :agent_bot_inboxes, dependent: :destroy_async
+  has_many :agent_bots, dependent: :destroy_async
+  has_many :csat_survey_responses, dependent: :destroy_async
+  has_many :data_imports, dependent: :destroy_async
   has_many :users, through: :account_users
-  has_many :inboxes, dependent: :destroy
-  has_many :notes, dependent: :destroy
-  has_many :campaigns, dependent: :destroy
-  has_many :conversations, dependent: :destroy
-  has_many :messages, dependent: :destroy
-  has_many :contacts, dependent: :destroy
-  has_many :facebook_pages, dependent: :destroy, class_name: '::Channel::FacebookPage'
-  has_many :telegram_bots, dependent: :destroy
-  has_many :twilio_sms, dependent: :destroy, class_name: '::Channel::TwilioSms'
-  has_many :twitter_profiles, dependent: :destroy, class_name: '::Channel::TwitterProfile'
-  has_many :web_widgets, dependent: :destroy, class_name: '::Channel::WebWidget'
-  has_many :email_channels, dependent: :destroy, class_name: '::Channel::Email'
-  has_many :api_channels, dependent: :destroy, class_name: '::Channel::Api'
-  has_many :line_channels, dependent: :destroy, class_name: '::Channel::Line'
-  has_many :telegram_channels, dependent: :destroy, class_name: '::Channel::Telegram'
-  has_many :whatsapp_channels, dependent: :destroy, class_name: '::Channel::Whatsapp'
-  has_many :canned_responses, dependent: :destroy
-  has_many :webhooks, dependent: :destroy
-  has_many :labels, dependent: :destroy
-  has_many :notification_settings, dependent: :destroy
-  has_many :hooks, dependent: :destroy, class_name: 'Integrations::Hook'
-  has_many :working_hours, dependent: :destroy
-  has_many :kbase_portals, dependent: :destroy, class_name: '::Kbase::Portal'
-  has_many :kbase_categories, dependent: :destroy, class_name: '::Kbase::Category'
-  has_many :kbase_articles, dependent: :destroy, class_name: '::Kbase::Article'
-  has_many :teams, dependent: :destroy
-  has_many :custom_filters, dependent: :destroy
-  has_many :custom_attribute_definitions, dependent: :destroy
+  has_many :inboxes, dependent: :destroy_async
+  has_many :notes, dependent: :destroy_async
+  has_many :campaigns, dependent: :destroy_async
+  has_many :conversations, dependent: :destroy_async
+  has_many :messages, dependent: :destroy_async
+  has_many :contacts, dependent: :destroy_async
+  has_many :facebook_pages, dependent: :destroy_async, class_name: '::Channel::FacebookPage'
+  has_many :telegram_bots, dependent: :destroy_async
+  has_many :twilio_sms, dependent: :destroy_async, class_name: '::Channel::TwilioSms'
+  has_many :twitter_profiles, dependent: :destroy_async, class_name: '::Channel::TwitterProfile'
+  has_many :web_widgets, dependent: :destroy_async, class_name: '::Channel::WebWidget'
+  has_many :email_channels, dependent: :destroy_async, class_name: '::Channel::Email'
+  has_many :api_channels, dependent: :destroy_async, class_name: '::Channel::Api'
+  has_many :line_channels, dependent: :destroy_async, class_name: '::Channel::Line'
+  has_many :telegram_channels, dependent: :destroy_async, class_name: '::Channel::Telegram'
+  has_many :whatsapp_channels, dependent: :destroy_async, class_name: '::Channel::Whatsapp'
+  has_many :canned_responses, dependent: :destroy_async
+  has_many :webhooks, dependent: :destroy_async
+  has_many :labels, dependent: :destroy_async
+  has_many :notification_settings, dependent: :destroy_async
+  has_many :hooks, dependent: :destroy_async, class_name: 'Integrations::Hook'
+  has_many :working_hours, dependent: :destroy_async
+  has_many :kbase_portals, dependent: :destroy_async, class_name: '::Kbase::Portal'
+  has_many :kbase_categories, dependent: :destroy_async, class_name: '::Kbase::Category'
+  has_many :kbase_articles, dependent: :destroy_async, class_name: '::Kbase::Article'
+  has_many :teams, dependent: :destroy_async
+  has_many :custom_filters, dependent: :destroy_async
+  has_many :custom_attribute_definitions, dependent: :destroy_async
 
   has_flags ACCOUNT_SETTINGS_FLAGS.merge(column: 'settings_flags').merge(DEFAULT_QUERY_SETTING)
 
diff --git a/app/models/agent_bot.rb b/app/models/agent_bot.rb
index 75f051f8e..beff22a22 100644
--- a/app/models/agent_bot.rb
+++ b/app/models/agent_bot.rb
@@ -23,10 +23,10 @@ class AgentBot < ApplicationRecord
   include AccessTokenable
   include Avatarable
 
-  has_many :agent_bot_inboxes, dependent: :destroy
+  has_many :agent_bot_inboxes, dependent: :destroy_async
   has_many :inboxes, through: :agent_bot_inboxes
   has_many :messages, as: :sender, dependent: :restrict_with_exception
-  belongs_to :account, dependent: :destroy, optional: true
+  belongs_to :account, dependent: :destroy_async, optional: true
 
   def available_name
     name
diff --git a/app/models/concerns/access_tokenable.rb b/app/models/concerns/access_tokenable.rb
index ae9aad2e5..0bb8daa4f 100644
--- a/app/models/concerns/access_tokenable.rb
+++ b/app/models/concerns/access_tokenable.rb
@@ -1,7 +1,7 @@
 module AccessTokenable
   extend ActiveSupport::Concern
   included do
-    has_one :access_token, as: :owner, dependent: :destroy
+    has_one :access_token, as: :owner, dependent: :destroy_async
     after_create :create_access_token
   end
 
diff --git a/app/models/concerns/channelable.rb b/app/models/concerns/channelable.rb
index 76b18fc81..e60066d5f 100644
--- a/app/models/concerns/channelable.rb
+++ b/app/models/concerns/channelable.rb
@@ -3,7 +3,7 @@ module Channelable
   included do
     validates :account_id, presence: true
     belongs_to :account
-    has_one :inbox, as: :channel, dependent: :destroy
+    has_one :inbox, as: :channel, dependent: :destroy_async
   end
 
   def has_24_hour_messaging_window?
diff --git a/app/models/concerns/out_of_offisable.rb b/app/models/concerns/out_of_offisable.rb
index 53b466cdf..e22dd668c 100644
--- a/app/models/concerns/out_of_offisable.rb
+++ b/app/models/concerns/out_of_offisable.rb
@@ -6,7 +6,7 @@ module OutOfOffisable
   OFFISABLE_ATTRS = %w[day_of_week closed_all_day open_hour open_minutes close_hour close_minutes].freeze
 
   included do
-    has_many :working_hours, dependent: :destroy
+    has_many :working_hours, dependent: :destroy_async
     after_create :create_default_working_hours
   end
 
diff --git a/app/models/concerns/reportable.rb b/app/models/concerns/reportable.rb
index 3f230650f..9da1e93dc 100644
--- a/app/models/concerns/reportable.rb
+++ b/app/models/concerns/reportable.rb
@@ -4,6 +4,6 @@ module Reportable
   extend ActiveSupport::Concern
 
   included do
-    has_many :events, dependent: :destroy
+    has_many :events, dependent: :destroy_async
   end
 end
diff --git a/app/models/contact.rb b/app/models/contact.rb
index ec0b27d70..9ba3a4178 100644
--- a/app/models/contact.rb
+++ b/app/models/contact.rb
@@ -38,12 +38,12 @@ class Contact < ApplicationRecord
             format: { with: /\+[1-9]\d{1,14}\z/, message: 'should be in e164 format' }
 
   belongs_to :account
-  has_many :conversations, dependent: :destroy
-  has_many :contact_inboxes, dependent: :destroy
-  has_many :csat_survey_responses, dependent: :destroy
+  has_many :conversations, dependent: :destroy_async
+  has_many :contact_inboxes, dependent: :destroy_async
+  has_many :csat_survey_responses, dependent: :destroy_async
   has_many :inboxes, through: :contact_inboxes
-  has_many :messages, as: :sender, dependent: :destroy
-  has_many :notes, dependent: :destroy
+  has_many :messages, as: :sender, dependent: :destroy_async
+  has_many :notes, dependent: :destroy_async
 
   before_validation :prepare_email_attribute
   after_create_commit :dispatch_create_event, :ip_lookup
diff --git a/app/models/contact_inbox.rb b/app/models/contact_inbox.rb
index 6f36b8735..e87d30382 100644
--- a/app/models/contact_inbox.rb
+++ b/app/models/contact_inbox.rb
@@ -32,7 +32,7 @@ class ContactInbox < ApplicationRecord
   belongs_to :contact
   belongs_to :inbox
 
-  has_many :conversations, dependent: :destroy
+  has_many :conversations, dependent: :destroy_async
 
   def webhook_data
     {
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index a7a5b5b6d..c5cd30629 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -66,8 +66,8 @@ class Conversation < ApplicationRecord
   belongs_to :team, optional: true
   belongs_to :campaign, optional: true
 
-  has_many :messages, dependent: :destroy, autosave: true
-  has_one :csat_survey_response, dependent: :destroy
+  has_many :messages, dependent: :destroy_async, autosave: true
+  has_one :csat_survey_response, dependent: :destroy_async
   has_many :notifications, as: :primary_actor, dependent: :destroy
 
   before_save :ensure_snooze_until_reset
diff --git a/app/models/inbox.rb b/app/models/inbox.rb
index dbd64f820..ba85c9e64 100644
--- a/app/models/inbox.rb
+++ b/app/models/inbox.rb
@@ -39,19 +39,19 @@ class Inbox < ApplicationRecord
 
   belongs_to :channel, polymorphic: true, dependent: :destroy
 
-  has_many :campaigns, dependent: :destroy
-  has_many :contact_inboxes, dependent: :destroy
+  has_many :campaigns, dependent: :destroy_async
+  has_many :contact_inboxes, dependent: :destroy_async
   has_many :contacts, through: :contact_inboxes
 
-  has_many :inbox_members, dependent: :destroy
+  has_many :inbox_members, dependent: :destroy_async
   has_many :members, through: :inbox_members, source: :user
-  has_many :conversations, dependent: :destroy
+  has_many :conversations, dependent: :destroy_async
   has_many :messages, through: :conversations
 
-  has_one :agent_bot_inbox, dependent: :destroy
+  has_one :agent_bot_inbox, dependent: :destroy_async
   has_one :agent_bot, through: :agent_bot_inbox
-  has_many :webhooks, dependent: :destroy
-  has_many :hooks, dependent: :destroy, class_name: 'Integrations::Hook'
+  has_many :webhooks, dependent: :destroy_async
+  has_many :hooks, dependent: :destroy_async, class_name: 'Integrations::Hook'
 
   after_destroy :delete_round_robin_agents
 
diff --git a/app/models/kbase/category.rb b/app/models/kbase/category.rb
index a32331598..024efae8e 100644
--- a/app/models/kbase/category.rb
+++ b/app/models/kbase/category.rb
@@ -14,7 +14,7 @@
 class Kbase::Category < ApplicationRecord
   belongs_to :account
   belongs_to :portal
-  has_many :folders, dependent: :destroy
+  has_many :folders, dependent: :destroy_async
   has_many :articles, dependent: :nullify
 
   before_validation :ensure_account_id
diff --git a/app/models/kbase/portal.rb b/app/models/kbase/portal.rb
index 5401361c4..03f8e29bf 100644
--- a/app/models/kbase/portal.rb
+++ b/app/models/kbase/portal.rb
@@ -20,9 +20,9 @@
 #
 class Kbase::Portal < ApplicationRecord
   belongs_to :account
-  has_many :categories, dependent: :destroy
+  has_many :categories, dependent: :destroy_async
   has_many :folders,  through: :categories
-  has_many :articles, dependent: :destroy
+  has_many :articles, dependent: :destroy_async
 
   validates :account_id, presence: true
   validates :name, presence: true
diff --git a/app/models/message.rb b/app/models/message.rb
index 920f338be..bd9c3c422 100644
--- a/app/models/message.rb
+++ b/app/models/message.rb
@@ -82,8 +82,8 @@ class Message < ApplicationRecord
   belongs_to :contact, required: false
   belongs_to :sender, polymorphic: true, required: false
 
-  has_many :attachments, dependent: :destroy, autosave: true, before_add: :validate_attachments_limit
-  has_one :csat_survey_response, dependent: :destroy
+  has_many :attachments, dependent: :destroy_async, autosave: true, before_add: :validate_attachments_limit
+  has_one :csat_survey_response, dependent: :destroy_async
 
   after_create_commit :execute_after_create_commit_callbacks
 
diff --git a/app/models/platform_app.rb b/app/models/platform_app.rb
index 2f7ec8e42..d8b2eb054 100644
--- a/app/models/platform_app.rb
+++ b/app/models/platform_app.rb
@@ -12,5 +12,5 @@ class PlatformApp < ApplicationRecord
 
   validates :name, presence: true
 
-  has_many :platform_app_permissibles, dependent: :destroy
+  has_many :platform_app_permissibles, dependent: :destroy_async
 end
diff --git a/app/models/platform_app_permissible.rb b/app/models/platform_app_permissible.rb
index c8efc59b4..14b804e84 100644
--- a/app/models/platform_app_permissible.rb
+++ b/app/models/platform_app_permissible.rb
@@ -22,5 +22,5 @@ class PlatformAppPermissible < ApplicationRecord
   validates :platform_app_id, uniqueness: { scope: [:permissible_id, :permissible_type] }
 
   belongs_to :platform_app
-  belongs_to :permissible, polymorphic: true, dependent: :destroy
+  belongs_to :permissible, polymorphic: true, dependent: :destroy_async
 end
diff --git a/app/models/team.rb b/app/models/team.rb
index 1b998eb4c..dd4713662 100644
--- a/app/models/team.rb
+++ b/app/models/team.rb
@@ -21,7 +21,7 @@
 #
 class Team < ApplicationRecord
   belongs_to :account
-  has_many :team_members, dependent: :destroy
+  has_many :team_members, dependent: :destroy_async
   has_many :members, through: :team_members, source: :user
   has_many :conversations, dependent: :nullify
 
diff --git a/app/models/telegram_bot.rb b/app/models/telegram_bot.rb
index 2d8706753..8468e233f 100644
--- a/app/models/telegram_bot.rb
+++ b/app/models/telegram_bot.rb
@@ -12,6 +12,6 @@
 
 class TelegramBot < ApplicationRecord
   belongs_to :account
-  has_one :inbox, as: :channel, dependent: :destroy
+  has_one :inbox, as: :channel, dependent: :destroy_async
   validates_uniqueness_of :auth_key, scope: :account_id
 end
diff --git a/app/models/user.rb b/app/models/user.rb
index 6f5e67bee..c73aad20c 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -67,7 +67,7 @@ class User < ApplicationRecord
   validates :email, :name, presence: true
   validates_length_of :name, minimum: 1
 
-  has_many :account_users, dependent: :destroy
+  has_many :account_users, dependent: :destroy_async
   has_many :accounts, through: :account_users
   accepts_nested_attributes_for :account_users
 
@@ -75,18 +75,18 @@ class User < ApplicationRecord
   alias_attribute :conversations, :assigned_conversations
   has_many :csat_survey_responses, foreign_key: 'assigned_agent_id', dependent: :nullify
 
-  has_many :inbox_members, dependent: :destroy
+  has_many :inbox_members, dependent: :destroy_async
   has_many :inboxes, through: :inbox_members, source: :inbox
   has_many :messages, as: :sender
   has_many :invitees, through: :account_users, class_name: 'User', foreign_key: 'inviter_id', source: :inviter, dependent: :nullify
 
-  has_many :notifications, dependent: :destroy
-  has_many :notification_settings, dependent: :destroy
-  has_many :notification_subscriptions, dependent: :destroy
-  has_many :team_members, dependent: :destroy
+  has_many :notifications, dependent: :destroy_async
+  has_many :notification_settings, dependent: :destroy_async
+  has_many :notification_subscriptions, dependent: :destroy_async
+  has_many :team_members, dependent: :destroy_async
   has_many :teams, through: :team_members
   has_many :notes, dependent: :nullify
-  has_many :custom_filters, dependent: :destroy
+  has_many :custom_filters, dependent: :destroy_async
 
   before_validation :set_password_and_uid, on: :create
 
diff --git a/spec/models/account_spec.rb b/spec/models/account_spec.rb
index cef952cf8..20ebf4bfd 100644
--- a/spec/models/account_spec.rb
+++ b/spec/models/account_spec.rb
@@ -8,17 +8,17 @@ RSpec.describe Account do
 
   it { is_expected.to have_many(:users).through(:account_users) }
   it { is_expected.to have_many(:account_users) }
-  it { is_expected.to have_many(:inboxes).dependent(:destroy) }
-  it { is_expected.to have_many(:conversations).dependent(:destroy) }
-  it { is_expected.to have_many(:contacts).dependent(:destroy) }
-  it { is_expected.to have_many(:telegram_bots).dependent(:destroy) }
-  it { is_expected.to have_many(:canned_responses).dependent(:destroy) }
-  it { is_expected.to have_many(:facebook_pages).class_name('::Channel::FacebookPage').dependent(:destroy) }
-  it { is_expected.to have_many(:web_widgets).class_name('::Channel::WebWidget').dependent(:destroy) }
-  it { is_expected.to have_many(:webhooks).dependent(:destroy) }
-  it { is_expected.to have_many(:notification_settings).dependent(:destroy) }
+  it { is_expected.to have_many(:inboxes).dependent(:destroy_async) }
+  it { is_expected.to have_many(:conversations).dependent(:destroy_async) }
+  it { is_expected.to have_many(:contacts).dependent(:destroy_async) }
+  it { is_expected.to have_many(:telegram_bots).dependent(:destroy_async) }
+  it { is_expected.to have_many(:canned_responses).dependent(:destroy_async) }
+  it { is_expected.to have_many(:facebook_pages).class_name('::Channel::FacebookPage').dependent(:destroy_async) }
+  it { is_expected.to have_many(:web_widgets).class_name('::Channel::WebWidget').dependent(:destroy_async) }
+  it { is_expected.to have_many(:webhooks).dependent(:destroy_async) }
+  it { is_expected.to have_many(:notification_settings).dependent(:destroy_async) }
   it { is_expected.to have_many(:events) }
-  it { is_expected.to have_many(:kbase_portals).dependent(:destroy) }
-  it { is_expected.to have_many(:kbase_categories).dependent(:destroy) }
-  it { is_expected.to have_many(:teams).dependent(:destroy) }
+  it { is_expected.to have_many(:kbase_portals).dependent(:destroy_async) }
+  it { is_expected.to have_many(:kbase_categories).dependent(:destroy_async) }
+  it { is_expected.to have_many(:teams).dependent(:destroy_async) }
 end
diff --git a/spec/models/channel/facebook_page_spec.rb b/spec/models/channel/facebook_page_spec.rb
index 8d4b7abf6..02baac4a1 100644
--- a/spec/models/channel/facebook_page_spec.rb
+++ b/spec/models/channel/facebook_page_spec.rb
@@ -13,7 +13,7 @@ RSpec.describe Channel::FacebookPage do
   it { is_expected.to validate_presence_of(:account_id) }
   # it { is_expected.to validate_uniqueness_of(:page_id).scoped_to(:account_id) }
   it { is_expected.to belong_to(:account) }
-  it { is_expected.to have_one(:inbox).dependent(:destroy) }
+  it { is_expected.to have_one(:inbox).dependent(:destroy_async) }
 
   describe 'concerns' do
     it_behaves_like 'reauthorizable'
diff --git a/spec/models/contact_spec.rb b/spec/models/contact_spec.rb
index d296907cc..9833b392a 100644
--- a/spec/models/contact_spec.rb
+++ b/spec/models/contact_spec.rb
@@ -9,7 +9,7 @@ RSpec.describe Contact do
 
   context 'associations' do
     it { is_expected.to belong_to(:account) }
-    it { is_expected.to have_many(:conversations).dependent(:destroy) }
+    it { is_expected.to have_many(:conversations).dependent(:destroy_async) }
   end
 
   describe 'pubsub_token' do
diff --git a/spec/models/inbox_spec.rb b/spec/models/inbox_spec.rb
index 2150d7048..ba94540d8 100644
--- a/spec/models/inbox_spec.rb
+++ b/spec/models/inbox_spec.rb
@@ -13,21 +13,21 @@ RSpec.describe Inbox do
 
     it { is_expected.to belong_to(:channel) }
 
-    it { is_expected.to have_many(:contact_inboxes).dependent(:destroy) }
+    it { is_expected.to have_many(:contact_inboxes).dependent(:destroy_async) }
 
     it { is_expected.to have_many(:contacts).through(:contact_inboxes) }
 
-    it { is_expected.to have_many(:inbox_members).dependent(:destroy) }
+    it { is_expected.to have_many(:inbox_members).dependent(:destroy_async) }
 
     it { is_expected.to have_many(:members).through(:inbox_members).source(:user) }
 
-    it { is_expected.to have_many(:conversations).dependent(:destroy) }
+    it { is_expected.to have_many(:conversations).dependent(:destroy_async) }
 
     it { is_expected.to have_many(:messages).through(:conversations) }
 
     it { is_expected.to have_one(:agent_bot_inbox) }
 
-    it { is_expected.to have_many(:webhooks).dependent(:destroy) }
+    it { is_expected.to have_many(:webhooks).dependent(:destroy_async) }
 
     it { is_expected.to have_many(:events) }
 
diff --git a/spec/models/user_spec.rb b/spec/models/user_spec.rb
index 5c4ce6850..674525a6f 100644
--- a/spec/models/user_spec.rb
+++ b/spec/models/user_spec.rb
@@ -16,8 +16,8 @@ RSpec.describe User do
     it { is_expected.to have_many(:accounts).through(:account_users) }
     it { is_expected.to have_many(:account_users) }
     it { is_expected.to have_many(:assigned_conversations).class_name('Conversation').dependent(:nullify) }
-    it { is_expected.to have_many(:inbox_members).dependent(:destroy) }
-    it { is_expected.to have_many(:notification_settings).dependent(:destroy) }
+    it { is_expected.to have_many(:inbox_members).dependent(:destroy_async) }
+    it { is_expected.to have_many(:notification_settings).dependent(:destroy_async) }
     it { is_expected.to have_many(:messages) }
     it { is_expected.to have_many(:events) }
     it { is_expected.to have_many(:teams) }

From c2b4991fd8eb1223952ffb5ff39d05eb91f0f10a Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 18 Nov 2021 14:09:55 +0530
Subject: [PATCH 07/69] feat: Add automation route (#3410)

---
 .../dashboard/i18n/locale/en/automation.json  |  6 ++++
 .../dashboard/i18n/locale/en/index.js         |  2 ++
 .../dashboard/i18n/locale/en/settings.json    |  1 +
 .../dashboard/i18n/sidebarItems/settings.js   |  8 +++++
 .../dashboard/settings/automation/Index.vue   | 12 ++++++++
 .../settings/automation/automation.routes.js  | 30 +++++++++++++++++++
 6 files changed, 59 insertions(+)
 create mode 100644 app/javascript/dashboard/i18n/locale/en/automation.json
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js

diff --git a/app/javascript/dashboard/i18n/locale/en/automation.json b/app/javascript/dashboard/i18n/locale/en/automation.json
new file mode 100644
index 000000000..c3614a990
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/automation.json
@@ -0,0 +1,6 @@
+{
+  "AUTOMATION": {
+    "HEADER": "Automation",
+    "HEADER_BTN_TXT": "Add Automation Rule"
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index bfcef683a..9e81e9e76 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -18,6 +18,7 @@ import { default as _setNewPassword } from './setNewPassword.json';
 import { default as _settings } from './settings.json';
 import { default as _signup } from './signup.json';
 import { default as _teamsSettings } from './teamsSettings.json';
+import { default as _automation } from './automation.json';
 
 export default {
   ..._agentMgmt,
@@ -40,4 +41,5 @@ export default {
   ..._settings,
   ..._signup,
   ..._teamsSettings,
+  ..._automation,
 };
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 837184245..5c8dcbf98 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -140,6 +140,7 @@
     "APPLICATIONS": "Applications",
     "LABELS": "Labels",
     "CUSTOM_ATTRIBUTES": "Custom Attributes",
+    "AUTOMATION": "Automation",
     "TEAMS": "Teams",
     "ALL_CONTACTS": "All Contacts",
     "TAGGED_WITH": "Tagged with",
diff --git a/app/javascript/dashboard/i18n/sidebarItems/settings.js b/app/javascript/dashboard/i18n/sidebarItems/settings.js
index c2e7b8f0b..23f59bd7b 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/settings.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/settings.js
@@ -28,6 +28,7 @@ const settings = accountId => ({
     'settings_teams_edit',
     'settings_teams_edit_members',
     'settings_teams_edit_finish',
+    'automation_list',
   ],
   menuItems: {
     back: {
@@ -74,6 +75,13 @@ const settings = accountId => ({
       ),
       toStateName: 'attributes_list',
     },
+    automation: {
+      icon: 'ion-wrench',
+      label: 'AUTOMATION',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
+      toStateName: 'automation_list',
+    },
     cannedResponses: {
       icon: 'ion-chatbox-working',
       label: 'CANNED_RESPONSES',
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
new file mode 100644
index 000000000..dfade7e42
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="column content-box">
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-right-top"
+      icon="ion-android-add-circle"
+    >
+      {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
+    </woot-button>
+  </div>
+</template>
+<script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
new file mode 100644
index 000000000..e5ca2c868
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
@@ -0,0 +1,30 @@
+import SettingsContent from '../Wrapper';
+import Automation from './Index';
+import { frontendURL } from '../../../../helper/URLHelper';
+
+export default {
+  routes: [
+    {
+      path: frontendURL('accounts/:accountId/settings/automation'),
+      component: SettingsContent,
+      props: {
+        headerTitle: 'AUTOMATION.HEADER',
+        icon: 'ion-wrench',
+        showNewButton: false,
+      },
+      children: [
+        {
+          path: '',
+          name: 'automation_wrapper',
+          redirect: 'list',
+        },
+        {
+          path: 'list',
+          name: 'automation_list',
+          component: Automation,
+          roles: ['administrator'],
+        },
+      ],
+    },
+  ],
+};

From a3ba8f9e355c98460237630418c573cb7c9e4bdb Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Thu, 18 Nov 2021 15:18:51 +0530
Subject: [PATCH 08/69] feat: Remove ionicons v2 dependency on widget (#3402)

---
 .../components/CustomerSatisfaction.vue       |  6 ++--
 .../shared/components/FluentIcon/Index.vue    | 35 +++++++++++++++++++
 .../shared/components/FluentIcon/icons.json   | 11 ++++++
 app/javascript/survey/assets/scss/woot.scss   |  1 -
 .../widget/assets/scss/_utilities.scss        |  3 ++
 .../widget/assets/scss/_variables.scss        |  1 -
 app/javascript/widget/assets/scss/woot.scss   |  2 +-
 .../widget/components/ChatAttachment.vue      | 32 +++--------------
 .../widget/components/ChatInputWrap.vue       | 27 ++++++--------
 .../widget/components/ChatSendButton.vue      | 31 +++-------------
 .../widget/components/FileBubble.vue          | 16 ++++-----
 .../widget/components/HeaderActions.vue       | 13 ++++---
 .../widget/components/template/Article.vue    | 25 ++++++-------
 .../widget/components/template/EmailInput.vue | 13 ++++---
 app/javascript/widget/views/Unread.vue        | 20 +++++++----
 15 files changed, 119 insertions(+), 117 deletions(-)
 create mode 100644 app/javascript/shared/components/FluentIcon/Index.vue
 create mode 100644 app/javascript/shared/components/FluentIcon/icons.json
 create mode 100644 app/javascript/widget/assets/scss/_utilities.scss

diff --git a/app/javascript/shared/components/CustomerSatisfaction.vue b/app/javascript/shared/components/CustomerSatisfaction.vue
index dc97eb92b..06c7c8369 100644
--- a/app/javascript/shared/components/CustomerSatisfaction.vue
+++ b/app/javascript/shared/components/CustomerSatisfaction.vue
@@ -25,12 +25,12 @@
         @keyup.enter="onSubmit"
       />
       <button
-        class="button"
+        class="button small"
         :disabled="isButtonDisabled"
         :style="{ background: widgetColor, borderColor: widgetColor }"
       >
         <spinner v-if="isUpdating && feedback" />
-        <i v-else class="ion-ios-arrow-forward" />
+        <fluent-icon v-else icon="chevron-right" />
       </button>
     </form>
   </div>
@@ -40,10 +40,12 @@
 import { mapGetters } from 'vuex';
 import Spinner from 'shared/components/Spinner';
 import { CSAT_RATINGS } from 'shared/constants/messages';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
   components: {
     Spinner,
+    FluentIcon,
   },
   props: {
     messageContentAttributes: {
diff --git a/app/javascript/shared/components/FluentIcon/Index.vue b/app/javascript/shared/components/FluentIcon/Index.vue
new file mode 100644
index 000000000..6b108ff52
--- /dev/null
+++ b/app/javascript/shared/components/FluentIcon/Index.vue
@@ -0,0 +1,35 @@
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path :d="icons[`${icon}-${type}`]" fill="currentColor" />
+  </svg>
+</template>
+<script>
+import icons from './icons.json';
+
+export default {
+  name: 'FluentIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: String,
+      default: '20px',
+    },
+    type: {
+      type: String,
+      default: 'outline',
+    },
+  },
+  data() {
+    return { icons };
+  },
+};
+</script>
diff --git a/app/javascript/shared/components/FluentIcon/icons.json b/app/javascript/shared/components/FluentIcon/icons.json
new file mode 100644
index 000000000..9ee0e82da
--- /dev/null
+++ b/app/javascript/shared/components/FluentIcon/icons.json
@@ -0,0 +1,11 @@
+{
+  "arrow-right-outline": "M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z",
+  "attach-outline": "M11.772 3.743a6 6 0 0 1 8.66 8.302l-.19.197-8.8 8.798-.036.03a3.723 3.723 0 0 1-5.489-4.973.764.764 0 0 1 .085-.13l.054-.06.086-.088.142-.148.002.003 7.436-7.454a.75.75 0 0 1 .977-.074l.084.073a.75.75 0 0 1 .074.976l-.073.084-7.594 7.613a2.23 2.23 0 0 0 3.174 3.106l8.832-8.83A4.502 4.502 0 0 0 13 4.644l-.168.16-.013.014-9.536 9.536a.75.75 0 0 1-1.133-.977l.072-.084 9.549-9.55h.002Z",
+  "chevron-right-outline": "M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z",
+  "dismiss-outline": "m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z",
+  "document-outline": "M18.5 20a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10Zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5V4.621Zm5.914 3.793-5.829-5.828c-.026-.026-.058-.046-.085-.07a2.072 2.072 0 0 0-.219-.18c-.04-.027-.086-.045-.128-.068-.071-.04-.141-.084-.216-.116a1.977 1.977 0 0 0-.624-.138C12.266 2.011 12.22 2 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414Z",
+  "emoji-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5ZM8.462 14.784A4.491 4.491 0 0 0 12 16.502a4.492 4.492 0 0 0 3.535-1.714.75.75 0 1 1 1.177.93A5.991 5.991 0 0 1 12 18.002a5.991 5.991 0 0 1-4.716-2.29.75.75 0 0 1 1.178-.928ZM9 8.75a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 8.75Zm6 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z",
+  "link-outline": "M9.25 7a.75.75 0 0 1 .11 1.492l-.11.008H7a3.5 3.5 0 0 0-.206 6.994L7 15.5h2.25a.75.75 0 0 1 .11 1.492L9.25 17H7a5 5 0 0 1-.25-9.994L7 7h2.25ZM17 7a5 5 0 0 1 .25 9.994L17 17h-2.25a.75.75 0 0 1-.11-1.492l.11-.008H17a3.5 3.5 0 0 0 .206-6.994L17 8.5h-2.25a.75.75 0 0 1-.11-1.492L14.75 7H17ZM7 11.25h10a.75.75 0 0 1 .102 1.493L17 12.75H7a.75.75 0 0 1-.102-1.493L7 11.25h10H7Z",
+  "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
+  "send-outline": "M5.694 12 2.299 3.272c-.236-.607.356-1.188.942-.982l.093.04 18 9a.75.75 0 0 1 .097 1.283l-.097.058-18 9c-.583.291-1.217-.244-1.065-.847l.03-.096L5.694 12 2.299 3.272 5.694 12ZM4.402 4.54l2.61 6.71h6.627a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.649.743l-.101.007H7.01l-2.609 6.71L19.322 12 4.401 4.54Z"
+}
diff --git a/app/javascript/survey/assets/scss/woot.scss b/app/javascript/survey/assets/scss/woot.scss
index d7e7f5497..5c7a4a213 100755
--- a/app/javascript/survey/assets/scss/woot.scss
+++ b/app/javascript/survey/assets/scss/woot.scss
@@ -7,7 +7,6 @@
 @import 'widget/assets/scss/mixins';
 @import 'widget/assets/scss/forms';
 @import 'shared/assets/fonts/widget_fonts';
-@import '~shared/assets/stylesheets/ionicons';
 
 html,
 body {
diff --git a/app/javascript/widget/assets/scss/_utilities.scss b/app/javascript/widget/assets/scss/_utilities.scss
new file mode 100644
index 000000000..0832681e0
--- /dev/null
+++ b/app/javascript/widget/assets/scss/_utilities.scss
@@ -0,0 +1,3 @@
+.icon-button {
+  @include button-size;
+}
diff --git a/app/javascript/widget/assets/scss/_variables.scss b/app/javascript/widget/assets/scss/_variables.scss
index 8840c0263..dff2c30b9 100755
--- a/app/javascript/widget/assets/scss/_variables.scss
+++ b/app/javascript/widget/assets/scss/_variables.scss
@@ -84,7 +84,6 @@ Roboto,
 Tahoma,
 Arial,
 sans-serif;
-$ionicons-font-path: '~ionicons/fonts';
 
 // Break points
 $break-point-medium: 667px;
diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss
index d9084e8f4..5d8a44fdf 100755
--- a/app/javascript/widget/assets/scss/woot.scss
+++ b/app/javascript/widget/assets/scss/woot.scss
@@ -6,8 +6,8 @@
 @import 'buttons';
 @import 'mixins';
 @import 'forms';
+@import 'utilities';
 @import 'shared/assets/fonts/widget_fonts';
-@import '~shared/assets/stylesheets/ionicons';
 @import '~spinkit/scss/spinners/7-three-bounce';
 
 html,
diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue
index 998b1745b..d1d789d61 100755
--- a/app/javascript/widget/components/ChatAttachment.vue
+++ b/app/javascript/widget/components/ChatAttachment.vue
@@ -4,10 +4,10 @@
     accept="image/*, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
     @input-file="onFileUpload"
   >
-    <span class="attachment-button">
-      <i v-if="!isUploading.image" class="ion-android-attach" />
+    <button class="icon-button flex items-center justify-center">
+      <fluent-icon v-if="!isUploading.image" icon="attach" />
       <spinner v-if="isUploading" size="small" />
-    </span>
+    </button>
   </file-upload>
 </template>
 
@@ -17,9 +17,9 @@ import Spinner from 'shared/components/Spinner.vue';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 export default {
-  components: { FileUpload, Spinner },
+  components: { FluentIcon, FileUpload, Spinner },
   props: {
     onAttach: {
       type: Function,
@@ -66,28 +66,6 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
-
-.attachment-button {
-  @include button-size;
-
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  position: relative;
-  width: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  i {
-    font-size: $font-size-large;
-    color: $color-gray;
-  }
-}
-</style>
 <style lang="scss">
 .file-uploads .attachment-button + label {
   cursor: pointer;
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index f39cf2194..c7eb0c900 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -23,13 +23,13 @@
       />
       <button
         v-if="hasEmojiPickerEnabled"
-        class="emoji-toggle"
+        class="icon-button flex justify-center items-center"
         aria-label="Emoji picker"
-        @click="toggleEmojiPicker()"
+        @click="toggleEmojiPicker"
       >
-        <i
-          class="icon ion-happy-outline"
-          :class="{ active: showEmojiPicker }"
+        <fluent-icon
+          icon="emoji"
+          :class="{ 'text-woot-500': showEmojiPicker }"
         />
       </button>
       <emoji-input
@@ -50,11 +50,13 @@
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
-import ChatSendButton from 'widget/components/ChatSendButton.vue';
+
 import ChatAttachmentButton from 'widget/components/ChatAttachment.vue';
-import ResizableTextArea from 'shared/components/ResizableTextArea';
-import EmojiInput from 'shared/components/emoji/EmojiInput';
+import ChatSendButton from 'widget/components/ChatSendButton.vue';
 import configMixin from '../mixins/configMixin';
+import EmojiInput from 'shared/components/emoji/EmojiInput';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import ResizableTextArea from 'shared/components/ResizableTextArea';
 
 export default {
   name: 'ChatInputWrap',
@@ -62,6 +64,7 @@ export default {
     ChatAttachmentButton,
     ChatSendButton,
     EmojiInput,
+    FluentIcon,
     ResizableTextArea,
   },
   mixins: [clickaway, configMixin],
@@ -178,14 +181,6 @@ export default {
   }
 }
 
-.emoji-toggle {
-  @include button-size;
-
-  font-size: $font-size-large;
-  color: $color-gray;
-  cursor: pointer;
-}
-
 .emoji-dialog {
   right: $space-one;
 }
diff --git a/app/javascript/widget/components/ChatSendButton.vue b/app/javascript/widget/components/ChatSendButton.vue
index d20780231..8a8819962 100755
--- a/app/javascript/widget/components/ChatSendButton.vue
+++ b/app/javascript/widget/components/ChatSendButton.vue
@@ -2,23 +2,21 @@
   <button
     type="submit"
     :disabled="disabled"
-    class="send-button ml-1"
+    class="icon-button flex items-center justify-center ml-1"
     @click="onClick"
   >
-    <i
-      v-if="!loading"
-      class="ion-android-send icon-holder"
-      :style="`color: ${color}`"
-    />
+    <fluent-icon v-if="!loading" icon="send" :style="`color: ${color}`" />
     <spinner v-else size="small" />
   </button>
 </template>
 
 <script>
 import Spinner from 'shared/components/Spinner.vue';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
   components: {
+    FluentIcon,
     Spinner,
   },
   props: {
@@ -41,24 +39,3 @@ export default {
   },
 };
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-
-.send-button {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  position: relative;
-  padding-right: $space-smaller;
-
-  .icon-holder {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: $font-size-big;
-    font-weight: $font-weight-medium;
-  }
-}
-</style>
diff --git a/app/javascript/widget/components/FileBubble.vue b/app/javascript/widget/components/FileBubble.vue
index 93c30b891..24e580b85 100644
--- a/app/javascript/widget/components/FileBubble.vue
+++ b/app/javascript/widget/components/FileBubble.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="file message-text__wrap">
+  <div class="file flex flex-row items-center p-3 cursor-pointer">
     <div class="icon-wrap">
-      <i class="ion-document-text"></i>
+      <fluent-icon icon="document" size="28" />
     </div>
     <div class="meta">
       <div class="title">
         {{ title }}
       </div>
-      <div class="link-wrap">
+      <div class="link-wrap mb-1">
         <a
           class="download"
           rel="noreferrer noopener nofollow"
@@ -22,7 +22,12 @@
 </template>
 
 <script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
 export default {
+  components: {
+    FluentIcon,
+  },
   props: {
     url: {
       type: String,
@@ -61,11 +66,6 @@ export default {
 @import '~widget/assets/scss/variables.scss';
 
 .file {
-  display: flex;
-  flex-direction: row;
-  padding: $space-slab;
-  cursor: pointer;
-
   .icon-wrap {
     font-size: $font-size-mega;
     color: $color-woot;
diff --git a/app/javascript/widget/components/HeaderActions.vue b/app/javascript/widget/components/HeaderActions.vue
index 16ba53a37..348064a39 100644
--- a/app/javascript/widget/components/HeaderActions.vue
+++ b/app/javascript/widget/components/HeaderActions.vue
@@ -2,27 +2,30 @@
   <div v-if="showHeaderActions" class="actions flex items-center">
     <button
       v-if="showPopoutButton"
-      class="button transparent compact new-window--button"
+      class="button transparent compact new-window--button "
       @click="popoutWindow"
     >
-      <span class="ion-android-open"></span>
+      <fluent-icon icon="open" size="22" class="text-black-900" />
     </button>
     <button
       class="button transparent compact close-button"
       :class="{
         'rn-close-button': isRNWebView,
       }"
+      @click="closeWindow"
     >
-      <span class="ion-android-close" @click="closeWindow"></span>
+      <fluent-icon icon="dismiss" size="24" class="text-black-900" />
     </button>
   </div>
 </template>
 <script>
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { buildPopoutURL } from '../helpers/urlParamsHelper';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
   name: 'HeaderActions',
+  components: { FluentIcon },
   props: {
     showPopoutButton: {
       type: Boolean,
@@ -85,10 +88,6 @@ export default {
   span {
     color: $color-heading;
     font-size: $font-size-large;
-
-    &.ion-android-close {
-      font-size: $font-size-big;
-    }
   }
 
   .close-button {
diff --git a/app/javascript/widget/components/template/Article.vue b/app/javascript/widget/components/template/Article.vue
index ff130a6a7..6d5308c48 100644
--- a/app/javascript/widget/components/template/Article.vue
+++ b/app/javascript/widget/components/template/Article.vue
@@ -2,10 +2,13 @@
   <div v-if="!!items.length" class="chat-bubble agent">
     <div v-for="item in items" :key="item.link" class="article-item">
       <a :href="item.link" target="_blank" rel="noopener noreferrer nofollow">
-        <span class="title">
-          <i class="ion-link icon"></i>{{ item.title }}
+        <span class="title flex items-center text-black-900 font-medium">
+          <fluent-icon icon="link" class="mr-1" />
+          <span>{{ item.title }}</span>
+        </span>
+        <span class="description">
+          {{ truncateMessage(item.description) }}
         </span>
-        <span class="description">{{ truncateMessage(item.description) }}</span>
       </a>
     </div>
   </div>
@@ -13,8 +16,12 @@
 
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 
 export default {
+  components: {
+    FluentIcon,
+  },
   mixins: [messageFormatterMixin],
   props: {
     items: {
@@ -38,18 +45,6 @@ export default {
     text-decoration: none;
   }
 
-  .title {
-    color: $color-woot;
-    display: block;
-    font-weight: $font-weight-medium;
-
-    .icon {
-      color: $color-body;
-      font-size: $font-size-medium;
-      padding-right: $space-small;
-    }
-  }
-
   .description {
     display: block;
     margin-top: $space-smaller;
diff --git a/app/javascript/widget/components/template/EmailInput.vue b/app/javascript/widget/components/template/EmailInput.vue
index cf37839f0..f2c63766c 100644
--- a/app/javascript/widget/components/template/EmailInput.vue
+++ b/app/javascript/widget/components/template/EmailInput.vue
@@ -3,7 +3,7 @@
     <form
       v-if="!hasSubmitted"
       class="email-input-group"
-      @submit.prevent="onSubmit()"
+      @submit.prevent="onSubmit"
     >
       <input
         v-model.trim="email"
@@ -14,12 +14,12 @@
         @keyup.enter="onSubmit"
       />
       <button
-        class="button"
+        class="button small"
         :disabled="$v.email.$invalid"
         :style="{ background: widgetColor, borderColor: widgetColor }"
       >
-        <i v-if="!isUpdating" class="ion-ios-arrow-forward" />
-        <spinner v-else />
+        <fluent-icon v-if="!isUpdating" icon="chevron-right" />
+        <spinner v-else class="mx-2" />
       </button>
     </form>
   </div>
@@ -27,11 +27,14 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import Spinner from 'shared/components/Spinner';
 import { required, email } from 'vuelidate/lib/validators';
 
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import Spinner from 'shared/components/Spinner';
+
 export default {
   components: {
+    FluentIcon,
     Spinner,
   },
   props: {
diff --git a/app/javascript/widget/views/Unread.vue b/app/javascript/widget/views/Unread.vue
index c21f3d803..40be39dfb 100644
--- a/app/javascript/widget/views/Unread.vue
+++ b/app/javascript/widget/views/Unread.vue
@@ -6,8 +6,10 @@
         class="button small close-unread-button"
         @click="closeFullView"
       >
-        <i class="ion-android-close" />
-        {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
+        <div class="flex items-center">
+          <fluent-icon class="mr-1" icon="dismiss" size="12" />
+          {{ $t('UNREAD_VIEW.CLOSE_MESSAGES_BUTTON') }}
+        </div>
       </button>
     </div>
     <div class="unread-messages">
@@ -29,8 +31,10 @@
         class="button clear-button"
         @click="openFullView"
       >
-        <i class="ion-arrow-right-c" />
-        {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
+        <div class="flex items-center">
+          <fluent-icon class="mr-2" size="16" icon="arrow-right" />
+          {{ $t('UNREAD_VIEW.VIEW_MESSAGES_BUTTON') }}
+        </div>
       </button>
     </div>
   </div>
@@ -38,14 +42,16 @@
 
 <script>
 import { IFrameHelper } from 'widget/helpers/utils';
-import UnreadMessage from 'widget/components/UnreadMessage.vue';
-
-import configMixin from '../mixins/configMixin';
 import { mapGetters } from 'vuex';
+import configMixin from '../mixins/configMixin';
+
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import UnreadMessage from 'widget/components/UnreadMessage.vue';
 
 export default {
   name: 'Unread',
   components: {
+    FluentIcon,
     UnreadMessage,
   },
   mixins: [configMixin],

From bf96e8b68d6488b389d4b82bdba0250a9544e0bf Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 18 Nov 2021 18:59:28 +0530
Subject: [PATCH 09/69] choore: Change `values` to `attribute_values` in custom
 attributes (#3413)

---
 .../v1/accounts/custom_attribute_definitions_controller.rb   | 2 +-
 app/models/custom_attribute_definition.rb                    | 2 +-
 .../api/v1/models/_custom_attribute_definition.json.jbuilder | 1 +
 ...es_to_attribute_values_in_custom_attribute_definitions.rb | 5 +++++
 db/schema.rb                                                 | 4 ++--
 5 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 db/migrate/20211118100301_change_values_to_attribute_values_in_custom_attribute_definitions.rb

diff --git a/app/controllers/api/v1/accounts/custom_attribute_definitions_controller.rb b/app/controllers/api/v1/accounts/custom_attribute_definitions_controller.rb
index 13cba46ea..419540438 100644
--- a/app/controllers/api/v1/accounts/custom_attribute_definitions_controller.rb
+++ b/app/controllers/api/v1/accounts/custom_attribute_definitions_controller.rb
@@ -39,7 +39,7 @@ class Api::V1::Accounts::CustomAttributeDefinitionsController < Api::V1::Account
       :attribute_display_type,
       :attribute_key,
       :attribute_model,
-      :default_value
+      attribute_values: []
     )
   end
 
diff --git a/app/models/custom_attribute_definition.rb b/app/models/custom_attribute_definition.rb
index a79b8ca95..94a41beea 100644
--- a/app/models/custom_attribute_definition.rb
+++ b/app/models/custom_attribute_definition.rb
@@ -8,8 +8,8 @@
 #  attribute_display_type :integer          default("text")
 #  attribute_key          :string
 #  attribute_model        :integer          default("conversation_attribute")
+#  attribute_values       :jsonb
 #  default_value          :integer
-#  values                 :jsonb
 #  created_at             :datetime         not null
 #  updated_at             :datetime         not null
 #  account_id             :bigint
diff --git a/app/views/api/v1/models/_custom_attribute_definition.json.jbuilder b/app/views/api/v1/models/_custom_attribute_definition.json.jbuilder
index b715b0e50..0a1036903 100644
--- a/app/views/api/v1/models/_custom_attribute_definition.json.jbuilder
+++ b/app/views/api/v1/models/_custom_attribute_definition.json.jbuilder
@@ -3,6 +3,7 @@ json.attribute_display_name resource.attribute_display_name
 json.attribute_display_type resource.attribute_display_type
 json.attribute_description resource.attribute_description
 json.attribute_key resource.attribute_key
+json.attribute_values resource.attribute_values
 json.attribute_model resource.attribute_model
 json.default_value resource.default_value
 json.created_at resource.created_at
diff --git a/db/migrate/20211118100301_change_values_to_attribute_values_in_custom_attribute_definitions.rb b/db/migrate/20211118100301_change_values_to_attribute_values_in_custom_attribute_definitions.rb
new file mode 100644
index 000000000..fdf8fd661
--- /dev/null
+++ b/db/migrate/20211118100301_change_values_to_attribute_values_in_custom_attribute_definitions.rb
@@ -0,0 +1,5 @@
+class ChangeValuesToAttributeValuesInCustomAttributeDefinitions < ActiveRecord::Migration[6.1]
+  def change
+    rename_column :custom_attribute_definitions, :values, :attribute_values
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 946f2829e..1e3b87636 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2021_11_16_131740) do
+ActiveRecord::Schema.define(version: 2021_11_18_100301) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
@@ -355,7 +355,7 @@ ActiveRecord::Schema.define(version: 2021_11_16_131740) do
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
     t.text "attribute_description"
-    t.jsonb "values", default: []
+    t.jsonb "attribute_values", default: []
     t.index ["account_id"], name: "index_custom_attribute_definitions_on_account_id"
     t.index ["attribute_key", "attribute_model"], name: "attribute_key_model_index", unique: true
   end

From c2333214afc71556db940798bb3b485b8249abba Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Thu, 18 Nov 2021 19:15:02 +0530
Subject: [PATCH 10/69] feat: Add Advanced Conversation Filters (#3239)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Tejaswini <tejaswini@chatwoot.com>
---
 .codeclimate.yml                              |   3 +
 .../dashboard/api/inbox/conversation.js       |  10 +-
 .../api/specs/inbox/conversation.spec.js      |  37 +++
 .../scss/widgets/_conversation-view.scss      |   2 +-
 .../dashboard/assets/scss/widgets/_modal.scss |   8 +-
 .../dashboard/components/ChatList.vue         | 133 +++++++-
 .../ConversationAdvancedFilter.vue            | 284 ++++++++++++++++++
 .../advancedFilterItems/countries.js          | 257 ++++++++++++++++
 .../conversation/advancedFilterItems/index.js | 230 ++++++++++++++
 .../advancedFilterItems/languages.js          | 132 ++++++++
 .../conversation/components/FilterInput.vue   | 197 ++++++++++++
 .../dashboard/helper/filterQueryGenerator.js  |  18 ++
 .../helper/specs/filterQueryGenerator.spec.js |  68 +++++
 .../i18n/locale/en/advancedFilters.json       |  37 +++
 .../dashboard/i18n/locale/en/index.js         |   2 +
 .../dashboard/store/modules/campaigns.js      |   3 +
 .../store/modules/conversationPage.js         |   3 +
 .../store/modules/conversations/actions.js    |  93 ++++--
 .../store/modules/conversations/getters.js    |   3 +
 .../store/modules/conversations/index.js      |  61 ++--
 .../modules/specs/campaigns/getters.spec.js   |   5 +
 .../specs/conversationPage/mutations.spec.js  |   9 +-
 .../specs/conversations/actions.spec.js       |  85 +++++-
 .../specs/conversations/getters.spec.js       |  17 ++
 .../specs/conversations/mutations.spec.js     |  39 +++
 .../conversations/testConversationResponse.js |  97 ++++++
 .../dashboard/store/mutation-types.js         |   2 +
 .../shared/assets/stylesheets/font-size.scss  |   8 +-
 .../shared/assets/stylesheets/spacing.scss    |  12 +-
 .../shared/assets/stylesheets/z-index.scss    |   1 +
 30 files changed, 1778 insertions(+), 78 deletions(-)
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/countries.js
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js
 create mode 100644 app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
 create mode 100644 app/javascript/dashboard/helper/filterQueryGenerator.js
 create mode 100644 app/javascript/dashboard/helper/specs/filterQueryGenerator.spec.js
 create mode 100644 app/javascript/dashboard/i18n/locale/en/advancedFilters.json
 create mode 100644 app/javascript/dashboard/store/modules/specs/conversations/testConversationResponse.js

diff --git a/.codeclimate.yml b/.codeclimate.yml
index 667b0f340..9e8b209bd 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -40,3 +40,6 @@ exclude_patterns:
   - "app/javascript/dashboard/i18n/locale"
   - "**/*.stories.js"
   - "stories/"
+  - "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js"
+  - "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/countries.js"
+  - "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js"
diff --git a/app/javascript/dashboard/api/inbox/conversation.js b/app/javascript/dashboard/api/inbox/conversation.js
index 0c90f3fd4..8fca2b83c 100644
--- a/app/javascript/dashboard/api/inbox/conversation.js
+++ b/app/javascript/dashboard/api/inbox/conversation.js
@@ -19,6 +19,14 @@ class ConversationApi extends ApiClient {
     });
   }
 
+  filter(payload) {
+    return axios.post(`${this.url}/filter`, payload.queryData, {
+      params: {
+        page: payload.page,
+      },
+    });
+  }
+
   search({ q }) {
     return axios.get(`${this.url}/search`, {
       params: {
@@ -54,7 +62,7 @@ class ConversationApi extends ApiClient {
   toggleTyping({ conversationId, status, isPrivate }) {
     return axios.post(`${this.url}/${conversationId}/toggle_typing_status`, {
       typing_status: status,
-      is_private: isPrivate
+      is_private: isPrivate,
     });
   }
 
diff --git a/app/javascript/dashboard/api/specs/inbox/conversation.spec.js b/app/javascript/dashboard/api/specs/inbox/conversation.spec.js
index 814b83446..d276b8053 100644
--- a/app/javascript/dashboard/api/specs/inbox/conversation.spec.js
+++ b/app/javascript/dashboard/api/specs/inbox/conversation.spec.js
@@ -19,6 +19,7 @@ describe('#ConversationAPI', () => {
     expect(conversationAPI).toHaveProperty('unmute');
     expect(conversationAPI).toHaveProperty('meta');
     expect(conversationAPI).toHaveProperty('sendEmailTranscript');
+    expect(conversationAPI).toHaveProperty('filter');
   });
 
   describeWithAPIMock('API calls', context => {
@@ -173,5 +174,41 @@ describe('#ConversationAPI', () => {
         }
       );
     });
+
+    it('#filter', () => {
+      const payload = {
+        page: 1,
+        queryData: {
+          payload: [
+            {
+              attribute_key: 'status',
+              filter_operator: 'equal_to',
+              values: ['pending', 'resolved'],
+              query_operator: 'and',
+            },
+            {
+              attribute_key: 'assignee',
+              filter_operator: 'equal_to',
+              values: [3],
+              query_operator: 'and',
+            },
+            {
+              attribute_key: 'id',
+              filter_operator: 'equal_to',
+              values: ['This is a test'],
+              query_operator: null,
+            },
+          ],
+        },
+      };
+      conversationAPI.filter(payload);
+      expect(
+        context.axiosMock.post
+      ).toHaveBeenCalledWith(
+        '/api/v1/conversations/filter',
+        payload.queryData,
+        { params: { page: payload.page } }
+      );
+    });
   });
 });
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index 70bf16b95..39cf6ad54 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -93,7 +93,7 @@
 
     .status--filter {
       @include padding($zero null $zero $space-normal);
-      @include margin($space-smaller $space-slab $zero $zero);
+      @include margin($zero);
       background-color: $color-background-light;
       border: 1px solid $color-border;
       float: right;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
index a017f776a..f1a36a87c 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@@ -29,7 +29,6 @@
   }
 }
 
-
 .page-top-bar {
   @include padding($space-large $space-large $zero);
 
@@ -48,13 +47,11 @@
   position: relative;
   width: 60rem;
 
-
   .content-box {
     @include padding($zero);
     height: auto;
   }
 
-
   h2 {
     color: $color-heading;
     font-size: $font-size-medium;
@@ -89,6 +86,10 @@
     button {
       font-size: $font-size-small;
     }
+
+    &.justify-content-end {
+      justify-content: end;
+    }
   }
 
   .delete-item {
@@ -97,7 +98,6 @@
       @include margin($zero);
     }
   }
-
 }
 
 .modal-enter,
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index f8c628a80..919105c2f 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -1,14 +1,39 @@
-<template>
+l<template>
   <div class="conversations-list-wrap">
     <slot></slot>
-    <div class="chat-list__top">
+    <div class="chat-list__top" :class="{ filter__applied: hasAppliedFilters }">
       <h1 class="page-title text-truncate" :title="pageTitle">
         {{ pageTitle }}
       </h1>
-      <chat-filter @statusFilterChange="updateStatusType" />
+
+      <div class="filter--actions">
+        <chat-filter
+          v-if="!hasAppliedFilters"
+          @statusFilterChange="updateStatusType"
+        />
+        <woot-button
+          v-else
+          variant="clear"
+          color-scheme="danger"
+          class="btn-clear-filters"
+          @click="resetAndFetchData"
+        >
+          {{ $t('FILTER.CLEAR_BUTTON_LABEL') }}
+        </woot-button>
+        <woot-button
+          v-tooltip.top-end="$t('FILTER.TOOLTIP_LABEL')"
+          variant="clear"
+          color-scheme="secondary"
+          class="btn-filter"
+          @click="onToggleAdvanceFiltersModal"
+        >
+          <i class="icon ion-ios-settings-strong" />
+        </woot-button>
+      </div>
     </div>
 
     <chat-type-tabs
+      v-if="!hasAppliedFilters"
       :items="assigneeTabItems"
       :active-tab="activeAssigneeTab"
       class="tab--chat-type"
@@ -37,7 +62,7 @@
         v-if="!hasCurrentPageEndReached && !chatListLoading"
         variant="clear"
         size="expanded"
-        @click="fetchConversations"
+        @click="loadMoreConversations"
       >
         {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
       </woot-button>
@@ -53,6 +78,17 @@
         {{ $t('CHAT_LIST.EOF') }}
       </p>
     </div>
+    <woot-modal
+      :show.sync="showAdvancedFilters"
+      :on-close="onToggleAdvanceFiltersModal"
+    >
+      <conversation-advanced-filter
+        v-if="showAdvancedFilters"
+        :filter-types="advancedFilterTypes"
+        :on-close="onToggleAdvanceFiltersModal"
+        @applyFilter="onApplyFilter"
+      />
+    </woot-modal>
   </div>
 </template>
 
@@ -60,12 +96,16 @@
 import { mapGetters } from 'vuex';
 
 import ChatFilter from './widgets/conversation/ChatFilter';
+import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter';
 import ChatTypeTabs from './widgets/ChatTypeTabs';
 import ConversationCard from './widgets/conversation/ConversationCard';
 import timeMixin from '../mixins/time';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import conversationMixin from '../mixins/conversations';
 import wootConstants from '../constants';
+import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
+import filterQueryGenerator from '../helper/filterQueryGenerator.js';
+
 import {
   hasPressedAltAndJKey,
   hasPressedAltAndKKey,
@@ -76,6 +116,7 @@ export default {
     ChatTypeTabs,
     ConversationCard,
     ChatFilter,
+    ConversationAdvancedFilter,
   },
   mixins: [timeMixin, conversationMixin, eventListenerMixins],
   props: {
@@ -96,6 +137,11 @@ export default {
     return {
       activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
       activeStatus: wootConstants.STATUS_TYPE.OPEN,
+      showAdvancedFilters: false,
+      advancedFilterTypes: advancedFilterTypes.map(filter => ({
+        ...filter,
+        attributeName: this.$t(`FILTER.ATTRIBUTES.${filter.attributeI18nKey}`),
+      })),
     };
   },
   computed: {
@@ -109,7 +155,11 @@ export default {
       currentUserID: 'getCurrentUserID',
       activeInbox: 'getSelectedInbox',
       conversationStats: 'conversationStats/getStats',
+      appliedFilters: 'getAppliedFilters',
     }),
+    hasAppliedFilters() {
+      return this.appliedFilters.length;
+    },
     assigneeTabItems() {
       return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map(item => {
         const count = this.conversationStats[item.COUNT_KEY] || 0;
@@ -131,9 +181,17 @@ export default {
         this.activeAssigneeTab
       );
     },
+    currentPageFilterKey() {
+      return this.hasAppliedFilters ? 'appliedFilters' : this.activeAssigneeTab;
+    },
+    currentFiltersPage() {
+      return this.$store.getters['conversationPage/getCurrentPageFilter'](
+        this.currentPageFilterKey
+      );
+    },
     hasCurrentPageEndReached() {
       return this.$store.getters['conversationPage/getHasEndReached'](
-        this.activeAssigneeTab
+        this.currentPageFilterKey
       );
     },
     conversationFilters() {
@@ -160,13 +218,17 @@ export default {
     },
     conversationList() {
       let conversationList = [];
-      const filters = this.conversationFilters;
-      if (this.activeAssigneeTab === 'me') {
-        conversationList = [...this.mineChatsList(filters)];
-      } else if (this.activeAssigneeTab === 'unassigned') {
-        conversationList = [...this.unAssignedChatsList(filters)];
+      if (!this.hasAppliedFilters) {
+        const filters = this.conversationFilters;
+        if (this.activeAssigneeTab === 'me') {
+          conversationList = [...this.mineChatsList(filters)];
+        } else if (this.activeAssigneeTab === 'unassigned') {
+          conversationList = [...this.unAssignedChatsList(filters)];
+        } else {
+          conversationList = [...this.allChatList(filters)];
+        }
       } else {
-        conversationList = [...this.allChatList(filters)];
+        conversationList = [...this.chatLists];
       }
 
       return conversationList;
@@ -198,6 +260,17 @@ export default {
     });
   },
   methods: {
+    onApplyFilter(payload) {
+      if (this.$route.name !== 'home') {
+        this.$router.push({ name: 'home' });
+      }
+      this.$store.dispatch('conversationPage/reset');
+      this.$store.dispatch('emptyAllConversations');
+      this.fetchFilteredConversations(payload);
+    },
+    onToggleAdvanceFiltersModal() {
+      this.showAdvancedFilters = !this.showAdvancedFilters;
+    },
     getKeyboardListenerParams() {
       const allConversations = this.$refs.activeConversation.querySelectorAll(
         'div.conversations-list div.conversation'
@@ -245,6 +318,7 @@ export default {
     resetAndFetchData() {
       this.$store.dispatch('conversationPage/reset');
       this.$store.dispatch('emptyAllConversations');
+      this.$store.dispatch('clearConversationFilters');
       this.fetchConversations();
     },
     fetchConversations() {
@@ -252,6 +326,23 @@ export default {
         .dispatch('fetchAllConversations', this.conversationFilters)
         .then(() => this.$emit('conversation-load'));
     },
+    loadMoreConversations() {
+      if (!this.hasAppliedFilters) {
+        this.fetchConversations();
+      } else {
+        this.fetchFilteredConversations(this.appliedFilters);
+      }
+    },
+    fetchFilteredConversations(payload) {
+      let page = this.currentFiltersPage + 1;
+      this.$store
+        .dispatch('fetchFilteredConversations', {
+          queryData: filterQueryGenerator(payload),
+          page,
+        })
+        .then(() => this.$emit('conversation-load'));
+      this.showAdvancedFilters = false;
+    },
     updateAssigneeTab(selectedTab) {
       if (this.activeAssigneeTab !== selectedTab) {
         bus.$emit('clearSearchInput');
@@ -273,6 +364,7 @@ export default {
 
 <style scoped lang="scss">
 @import '~dashboard/assets/scss/woot';
+
 .spinner {
   margin-top: var(--space-normal);
   margin-bottom: var(--space-normal);
@@ -295,4 +387,23 @@ export default {
     flex-basis: 46rem;
   }
 }
+.filter--actions {
+  display: flex;
+  align-items: center;
+  .btn-filter {
+    cursor: pointer;
+    i {
+      font-size: var(--font-size-two);
+    }
+  }
+  .btn-clear-filters {
+    color: var(--r-500);
+    cursor: pointer;
+  }
+}
+
+.filter__applied {
+  padding: var(--space-slab) 0 !important;
+  border-bottom: 1px solid var(--color-border);
+}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
new file mode 100644
index 000000000..13ff1fcd6
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -0,0 +1,284 @@
+<template>
+  <div class="column">
+    <woot-modal-header :header-title="$t('FILTER.TITLE')">
+      <p>{{ $t('FILTER.SUBTITLE') }}</p>
+    </woot-modal-header>
+    <div class="row modal-content">
+      <div class="medium-12 columns">
+        <filter-input-box
+          v-for="(filter, i) in appliedFilters"
+          :key="i"
+          v-model="appliedFilters[i]"
+          :filter-attributes="filterAttributes"
+          :input-type="getInputType(appliedFilters[i].attribute_key)"
+          :operators="getOperators(appliedFilters[i].attribute_key)"
+          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
+          :show-query-operator="i !== appliedFilters.length - 1"
+          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
+          :v="$v.appliedFilters.$each[i]"
+          @resetFilter="resetFilter(i, appliedFilters[i])"
+          @removeFilter="removeFilter(i)"
+        />
+        <div class="filter-actions">
+          <button class="append-filter-btn" @click="appendNewFilter">
+            <i class="icon ion-plus-circled margin-right-small" />
+            <span>{{ $t('FILTER.ADD_NEW_FILTER') }}</span>
+          </button>
+        </div>
+        <div class="modal-footer justify-content-end w-full">
+          <woot-button class="button clear" @click.prevent="onClose">
+            {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button @click="submitFilterQuery">
+            {{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
+          </woot-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import { required, requiredIf } from 'vuelidate/lib/validators';
+import filterInputBox from './components/FilterInput.vue';
+import languages from './advancedFilterItems/languages';
+import countries from './advancedFilterItems/countries';
+
+export default {
+  components: {
+    filterInputBox,
+  },
+  mixins: [alertMixin],
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    filterTypes: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  validations: {
+    appliedFilters: {
+      required,
+      $each: {
+        values: {
+          required: requiredIf(prop => {
+            let userInputRequired = true;
+            if (
+              prop.filter_operator !== 'is_present' ||
+              prop.filter_operator !== 'is_not_present'
+            )
+              userInputRequired = false;
+            return userInputRequired;
+          }),
+        },
+      },
+    },
+  },
+  data() {
+    return {
+      show: true,
+      appliedFilters: [],
+    };
+  },
+  computed: {
+    filterAttributes() {
+      return this.filterTypes.map(type => {
+        return {
+          key: type.attributeKey,
+          name: type.attributeName,
+          attributeI18nKey: type.attributeI18nKey,
+        };
+      });
+    },
+    getAppliedFilters() {
+      return this.$store.getters.getAppliedFilters;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('campaigns/get');
+    if (this.getAppliedFilters.length) {
+      this.appliedFilters = this.getAppliedFilters;
+    } else {
+      this.appliedFilters.push({
+        attribute_key: 'status',
+        filter_operator: 'equal_to',
+        values: '',
+        query_operator: 'and',
+      });
+    }
+  },
+  methods: {
+    getInputType(key) {
+      const type = this.filterTypes.find(filter => filter.attributeKey === key);
+      return type.inputType;
+    },
+    getOperators(key) {
+      const type = this.filterTypes.find(filter => filter.attributeKey === key);
+      return type.filterOperators;
+    },
+    // eslint-disable-next-line consistent-return
+    getDropdownValues(type) {
+      const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
+      switch (type) {
+        case 'status':
+          return [
+            ...Object.keys(statusFilters).map(status => {
+              return {
+                id: status,
+                name: statusFilters[status].TEXT,
+              };
+            }),
+            {
+              id: 'all',
+              name: this.$t('CHAT_LIST.FILTER_ALL'),
+            },
+          ];
+        case 'assignee_id':
+          return this.$store.getters['agents/getAgents'];
+        case 'contact':
+          return this.$store.getters['contacts/getContacts'];
+        case 'inbox_id':
+          return this.$store.getters['inboxes/getInboxes'];
+        case 'team_id':
+          return this.$store.getters['teams/getTeams'];
+        case 'campaign_id':
+          return this.$store.getters['campaigns/getAllCampaigns'].map(i => {
+            return {
+              id: i.id,
+              name: i.title,
+            };
+          });
+        case 'labels':
+          return this.$store.getters['labels/getLabels'].map(i => {
+            return {
+              id: i.id,
+              name: i.title,
+            };
+          });
+        case 'browser_language':
+          return languages;
+        case 'country_code':
+          return countries;
+        default:
+          break;
+      }
+    },
+    appendNewFilter() {
+      this.appliedFilters.push({
+        attribute_key: 'status',
+        filter_operator: 'equal_to',
+        values: '',
+        query_operator: 'and',
+      });
+    },
+    removeFilter(index) {
+      if (this.appliedFilters.length <= 1) {
+        this.showAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
+      } else {
+        this.appliedFilters.splice(index, 1);
+      }
+    },
+    submitFilterQuery() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.appliedFilters[this.appliedFilters.length - 1].query_operator = null;
+      this.$store.dispatch(
+        'setConversationFilters',
+        JSON.parse(JSON.stringify(this.appliedFilters))
+      );
+      this.$emit('applyFilter', this.appliedFilters);
+    },
+    resetFilter(index, currentFilter) {
+      this.appliedFilters[index].filter_operator = this.filterTypes.find(
+        filter => filter.attributeKey === currentFilter.attribute_key
+      ).filterOperators[0].value;
+      this.appliedFilters[index].values = '';
+    },
+    showUserInput(operatorType) {
+      if (operatorType === 'is_present' || operatorType === 'is_not_present')
+        return false;
+      return true;
+    },
+  },
+};
+</script>
+
+<style>
+.filter-modal-content {
+  border: 1px solid var(--color-border);
+  border-radius: var(--space-half);
+  padding: var(--space-one);
+}
+.filter--attributes {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--space-one);
+}
+.filter--attribute_clearbtn {
+  font-size: var(--space-two);
+  margin-left: var(--space-one);
+  cursor: pointer;
+}
+.filter--attributes_select {
+  margin-bottom: var(--space-zero) !important;
+}
+
+.filter--values_select {
+  margin-bottom: var(--space-zero) !important;
+}
+
+.padding-right-small {
+  padding-right: var(--space-one);
+}
+.margin-right-small {
+  margin-right: var(--space-three-fourths);
+}
+.append-filter-btn {
+  width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: var(--space-one-fourths);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-woot);
+  font-size: var(--font-size-one-and-half);
+  padding: var(--space-one);
+  height: var(----space-medium);
+  cursor: pointer;
+}
+.filter-actions {
+  margin: var(--space-two) var(--space-zero) var(--space-one) var(--space-zero);
+}
+.filter--attributes_input {
+  margin-bottom: var(--space-zero) !important;
+}
+.filter--query_operator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin: var(--space-one) var(--space-zero);
+}
+.filter--query_operator_line {
+  position: absolute;
+  z-index: var(--z-index-low);
+  width: 100%;
+  border-bottom: 1px solid var(--color-border);
+}
+.filter--query_operator_container {
+  position: relative;
+  z-index: var(--z-index-twenty);
+  margin: var(--space-zero);
+}
+.filter--query_operator_select {
+  width: 100%;
+  margin-bottom: var(--space-zero) !important;
+  border: none;
+  padding: var(--space-zero) var(--space-three) var(--space-zero)
+    var(--space-two);
+}
+</style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/countries.js b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/countries.js
new file mode 100644
index 000000000..fd2deffd2
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/countries.js
@@ -0,0 +1,257 @@
+const countries = [
+  { name: 'Afghanistan', id: 'AF' },
+  { name: 'Åland Islands', id: 'AX' },
+  { name: 'Albania', id: 'AL' },
+  { name: 'Algeria', id: 'DZ' },
+  { name: 'American Samoa', id: 'AS' },
+  { name: 'Andorra', id: 'AD' },
+  { name: 'Angola', id: 'AO' },
+  { name: 'Anguilla', id: 'AI' },
+  { name: 'Antarctica', id: 'AQ' },
+  { name: 'Antigua and Barbuda', id: 'AG' },
+  { name: 'Argentina', id: 'AR' },
+  { name: 'Armenia', id: 'AM' },
+  { name: 'Aruba', id: 'AW' },
+  { name: 'Australia', id: 'AU' },
+  { name: 'Austria', id: 'AT' },
+  { name: 'Azerbaijan', id: 'AZ' },
+  { name: 'Bahamas', id: 'BS' },
+  { name: 'Bahrain', id: 'BH' },
+  { name: 'Bangladesh', id: 'BD' },
+  { name: 'Barbados', id: 'BB' },
+  { name: 'Belarus', id: 'BY' },
+  { name: 'Belgium', id: 'BE' },
+  { name: 'Belize', id: 'BZ' },
+  { name: 'Benin', id: 'BJ' },
+  { name: 'Bermuda', id: 'BM' },
+  { name: 'Bhutan', id: 'BT' },
+  { name: 'Bolivia (Plurinational State of)', id: 'BO' },
+  { name: 'Bonaire, Sint Eustatius and Saba', id: 'BQ' },
+  { name: 'Bosnia and Herzegovina', id: 'BA' },
+  { name: 'Botswana', id: 'BW' },
+  { name: 'Bouvet Island', id: 'BV' },
+  { name: 'Brazil', id: 'BR' },
+  { name: 'British Indian Ocean Territory', id: 'IO' },
+  { name: 'United States Minor Outlying Islands', id: 'UM' },
+  { name: 'Virgin Islands (British)', id: 'VG' },
+  { name: 'Virgin Islands (U.S.)', id: 'VI' },
+  { name: 'Brunei Darussalam', id: 'BN' },
+  { name: 'Bulgaria', id: 'BG' },
+  { name: 'Burkina Faso', id: 'BF' },
+  { name: 'Burundi', id: 'BI' },
+  { name: 'Cambodia', id: 'KH' },
+  { name: 'Cameroon', id: 'CM' },
+  { name: 'Canada', id: 'CA' },
+  { name: 'Cabo Verde', id: 'CV' },
+  { name: 'Cayman Islands', id: 'KY' },
+  { name: 'Central African Republic', id: 'CF' },
+  { name: 'Chad', id: 'TD' },
+  { name: 'Chile', id: 'CL' },
+  { name: 'China', id: 'CN' },
+  { name: 'Christmas Island', id: 'CX' },
+  { name: 'Cocos (Keeling) Islands', id: 'CC' },
+  { name: 'Colombia', id: 'CO' },
+  { name: 'Comoros', id: 'KM' },
+  { name: 'Congo', id: 'CG' },
+  { name: 'Congo (Democratic Republic of the)', id: 'CD' },
+  { name: 'Cook Islands', id: 'CK' },
+  { name: 'Costa Rica', id: 'CR' },
+  { name: 'Croatia', id: 'HR' },
+  { name: 'Cuba', id: 'CU' },
+  { name: 'Curaçao', id: 'CW' },
+  { name: 'Cyprus', id: 'CY' },
+  { name: 'Czech Republic', id: 'CZ' },
+  { name: 'Denmark', id: 'DK' },
+  { name: 'Djibouti', id: 'DJ' },
+  { name: 'Dominica', id: 'DM' },
+  { name: 'Dominican Republic', id: 'DO' },
+  { name: 'Ecuador', id: 'EC' },
+  { name: 'Egypt', id: 'EG' },
+  { name: 'El Salvador', id: 'SV' },
+  { name: 'Equatorial Guinea', id: 'GQ' },
+  { name: 'Eritrea', id: 'ER' },
+  { name: 'Estonia', id: 'EE' },
+  { name: 'Ethiopia', id: 'ET' },
+  { name: 'Falkland Islands (Malvinas)', id: 'FK' },
+  { name: 'Faroe Islands', id: 'FO' },
+  { name: 'Fiji', id: 'FJ' },
+  { name: 'Finland', id: 'FI' },
+  { name: 'France', id: 'FR' },
+  { name: 'French Guiana', id: 'GF' },
+  { name: 'French Polynesia', id: 'PF' },
+  { name: 'French Southern Territories', id: 'TF' },
+  { name: 'Gabon', id: 'GA' },
+  { name: 'Gambia', id: 'GM' },
+  { name: 'Georgia', id: 'GE' },
+  { name: 'Germany', id: 'DE' },
+  { name: 'Ghana', id: 'GH' },
+  { name: 'Gibraltar', id: 'GI' },
+  { name: 'Greece', id: 'GR' },
+  { name: 'Greenland', id: 'GL' },
+  { name: 'Grenada', id: 'GD' },
+  { name: 'Guadeloupe', id: 'GP' },
+  { name: 'Guam', id: 'GU' },
+  { name: 'Guatemala', id: 'GT' },
+  { name: 'Guernsey', id: 'GG' },
+  { name: 'Guinea', id: 'GN' },
+  { name: 'Guinea-Bissau', id: 'GW' },
+  { name: 'Guyana', id: 'GY' },
+  { name: 'Haiti', id: 'HT' },
+  { name: 'Heard Island and McDonald Islands', id: 'HM' },
+  { name: 'Vatican City', id: 'VA' },
+  { name: 'Honduras', id: 'HN' },
+  { name: 'Hungary', id: 'HU' },
+  { name: 'Hong Kong', id: 'HK' },
+  { name: 'Iceland', id: 'IS' },
+  { name: 'India', id: 'IN' },
+  { name: 'Indonesia', id: 'ID' },
+  { name: 'Ivory Coast', id: 'CI' },
+  { name: 'Iran (Islamic Republic of)', id: 'IR' },
+  { name: 'Iraq', id: 'IQ' },
+  { name: 'Ireland', id: 'IE' },
+  { name: 'Isle of Man', id: 'IM' },
+  { name: 'Israel', id: 'IL' },
+  { name: 'Italy', id: 'IT' },
+  { name: 'Jamaica', id: 'JM' },
+  { name: 'Japan', id: 'JP' },
+  { name: 'Jersey', id: 'JE' },
+  { name: 'Jordan', id: 'JO' },
+  { name: 'Kazakhstan', id: 'KZ' },
+  { name: 'Kenya', id: 'KE' },
+  { name: 'Kiribati', id: 'KI' },
+  { name: 'Kuwait', id: 'KW' },
+  { name: 'Kyrgyzstan', id: 'KG' },
+  { name: "Lao People's Democratic Republic", id: 'LA' },
+  { name: 'Latvia', id: 'LV' },
+  { name: 'Lebanon', id: 'LB' },
+  { name: 'Lesotho', id: 'LS' },
+  { name: 'Liberia', id: 'LR' },
+  { name: 'Libya', id: 'LY' },
+  { name: 'Liechtenstein', id: 'LI' },
+  { name: 'Lithuania', id: 'LT' },
+  { name: 'Luxembourg', id: 'LU' },
+  { name: 'Macao', id: 'MO' },
+  { name: 'North Macedonia', id: 'MK' },
+  { name: 'Madagascar', id: 'MG' },
+  { name: 'Malawi', id: 'MW' },
+  { name: 'Malaysia', id: 'MY' },
+  { name: 'Maldives', id: 'MV' },
+  { name: 'Mali', id: 'ML' },
+  { name: 'Malta', id: 'MT' },
+  { name: 'Marshall Islands', id: 'MH' },
+  { name: 'Martinique', id: 'MQ' },
+  { name: 'Mauritania', id: 'MR' },
+  { name: 'Mauritius', id: 'MU' },
+  { name: 'Mayotte', id: 'YT' },
+  { name: 'Mexico', id: 'MX' },
+  { name: 'Micronesia (Federated States of)', id: 'FM' },
+  { name: 'Moldova (Republic of)', id: 'MD' },
+  { name: 'Monaco', id: 'MC' },
+  { name: 'Mongolia', id: 'MN' },
+  { name: 'Montenegro', id: 'ME' },
+  { name: 'Montserrat', id: 'MS' },
+  { name: 'Morocco', id: 'MA' },
+  { name: 'Mozambique', id: 'MZ' },
+  { name: 'Myanmar', id: 'MM' },
+  { name: 'Namibia', id: 'NA' },
+  { name: 'Nauru', id: 'NR' },
+  { name: 'Nepal', id: 'NP' },
+  { name: 'Netherlands', id: 'NL' },
+  { name: 'New Caledonia', id: 'NC' },
+  { name: 'New Zealand', id: 'NZ' },
+  { name: 'Nicaragua', id: 'NI' },
+  { name: 'Niger', id: 'NE' },
+  { name: 'Nigeria', id: 'NG' },
+  { name: 'Niue', id: 'NU' },
+  { name: 'Norfolk Island', id: 'NF' },
+  { name: "Korea (Democratic People's Republic of)", id: 'KP' },
+  { name: 'Northern Mariana Islands', id: 'MP' },
+  { name: 'Norway', id: 'NO' },
+  { name: 'Oman', id: 'OM' },
+  { name: 'Pakistan', id: 'PK' },
+  { name: 'Palau', id: 'PW' },
+  { name: 'Palestine, State of', id: 'PS' },
+  { name: 'Panama', id: 'PA' },
+  { name: 'Papua New Guinea', id: 'PG' },
+  { name: 'Paraguay', id: 'PY' },
+  { name: 'Peru', id: 'PE' },
+  { name: 'Philippines', id: 'PH' },
+  { name: 'Pitcairn', id: 'PN' },
+  { name: 'Poland', id: 'PL' },
+  { name: 'Portugal', id: 'PT' },
+  { name: 'Puerto Rico', id: 'PR' },
+  { name: 'Qatar', id: 'QA' },
+  { name: 'Republic of Kosovo', id: 'XK' },
+  { name: 'Réunion', id: 'RE' },
+  { name: 'Romania', id: 'RO' },
+  { name: 'Russian Federation', id: 'RU' },
+  { name: 'Rwanda', id: 'RW' },
+  { name: 'Saint Barthélemy', id: 'BL' },
+  { name: 'Saint Helena, Ascension and Tristan da Cunha', id: 'SH' },
+  { name: 'Saint Kitts and Nevis', id: 'KN' },
+  { name: 'Saint Lucia', id: 'LC' },
+  { name: 'Saint Martin (French part)', id: 'MF' },
+  { name: 'Saint Pierre and Miquelon', id: 'PM' },
+  { name: 'Saint Vincent and the Grenadines', id: 'VC' },
+  { name: 'Samoa', id: 'WS' },
+  { name: 'San Marino', id: 'SM' },
+  { name: 'Sao Tome and Principe', id: 'ST' },
+  { name: 'Saudi Arabia', id: 'SA' },
+  { name: 'Senegal', id: 'SN' },
+  { name: 'Serbia', id: 'RS' },
+  { name: 'Seychelles', id: 'SC' },
+  { name: 'Sierra Leone', id: 'SL' },
+  { name: 'Singapore', id: 'SG' },
+  { name: 'Sint Maarten (Dutch part)', id: 'SX' },
+  { name: 'Slovakia', id: 'SK' },
+  { name: 'Slovenia', id: 'SI' },
+  { name: 'Solomon Islands', id: 'SB' },
+  { name: 'Somalia', id: 'SO' },
+  { name: 'South Africa', id: 'ZA' },
+  { name: 'South Georgia and the South Sandwich Islands', id: 'GS' },
+  { name: 'Korea (Republic of)', id: 'KR' },
+  { name: 'Spain', id: 'ES' },
+  { name: 'Sri Lanka', id: 'LK' },
+  { name: 'Sudan', id: 'SD' },
+  { name: 'South Sudan', id: 'SS' },
+  { name: 'Suriname', id: 'SR' },
+  { name: 'Svalbard and Jan Mayen', id: 'SJ' },
+  { name: 'Swaziland', id: 'SZ' },
+  { name: 'Sweden', id: 'SE' },
+  { name: 'Switzerland', id: 'CH' },
+  { name: 'Syrian Arab Republic', id: 'SY' },
+  { name: 'Taiwan', id: 'TW' },
+  { name: 'Tajikistan', id: 'TJ' },
+  { name: 'Tanzania, United Republic of', id: 'TZ' },
+  { name: 'Thailand', id: 'TH' },
+  { name: 'Timor-Leste', id: 'TL' },
+  { name: 'Togo', id: 'TG' },
+  { name: 'Tokelau', id: 'TK' },
+  { name: 'Tonga', id: 'TO' },
+  { name: 'Trinidad and Tobago', id: 'TT' },
+  { name: 'Tunisia', id: 'TN' },
+  { name: 'Turkey', id: 'TR' },
+  { name: 'Turkmenistan', id: 'TM' },
+  { name: 'Turks and Caicos Islands', id: 'TC' },
+  { name: 'Tuvalu', id: 'TV' },
+  { name: 'Uganda', id: 'UG' },
+  { name: 'Ukraine', id: 'UA' },
+  { name: 'United Arab Emirates', id: 'AE' },
+  {
+    name: 'United Kingdom of Great Britain and Northern Ireland',
+    id: 'GB',
+  },
+  { name: 'United States of America', id: 'US' },
+  { name: 'Uruguay', id: 'UY' },
+  { name: 'Uzbekistan', id: 'UZ' },
+  { name: 'Vanuatu', id: 'VU' },
+  { name: 'Venezuela (Bolivarian Republic of)', id: 'VE' },
+  { name: 'Vietnam', id: 'VN' },
+  { name: 'Wallis and Futuna', id: 'WF' },
+  { name: 'Western Sahara', id: 'EH' },
+  { name: 'Yemen', id: 'YE' },
+  { name: 'Zambia', id: 'ZM' },
+  { name: 'Zimbabwe', id: 'ZW' },
+];
+
+export default countries;
diff --git a/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js
new file mode 100644
index 000000000..3cf8dc6ce
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js
@@ -0,0 +1,230 @@
+const filterTypes = [
+  {
+    attributeKey: 'status',
+    attributeI18nKey: 'STATUS',
+    inputType: 'multi_select',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'assignee_id',
+    attributeI18nKey: 'ASSIGNEE_NAME',
+    inputType: 'search_select',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'inbox_id',
+    attributeI18nKey: 'INBOX_NAME',
+    inputType: 'search_select',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'team_id',
+    attributeI18nKey: 'TEAM_NAME',
+    inputType: 'search_select',
+    dataType: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'display_id',
+    attributeI18nKey: 'CONVERSATION_IDENTIFIER',
+    inputType: 'plain_text',
+    dataType: 'Number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'campaign_id',
+    attributeI18nKey: 'CAMPAIGN_NAME',
+    inputType: 'search_select',
+    dataType: 'Number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'labels',
+    attributeI18nKey: 'LABELS',
+    inputType: 'multi_select',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'is_present',
+        label: 'Is present',
+      },
+      {
+        value: 'is_not_present',
+        label: 'Is not present',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'browser_language',
+    attributeI18nKey: 'BROWSER_LANGUAGE',
+    inputType: 'search_select',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+    ],
+    attribute_type: 'additional_attributes',
+  },
+  {
+    attributeKey: 'country_code',
+    attributeI18nKey: 'COUNTRY_NAME',
+    inputType: 'search_select',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+    ],
+    attribute_type: 'additional_attributes',
+  },
+  {
+    attributeKey: 'referer',
+    attributeI18nKey: 'REFERER_LINK',
+    inputType: 'plain_text',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+      },
+    ],
+    attribute_type: 'additional_attributes',
+  },
+];
+
+export default filterTypes;
diff --git a/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js
new file mode 100644
index 000000000..093eda3b9
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js
@@ -0,0 +1,132 @@
+const languages = [
+  {
+    id: 'eng',
+    name: 'English (en)',
+  },
+  {
+    id: 'ar',
+    name: 'العربية (ar)',
+  },
+  {
+    id: 'nl',
+    name: 'Nederlands (nl)',
+  },
+  {
+    id: 'fr',
+    name: 'Français (fr)',
+  },
+  {
+    id: 'de',
+    name: 'Deutsch (de)',
+  },
+  {
+    id: 'हिन्दी (hi)',
+    name: 'hi',
+  },
+  {
+    id: 'it',
+    name: 'Italiano (it)',
+  },
+  {
+    id: 'ja',
+    name: '日本語 (ja)',
+  },
+  {
+    id: 'ko',
+    name: '한국어 (ko)',
+  },
+  {
+    id: 'pt',
+    name: 'Português (pt)',
+  },
+  {
+    id: 'ru',
+    name: 'русский (ru)',
+  },
+  {
+    id: 'zh',
+    name: '中文 (zh)',
+  },
+  {
+    id: 'es',
+    name: 'Español (es)',
+  },
+  {
+    id: 'ml',
+    name: 'മലയാളം (ml)',
+  },
+  {
+    id: 'ca',
+    name: 'Català (ca)',
+  },
+  {
+    id: 'el',
+    name: 'ελληνικά (el)',
+  },
+  {
+    id: 'pt-BR',
+    name: 'Português Brasileiro (pt-BR)',
+  },
+  {
+    id: 'ro',
+    name: 'Română (ro)',
+  },
+  {
+    id: 'ta',
+    name: 'தமிழ் (ta)',
+  },
+  {
+    id: 'fa',
+    name: 'فارسی (fa)',
+  },
+  {
+    id: 'zh-TW',
+    name: '中文 (台湾) (zh-TW)',
+  },
+  {
+    id: 'vi',
+    name: 'Tiếng Việt (vi)',
+  },
+  {
+    id: 'da',
+    name: 'dansk (da)',
+  },
+  {
+    id: 'tr',
+    name: 'Türkçe (tr)',
+  },
+  {
+    id: 'cs',
+    name: 'čeština (cs)',
+  },
+  {
+    id: 'fi',
+    name: 'suomi, suomen kieli (fi)',
+  },
+  {
+    id: 'id',
+    name: 'Bahasa Indonesia (id)',
+  },
+  {
+    id: 'sv',
+    name: 'Svenska (sv)',
+  },
+  {
+    id: 'hu',
+    name: 'magyar nyelv (hu)',
+  },
+  {
+    id: 'no',
+    name: 'norsk (no)',
+  },
+  {
+    id: 'zh-CN',
+    name: '中文 (zh-CN)',
+  },
+  {
+    id: 'pl',
+    name: 'język polski (pl)',
+  },
+];
+
+export default languages;
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
new file mode 100644
index 000000000..a9f00fa57
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="filters">
+    <div class="filter--attributes">
+      <select
+        v-model="attribute_key"
+        class="filter--attributes_select"
+        @change="resetFilter()"
+      >
+        <option
+          v-for="attribute in filterAttributes"
+          :key="attribute.key"
+          :value="attribute.key"
+        >
+          {{ $t(`FILTER.ATTRIBUTES.${attribute.attributeI18nKey}`) }}
+        </option>
+      </select>
+      <button class="filter--attribute_clearbtn" @click="removeFilter">
+        <i class="icon ion-close-circled" />
+      </button>
+    </div>
+    <div class="filter-values">
+      <div class="row">
+        <div
+          class="columns padding-right-small"
+          :class="showUserInput ? 'small-4' : 'small-12'"
+        >
+          <select v-model="filter_operator" class="filter--values_select">
+            <option
+              v-for="(operator, o) in operators"
+              :key="o"
+              :value="operator.value"
+            >
+              {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
+            </option>
+          </select>
+        </div>
+        <div v-if="showUserInput" class="small-8 columns">
+          <div
+            v-if="inputType === 'multi_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="values"
+              track-by="id"
+              label="name"
+              :placeholder="'Select'"
+              :multiple="true"
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :options="dropdownValues"
+              :allow-empty="false"
+            />
+          </div>
+          <div
+            v-else-if="inputType === 'search_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="values"
+              track-by="id"
+              label="name"
+              :placeholder="'Select'"
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :options="dropdownValues"
+              :allow-empty="false"
+              :option-height="104"
+            />
+          </div>
+          <input
+            v-else
+            v-model="values"
+            type="text"
+            class="filter--attributes_input"
+            placeholder="Enter value"
+          />
+          <div v-if="v.values.$dirty && v.values.$error" class="filter-error">
+            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="showQueryOperator" class="filter--query_operator">
+      <hr class="filter--query_operator_line" />
+      <div class="filter--query_operator_container">
+        <select v-model="query_operator" class="filter--query_operator_select">
+          <option value="and">
+            {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
+          </option>
+          <option value="or">
+            {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: () => null,
+    },
+    filterAttributes: {
+      type: Array,
+      default: () => [],
+    },
+    inputType: {
+      type: String,
+      default: 'plain_text',
+    },
+    operators: {
+      type: Array,
+      default: () => [],
+    },
+    dropdownValues: {
+      type: Array,
+      default: () => [],
+    },
+    showQueryOperator: {
+      type: Boolean,
+      default: false,
+    },
+    v: {
+      type: Object,
+      default: () => null,
+    },
+    showUserInput: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    attribute_key: {
+      get() {
+        if (!this.value) return null;
+        return this.value.attribute_key;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, attribute_key: value });
+      },
+    },
+    filter_operator: {
+      get() {
+        if (!this.value) return null;
+        return this.value.filter_operator;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, filter_operator: value });
+      },
+    },
+    values: {
+      get() {
+        if (!this.value) return null;
+        return this.value.values;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, values: value });
+      },
+    },
+    query_operator: {
+      get() {
+        if (!this.value) return null;
+        return this.value.query_operator;
+      },
+      set(value) {
+        const payload = this.value || {};
+        this.$emit('input', { ...payload, query_operator: value });
+      },
+    },
+  },
+  methods: {
+    removeFilter() {
+      this.$emit('removeFilter');
+    },
+    resetFilter() {
+      this.$emit('resetFilter');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.multiselect {
+  margin-bottom: var(--space-zero) !important;
+}
+.filter-error {
+  color: var(--r-500);
+}
+</style>
diff --git a/app/javascript/dashboard/helper/filterQueryGenerator.js b/app/javascript/dashboard/helper/filterQueryGenerator.js
new file mode 100644
index 000000000..f2fbd39aa
--- /dev/null
+++ b/app/javascript/dashboard/helper/filterQueryGenerator.js
@@ -0,0 +1,18 @@
+const generatePayload = data => {
+  let payload = data.map(item => {
+    if (Array.isArray(item.values)) {
+      item.values = item.values.map(val => val.id);
+    } else if (typeof item.values === 'object') {
+      item.values = [item.values.id];
+    } else if (!item.values) {
+      item.values = [];
+    } else {
+      item.values = [item.values];
+    }
+    return item;
+  });
+
+  return { payload };
+};
+
+export default generatePayload;
diff --git a/app/javascript/dashboard/helper/specs/filterQueryGenerator.spec.js b/app/javascript/dashboard/helper/specs/filterQueryGenerator.spec.js
new file mode 100644
index 000000000..aee524c5e
--- /dev/null
+++ b/app/javascript/dashboard/helper/specs/filterQueryGenerator.spec.js
@@ -0,0 +1,68 @@
+import filterQueryGenerator from '../filterQueryGenerator';
+
+const testData = [
+  {
+    attribute_key: 'status',
+    filter_operator: 'equal_to',
+    values: [
+      { id: 'pending', name: 'Pending' },
+      { id: 'resolved', name: 'Resolved' },
+    ],
+    query_operator: 'and',
+  },
+  {
+    attribute_key: 'assignee',
+    filter_operator: 'equal_to',
+    values: {
+      id: 3,
+      account_id: 1,
+      auto_offline: true,
+      confirmed: true,
+      email: 'fayazara@gmail.com',
+      available_name: 'Fayaz',
+      name: 'Fayaz',
+      role: 'agent',
+      thumbnail:
+        'https://www.gravatar.com/avatar/a35bf18a632f734c8d0c883dcc9fa0ef?d=404',
+    },
+    query_operator: 'and',
+  },
+  {
+    attribute_key: 'id',
+    filter_operator: 'equal_to',
+    values: 'This is a test',
+    query_operator: null,
+  },
+];
+
+const finalResult = {
+  payload: [
+    {
+      attribute_key: 'status',
+      filter_operator: 'equal_to',
+      values: ['pending', 'resolved'],
+      query_operator: 'and',
+    },
+    {
+      attribute_key: 'assignee',
+      filter_operator: 'equal_to',
+      values: [3],
+      query_operator: 'and',
+    },
+    {
+      attribute_key: 'id',
+      filter_operator: 'equal_to',
+      values: ['This is a test'],
+      query_operator: null,
+    },
+  ],
+};
+
+describe('#filterQueryGenerator', () => {
+  it('returns the correct format of filter query', () => {
+    expect(filterQueryGenerator(testData)).toMatchObject(finalResult);
+    expect(
+      filterQueryGenerator(testData).payload.every(i => Array.isArray(i.values))
+    ).toBe(true);
+  });
+});
diff --git a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
new file mode 100644
index 000000000..0d4a5fc4d
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
@@ -0,0 +1,37 @@
+{
+  "FILTER": {
+    "TITLE": "Filter Conversations",
+    "SUBTITLE": "Add filters below and hit 'Submit' to filter conversations.",
+    "ADD_NEW_FILTER": "Add Filter",
+    "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
+    "SUBMIT_BUTTON_LABEL": "Submit",
+    "CANCEL_BUTTON_LABEL": "Cancel",
+    "CLEAR_BUTTON_LABEL": "Clear Filters",
+    "EMPTY_VALUE_ERROR": "Value is required",
+    "TOOLTIP_LABEL": "Filter conversations",
+    "QUERY_DROPDOWN_LABELS": {
+      "AND": "AND",
+      "OR": "OR"
+    },
+    "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"
+    },
+    "ATTRIBUTES": {
+      "STATUS": "Status",
+      "ASSIGNEE_NAME": "Assignee Name",
+      "INBOX_NAME": "Inbox Name",
+      "TEAM_NAME": "Team Name",
+      "CONVERSATION_IDENTIFIER": "Conversation Identifier",
+      "CAMPAIGN_NAME": "Campaign Name",
+      "LABELS": "Labels",
+      "BROWSER_LANGUAGE": "Browser Language",
+      "COUNTRY_NAME": "Country Name",
+      "REFERER_LINK": "Referer link"
+    }
+  }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index 9e81e9e76..9555b40b3 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -18,6 +18,7 @@ import { default as _setNewPassword } from './setNewPassword.json';
 import { default as _settings } from './settings.json';
 import { default as _signup } from './signup.json';
 import { default as _teamsSettings } from './teamsSettings.json';
+import { default as _advancedFilters } from './advancedFilters.json';
 import { default as _automation } from './automation.json';
 
 export default {
@@ -41,5 +42,6 @@ export default {
   ..._settings,
   ..._signup,
   ..._teamsSettings,
+  ..._advancedFilters,
   ..._automation,
 };
diff --git a/app/javascript/dashboard/store/modules/campaigns.js b/app/javascript/dashboard/store/modules/campaigns.js
index 1b20ba662..63ca3b923 100644
--- a/app/javascript/dashboard/store/modules/campaigns.js
+++ b/app/javascript/dashboard/store/modules/campaigns.js
@@ -19,6 +19,9 @@ export const getters = {
       record => record.campaign_type === campaignType
     );
   },
+  getAllCampaigns: _state => {
+    return _state.records;
+  },
 };
 
 export const actions = {
diff --git a/app/javascript/dashboard/store/modules/conversationPage.js b/app/javascript/dashboard/store/modules/conversationPage.js
index 83f24b071..3c9e6899c 100644
--- a/app/javascript/dashboard/store/modules/conversationPage.js
+++ b/app/javascript/dashboard/store/modules/conversationPage.js
@@ -6,6 +6,7 @@ const state = {
     me: 0,
     unassigned: 0,
     all: 0,
+    appliedFilters: 0,
   },
   hasEndReached: {
     me: false,
@@ -54,12 +55,14 @@ export const mutations = {
       me: 0,
       unassigned: 0,
       all: 0,
+      appliedFilters: 0,
     };
 
     $state.hasEndReached = {
       me: false,
       unassigned: false,
       all: false,
+      appliedFilters: false,
     };
   },
 };
diff --git a/app/javascript/dashboard/store/modules/conversations/actions.js b/app/javascript/dashboard/store/modules/conversations/actions.js
index bd8b6b65f..aba6e9ece 100644
--- a/app/javascript/dashboard/store/modules/conversations/actions.js
+++ b/app/javascript/dashboard/store/modules/conversations/actions.js
@@ -5,6 +5,42 @@ import MessageApi from '../../../api/inbox/message';
 import { MESSAGE_STATUS, MESSAGE_TYPE } from 'shared/constants/messages';
 import { createPendingMessage } from 'dashboard/helper/commons';
 
+const setPageFilter = ({ dispatch, filter, page, markEndReached }) => {
+  dispatch('conversationPage/setCurrentPage', { filter, page }, { root: true });
+  if (markEndReached) {
+    dispatch('conversationPage/setEndReached', { filter }, { root: true });
+  }
+};
+
+const setContacts = (commit, chatList) => {
+  commit(
+    `contacts/${types.SET_CONTACTS}`,
+    chatList.map(chat => chat.meta.sender)
+  );
+};
+
+const buildConversationList = (
+  context,
+  requestPayload,
+  responseData,
+  filterType
+) => {
+  const { payload: conversationList, meta: metaData } = responseData;
+  context.commit(types.SET_ALL_CONVERSATION, conversationList);
+  context.dispatch('conversationStats/set', metaData);
+  context.dispatch(
+    'conversationLabels/setBulkConversationLabels',
+    conversationList
+  );
+  context.commit(types.CLEAR_LIST_LOADING_STATUS);
+  setContacts(context.commit, conversationList);
+  setPageFilter({
+    dispatch: context.dispatch,
+    filter: filterType,
+    page: requestPayload.page,
+    markEndReached: !conversationList.length,
+  });
+};
 // actions
 const actions = {
   getConversation: async ({ commit }, conversationId) => {
@@ -20,30 +56,30 @@ const actions = {
   fetchAllConversations: async ({ commit, dispatch }, params) => {
     commit(types.SET_LIST_LOADING_STATUS);
     try {
-      const response = await ConversationApi.get(params);
       const {
-        data: { payload: chatList, meta: metaData },
-      } = response.data;
-      commit(types.SET_ALL_CONVERSATION, chatList);
-      dispatch('conversationStats/set', metaData);
-      dispatch('conversationLabels/setBulkConversationLabels', chatList);
-      commit(types.CLEAR_LIST_LOADING_STATUS);
-      commit(
-        `contacts/${types.SET_CONTACTS}`,
-        chatList.map(chat => chat.meta.sender)
+        data: { data },
+      } = await ConversationApi.get(params);
+      buildConversationList(
+        { commit, dispatch },
+        params,
+        data,
+        params.assigneeType
       );
-      dispatch(
-        'conversationPage/setCurrentPage',
-        { filter: params.assigneeType, page: params.page },
-        { root: true }
+    } catch (error) {
+      // Handle error
+    }
+  },
+
+  fetchFilteredConversations: async ({ commit, dispatch }, params) => {
+    commit(types.SET_LIST_LOADING_STATUS);
+    try {
+      const { data } = await ConversationApi.filter(params);
+      buildConversationList(
+        { commit, dispatch },
+        params,
+        data,
+        'appliedFilters'
       );
-      if (!chatList.length) {
-        dispatch(
-          'conversationPage/setEndReached',
-          { filter: params.assigneeType },
-          { root: true }
-        );
-      }
     } catch (error) {
       // Handle error
     }
@@ -198,12 +234,15 @@ const actions = {
   },
 
   addConversation({ commit, state, dispatch }, conversation) {
-    const { currentInbox } = state;
+    const { currentInbox, appliedFilters } = state;
     const {
       inbox_id: inboxId,
       meta: { sender },
     } = conversation;
-    if (!currentInbox || Number(currentInbox) === inboxId) {
+    const hasAppliedFilters = !!appliedFilters.length;
+    const isMatchingInboxFilter =
+      !currentInbox || Number(currentInbox) === inboxId;
+    if (!hasAppliedFilters && isMatchingInboxFilter) {
       commit(types.ADD_CONVERSATION, conversation);
       dispatch('contacts/setContact', sender);
     }
@@ -288,6 +327,14 @@ const actions = {
       // Handle error
     }
   },
+
+  setConversationFilters({ commit }, data) {
+    commit(types.SET_CONVERSATION_FILTERS, data);
+  },
+
+  clearConversationFilters({ commit }) {
+    commit(types.CLEAR_CONVERSATION_FILTERS);
+  },
 };
 
 export default actions;
diff --git a/app/javascript/dashboard/store/modules/conversations/getters.js b/app/javascript/dashboard/store/modules/conversations/getters.js
index 79bd0e50a..66682f2b8 100644
--- a/app/javascript/dashboard/store/modules/conversations/getters.js
+++ b/app/javascript/dashboard/store/modules/conversations/getters.js
@@ -31,6 +31,9 @@ const getters = {
       return isChatMine;
     });
   },
+  getAppliedFilters: _state => {
+    return _state.appliedFilters;
+  },
   getUnAssignedChats: _state => activeFilters => {
     return _state.allConversations.filter(conversation => {
       const isUnAssigned = !conversation.meta.assignee;
diff --git a/app/javascript/dashboard/store/modules/conversations/index.js b/app/javascript/dashboard/store/modules/conversations/index.js
index 208ce6648..07475266c 100644
--- a/app/javascript/dashboard/store/modules/conversations/index.js
+++ b/app/javascript/dashboard/store/modules/conversations/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import * as types from '../../mutation-types';
+import types from '../../mutation-types';
 import getters, { getSelectedChatConversation } from './getters';
 import actions from './actions';
 import { findPendingMessageIndex } from './helpers';
@@ -11,11 +11,12 @@ const state = {
   chatStatusFilter: wootConstants.STATUS_TYPE.OPEN,
   currentInbox: null,
   selectedChatId: null,
+  appliedFilters: [],
 };
 
 // mutations
 export const mutations = {
-  [types.default.SET_ALL_CONVERSATION](_state, conversationList) {
+  [types.SET_ALL_CONVERSATION](_state, conversationList) {
     const newAllConversations = [..._state.allConversations];
     conversationList.forEach(conversation => {
       const indexInCurrentList = newAllConversations.findIndex(
@@ -27,47 +28,47 @@ export const mutations = {
     });
     _state.allConversations = newAllConversations;
   },
-  [types.default.EMPTY_ALL_CONVERSATION](_state) {
+  [types.EMPTY_ALL_CONVERSATION](_state) {
     _state.allConversations = [];
     _state.selectedChatId = null;
   },
-  [types.default.SET_ALL_MESSAGES_LOADED](_state) {
+  [types.SET_ALL_MESSAGES_LOADED](_state) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat, 'allMessagesLoaded', true);
   },
 
-  [types.default.CLEAR_ALL_MESSAGES_LOADED](_state) {
+  [types.CLEAR_ALL_MESSAGES_LOADED](_state) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat, 'allMessagesLoaded', false);
   },
-  [types.default.CLEAR_CURRENT_CHAT_WINDOW](_state) {
+  [types.CLEAR_CURRENT_CHAT_WINDOW](_state) {
     _state.selectedChatId = null;
   },
 
-  [types.default.SET_PREVIOUS_CONVERSATIONS](_state, { id, data }) {
+  [types.SET_PREVIOUS_CONVERSATIONS](_state, { id, data }) {
     if (data.length) {
       const [chat] = _state.allConversations.filter(c => c.id === id);
       chat.messages.unshift(...data);
     }
   },
 
-  [types.default.SET_CURRENT_CHAT_WINDOW](_state, activeChat) {
+  [types.SET_CURRENT_CHAT_WINDOW](_state, activeChat) {
     if (activeChat) {
       _state.selectedChatId = activeChat.id;
     }
   },
 
-  [types.default.ASSIGN_AGENT](_state, assignee) {
+  [types.ASSIGN_AGENT](_state, assignee) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat.meta, 'assignee', assignee);
   },
 
-  [types.default.ASSIGN_TEAM](_state, team) {
+  [types.ASSIGN_TEAM](_state, team) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat.meta, 'team', team);
   },
 
-  [types.default.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES](
+  [types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES](
     _state,
     custom_attributes
   ) {
@@ -75,7 +76,7 @@ export const mutations = {
     Vue.set(chat, 'custom_attributes', custom_attributes);
   },
 
-  [types.default.CHANGE_CONVERSATION_STATUS](
+  [types.CHANGE_CONVERSATION_STATUS](
     _state,
     { conversationId, status, snoozedUntil }
   ) {
@@ -85,17 +86,17 @@ export const mutations = {
     Vue.set(conversation, 'status', status);
   },
 
-  [types.default.MUTE_CONVERSATION](_state) {
+  [types.MUTE_CONVERSATION](_state) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat, 'muted', true);
   },
 
-  [types.default.UNMUTE_CONVERSATION](_state) {
+  [types.UNMUTE_CONVERSATION](_state) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat, 'muted', false);
   },
 
-  [types.default.ADD_MESSAGE]({ allConversations, selectedChatId }, message) {
+  [types.ADD_MESSAGE]({ allConversations, selectedChatId }, message) {
     const { conversation_id: conversationId } = message;
     const [chat] = getSelectedChatConversation({
       allConversations,
@@ -115,11 +116,11 @@ export const mutations = {
     }
   },
 
-  [types.default.ADD_CONVERSATION](_state, conversation) {
+  [types.ADD_CONVERSATION](_state, conversation) {
     _state.allConversations.push(conversation);
   },
 
-  [types.default.UPDATE_CONVERSATION](_state, conversation) {
+  [types.UPDATE_CONVERSATION](_state, conversation) {
     const { allConversations } = _state;
     const currentConversationIndex = allConversations.findIndex(
       c => c.id === conversation.id
@@ -139,32 +140,32 @@ export const mutations = {
     }
   },
 
-  [types.default.SET_LIST_LOADING_STATUS](_state) {
+  [types.SET_LIST_LOADING_STATUS](_state) {
     _state.listLoadingStatus = true;
   },
 
-  [types.default.CLEAR_LIST_LOADING_STATUS](_state) {
+  [types.CLEAR_LIST_LOADING_STATUS](_state) {
     _state.listLoadingStatus = false;
   },
 
-  [types.default.MARK_MESSAGE_READ](_state, { id, lastSeen }) {
+  [types.MARK_MESSAGE_READ](_state, { id, lastSeen }) {
     const [chat] = _state.allConversations.filter(c => c.id === id);
     if (chat) {
       chat.agent_last_seen_at = lastSeen;
     }
   },
 
-  [types.default.CHANGE_CHAT_STATUS_FILTER](_state, data) {
+  [types.CHANGE_CHAT_STATUS_FILTER](_state, data) {
     _state.chatStatusFilter = data;
   },
 
   // Update assignee on action cable message
-  [types.default.UPDATE_ASSIGNEE](_state, payload) {
+  [types.UPDATE_ASSIGNEE](_state, payload) {
     const [chat] = _state.allConversations.filter(c => c.id === payload.id);
     Vue.set(chat.meta, 'assignee', payload.assignee);
   },
 
-  [types.default.UPDATE_CONVERSATION_CONTACT](
+  [types.UPDATE_CONVERSATION_CONTACT](
     _state,
     { conversationId, ...payload }
   ) {
@@ -174,11 +175,11 @@ export const mutations = {
     }
   },
 
-  [types.default.SET_ACTIVE_INBOX](_state, inboxId) {
+  [types.SET_ACTIVE_INBOX](_state, inboxId) {
     _state.currentInbox = inboxId ? parseInt(inboxId, 10) : null;
   },
 
-  [types.default.SET_CONVERSATION_CAN_REPLY](
+  [types.SET_CONVERSATION_CAN_REPLY](
     _state,
     { conversationId, canReply }
   ) {
@@ -188,12 +189,20 @@ export const mutations = {
     }
   },
 
-  [types.default.CLEAR_CONTACT_CONVERSATIONS](_state, contactId) {
+  [types.CLEAR_CONTACT_CONVERSATIONS](_state, contactId) {
     const chats = _state.allConversations.filter(
       c => c.meta.sender.id !== contactId
     );
     Vue.set(_state, 'allConversations', chats);
   },
+
+  [types.SET_CONVERSATION_FILTERS](_state, data) {
+    _state.appliedFilters = data;
+  },
+
+  [types.CLEAR_CONVERSATION_FILTERS](_state) {
+    _state.appliedFilters = [];
+  },
 };
 
 export default {
diff --git a/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js b/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js
index 6c096f39c..88ee86a31 100644
--- a/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/campaigns/getters.spec.js
@@ -58,6 +58,11 @@ describe('#getters', () => {
     ]);
   });
 
+  it('get all campaigns', () => {
+    const state = { records: campaigns };
+    expect(getters.getAllCampaigns(state)).toEqual(campaigns);
+  });
+
   it('getUIFlags', () => {
     const state = {
       uiFlags: {
diff --git a/app/javascript/dashboard/store/modules/specs/conversationPage/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/conversationPage/mutations.spec.js
index e589e4c86..49c7570dc 100644
--- a/app/javascript/dashboard/store/modules/specs/conversationPage/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversationPage/mutations.spec.js
@@ -23,8 +23,13 @@ describe('#mutations', () => {
       };
       mutations[types.default.CLEAR_CONVERSATION_PAGE](state);
       expect(state).toEqual({
-        currentPage: { me: 0, unassigned: 0, all: 0 },
-        hasEndReached: { me: false, unassigned: false, all: false },
+        currentPage: { me: 0, unassigned: 0, all: 0, appliedFilters: 0 },
+        hasEndReached: {
+          me: false,
+          unassigned: false,
+          all: false,
+          appliedFilters: false,
+        },
       });
     });
   });
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
index bc02074c6..ad52d8808 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
@@ -1,6 +1,17 @@
 import axios from 'axios';
 import actions from '../../conversations/actions';
 import types from '../../../mutation-types';
+const dataToSend = {
+  payload: [
+    {
+      attribute_key: 'status',
+      filter_operator: 'equal_to',
+      values: ['open'],
+      query_operator: null,
+    },
+  ],
+};
+import { dataReceived } from './testConversationResponse';
 
 const commit = jest.fn();
 const dispatch = jest.fn();
@@ -73,7 +84,30 @@ describe('#actions', () => {
         inbox_id: 2,
       };
       actions.addConversation(
-        { commit, dispatch, state: { currentInbox: 1 } },
+        {
+          commit,
+          dispatch,
+          state: { currentInbox: 1, appliedFilters: [] },
+        },
+        conversation
+      );
+      expect(commit.mock.calls).toEqual([]);
+      expect(dispatch.mock.calls).toEqual([]);
+    });
+
+    it('doesnot send mutation if conversation filters are applied', () => {
+      const conversation = {
+        id: 1,
+        messages: [],
+        meta: { sender: { id: 1, name: 'john-doe' } },
+        inbox_id: 1,
+      };
+      actions.addConversation(
+        {
+          commit,
+          dispatch,
+          state: { currentInbox: 1, appliedFilters: [{ id: 'random-filter' }] },
+        },
         conversation
       );
       expect(commit.mock.calls).toEqual([]);
@@ -88,7 +122,11 @@ describe('#actions', () => {
         inbox_id: 1,
       };
       actions.addConversation(
-        { commit, dispatch, state: { currentInbox: 1 } },
+        {
+          commit,
+          dispatch,
+          state: { currentInbox: 1, appliedFilters: [] },
+        },
         conversation
       );
       expect(commit.mock.calls).toEqual([
@@ -112,7 +150,10 @@ describe('#actions', () => {
         meta: { sender: { id: 1, name: 'john-doe' } },
         inbox_id: 1,
       };
-      actions.addConversation({ commit, dispatch, state: {} }, conversation);
+      actions.addConversation(
+        { commit, dispatch, state: { appliedFilters: [] } },
+        conversation
+      );
       expect(commit.mock.calls).toEqual([
         [types.ADD_CONVERSATION, conversation],
       ]);
@@ -262,6 +303,44 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#fetchFilteredConversations', () => {
+    it('fetches filtered conversations with a mock commit', async () => {
+      axios.post.mockResolvedValue({
+        data: dataReceived,
+      });
+      await actions.fetchFilteredConversations({ commit }, dataToSend);
+      expect(commit).toHaveBeenCalledTimes(2);
+      expect(commit.mock.calls).toEqual([
+        ['SET_LIST_LOADING_STATUS'],
+        ['SET_ALL_CONVERSATION', dataReceived.payload],
+      ]);
+    });
+  });
+
+  describe('#setConversationFilter', () => {
+    it('commits the correct mutation and sets filter state', () => {
+      const filters = [
+        {
+          attribute_key: 'status',
+          filter_operator: 'equal_to',
+          values: [{ id: 'snoozed', name: 'Snoozed' }],
+          query_operator: 'and',
+        },
+      ];
+      actions.setConversationFilters({ commit }, filters);
+      expect(commit.mock.calls).toEqual([
+        [types.SET_CONVERSATION_FILTERS, filters],
+      ]);
+    });
+  });
+
+  describe('#clearConversationFilter', () => {
+    it('commits the correct mutation and clears filter state', () => {
+      actions.clearConversationFilters({ commit });
+      expect(commit.mock.calls).toEqual([[types.CLEAR_CONVERSATION_FILTERS]]);
+    });
+  });
 });
 
 describe('#deleteMessage', () => {
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
index 188d77a37..2d5936c17 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
@@ -114,4 +114,21 @@ describe('#getters', () => {
       expect(getters.getConversationById(state)(1)).toEqual({ id: 1 });
     });
   });
+
+  describe('#getAppliedFilters', () => {
+    it('getAppliedFilters', () => {
+      const filtersList = [
+        {
+          attribute_key: 'status',
+          filter_operator: 'equal_to',
+          values: [{ id: 'snoozed', name: 'Snoozed' }],
+          query_operator: 'and',
+        },
+      ];
+      const state = {
+        appliedFilters: filtersList,
+      };
+      expect(getters.getAppliedFilters(state)).toEqual(filtersList);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
index 107b51330..cc08939d0 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
@@ -201,4 +201,43 @@ describe('#mutations', () => {
       });
     });
   });
+
+  describe('#SET_CONVERSATION_FILTERS', () => {
+    it('set conversation filter', () => {
+      const appliedFilters = [
+        {
+          attribute_key: 'status',
+          filter_operator: 'equal_to',
+          values: [{ id: 'snoozed', name: 'Snoozed' }],
+          query_operator: 'and',
+        },
+      ];
+      mutations[types.SET_CONVERSATION_FILTERS](appliedFilters);
+      expect(appliedFilters).toEqual([
+        {
+          attribute_key: 'status',
+          filter_operator: 'equal_to',
+          values: [{ id: 'snoozed', name: 'Snoozed' }],
+          query_operator: 'and',
+        },
+      ]);
+    });
+  });
+
+  describe('#CLEAR_CONVERSATION_FILTERS', () => {
+    it('clears applied conversation filters', () => {
+      const state = {
+        appliedFilters: [
+          {
+            attribute_key: 'status',
+            filter_operator: 'equal_to',
+            values: [{ id: 'snoozed', name: 'Snoozed' }],
+            query_operator: 'and',
+          },
+        ],
+      };
+      mutations[types.CLEAR_CONVERSATION_FILTERS](state);
+      expect(state.appliedFilters).toEqual([]);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/testConversationResponse.js b/app/javascript/dashboard/store/modules/specs/conversations/testConversationResponse.js
new file mode 100644
index 000000000..11e207266
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/conversations/testConversationResponse.js
@@ -0,0 +1,97 @@
+export const dataReceived = {
+  meta: {
+    mine_count: 3,
+    unassigned_count: 0,
+    all_count: 4,
+  },
+  payload: [
+    {
+      meta: {
+        sender: {
+          additional_attributes: {},
+          availability_status: 'offline',
+          email: null,
+          id: 40,
+          name: 'damp-field-834',
+          phone_number: null,
+          identifier: null,
+          thumbnail: '',
+          custom_attributes: {},
+          last_activity_at: 1635764106,
+        },
+        channel: 'Channel::WebWidget',
+        assignee: {
+          id: 1,
+          account_id: 1,
+          availability_status: 'online',
+          auto_offline: true,
+          confirmed: true,
+          email: 'john@acme.inc',
+          available_name: 'John',
+          name: 'John',
+          role: 'administrator',
+          thumbnail:
+            'http://0.0.0.0:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--318d40b3d34e02760df9f4ea0c5c89d1f590dda4/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/profile-pic.png',
+        },
+      },
+      id: 10,
+      messages: [
+        {
+          id: 85,
+          content: 'Ok',
+          account_id: 1,
+          inbox_id: 6,
+          conversation_id: 10,
+          message_type: 1,
+          created_at: 1635764265,
+          updated_at: '2021-11-01T10:57:45.790Z',
+          private: false,
+          status: 'sent',
+          source_id: null,
+          content_type: 'text',
+          content_attributes: {},
+          sender_type: 'User',
+          sender_id: 1,
+          external_source_ids: {},
+          sender: {
+            id: 1,
+            name: 'John',
+            available_name: 'John',
+            avatar_url:
+              'http://0.0.0.0:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--318d40b3d34e02760df9f4ea0c5c89d1f590dda4/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/profile-pic.png',
+            type: 'user',
+            availability_status: 'online',
+            thumbnail:
+              'http://0.0.0.0:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--318d40b3d34e02760df9f4ea0c5c89d1f590dda4/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/profile-pic.png',
+          },
+        },
+      ],
+      account_id: 1,
+      additional_attributes: {
+        browser: {
+          device_name: 'Unknown',
+          browser_name: 'Chrome',
+          platform_name: 'macOS',
+          browser_version: '95.0.4638.54',
+          platform_version: '10.15.7',
+        },
+        referer: 'http://localhost:3000/widget_tests',
+        initiated_at: {
+          timestamp: 'Mon Nov 01 2021 16:25:06 GMT+0530 (India Standard Time)',
+        },
+      },
+      agent_last_seen_at: 1635846359,
+      assignee_last_seen_at: 1635846359,
+      can_reply: true,
+      contact_last_seen_at: 1635764265,
+      custom_attributes: {},
+      inbox_id: 6,
+      labels: [],
+      muted: false,
+      snoozed_until: null,
+      status: 'open',
+      timestamp: 1635764265,
+      unread_count: 0,
+    },
+  ],
+};
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index 27288eea1..e5e70f717 100755
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -19,6 +19,8 @@ export default {
   UPDATE_ASSIGNEE: 'UPDATE_ASSIGNEE',
   UPDATE_CONVERSATION_CONTACT: 'UPDATE_CONVERSATION_CONTACT',
   CLEAR_CONTACT_CONVERSATIONS: 'CLEAR_CONTACT_CONVERSATIONS',
+  SET_CONVERSATION_FILTERS: 'SET_CONVERSATION_FILTERS',
+  CLEAR_CONVERSATION_FILTERS: 'CLEAR_CONVERSATION_FILTERS',
 
   SET_CURRENT_CHAT_WINDOW: 'SET_CURRENT_CHAT_WINDOW',
   CLEAR_CURRENT_CHAT_WINDOW: 'CLEAR_CURRENT_CHAT_WINDOW',
diff --git a/app/javascript/shared/assets/stylesheets/font-size.scss b/app/javascript/shared/assets/stylesheets/font-size.scss
index aacfc5efe..ed6447531 100644
--- a/app/javascript/shared/assets/stylesheets/font-size.scss
+++ b/app/javascript/shared/assets/stylesheets/font-size.scss
@@ -1,13 +1,15 @@
 :root {
   --font-size-nano: 0.8rem;
-  --font-size-micro: 1.0rem;
+  --font-size-micro: 1rem;
   --font-size-mini: 1.2rem;
   --font-size-small: 1.4rem;
+  --font-size-one-and-half: 1.5rem;
   --font-size-default: 1.6rem;
   --font-size-medium: 1.8rem;
+  --font-size-two: 2rem;
   --font-size-large: 2.2rem;
   --font-size-big: 2.4rem;
-  --font-size-bigger: 3.0rem;
+  --font-size-bigger: 3rem;
   --font-size-mega: 3.4rem;
-  --font-size-giga: 4.0rem;
+  --font-size-giga: 4rem;
 }
diff --git a/app/javascript/shared/assets/stylesheets/spacing.scss b/app/javascript/shared/assets/stylesheets/spacing.scss
index ac9e24011..313cb650b 100644
--- a/app/javascript/shared/assets/stylesheets/spacing.scss
+++ b/app/javascript/shared/assets/stylesheets/spacing.scss
@@ -2,17 +2,21 @@
   // spaces
   --space-zero: 0;
   --space-micro: 0.2rem;
+  --space-one-fourths: 0.25rem;
   --space-smaller: 0.4rem;
+  --space-half: 0.5rem;
+  --space-three-fourths: 0.75rem;
   --space-small: 0.8rem;
   --space-one: 1rem;
   --space-slab: 1.2rem;
   --space-normal: 1.6rem;
-  --space-two: 2.0rem;
+  --space-two: 2rem;
   --space-medium: 2.4rem;
+  --space-three: 3rem;
   --space-large: 3.2rem;
   --space-larger: 4.8rem;
   --space-jumbo: 6.4rem;
-  --space-mega: 10.0rem;
+  --space-mega: 10rem;
 
   --space-minus-micro: -0.2rem;
   --space-minus-smaller: -0.4rem;
@@ -20,10 +24,10 @@
   --space-minus-one: -1rem;
   --space-minus-slab: -1.2rem;
   --space-minus-normal: -1.6rem;
-  --space-minus-two: -2.0rem;
+  --space-minus-two: -2rem;
   --space-minus-medium: -2.4rem;
   --space-minus-large: -3.2rem;
   --space-minus-larger: -4.8rem;
   --space-minus-jumbo: -6.4rem;
-  --space-minus-mega: -10.0rem;
+  --space-minus-mega: -10rem;
 }
diff --git a/app/javascript/shared/assets/stylesheets/z-index.scss b/app/javascript/shared/assets/stylesheets/z-index.scss
index 434d80662..b170251b8 100644
--- a/app/javascript/shared/assets/stylesheets/z-index.scss
+++ b/app/javascript/shared/assets/stylesheets/z-index.scss
@@ -3,6 +3,7 @@
   --z-index-minus: -1;
   --z-index-zero: 0;
   --z-index-low: 10;
+  --z-index-twenty: 20;
   --z-index-normal: 100;
   --z-index-high: 1000;
   --z-index-higher: 2000;

From 8384d0b38e1f61a84983e88cb0f79fa971fa660a Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Thu, 18 Nov 2021 19:55:32 +0530
Subject: [PATCH 11/69] chore: Update dropdown z-index to be on top of contact
 details pane (#3411)

---
 app/javascript/dashboard/assets/scss/plugins/_dropdown.scss | 2 +-
 app/javascript/shared/assets/stylesheets/z-index.scss       | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
index 7009a077f..e1c0c055d 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
@@ -3,7 +3,7 @@
   @include border-light;
   box-sizing: content-box;
   width: fit-content;
-  z-index: 999;
+  z-index: var(--z-index-very-high);
 
   &.dropdown-pane--open {
     display: block;
diff --git a/app/javascript/shared/assets/stylesheets/z-index.scss b/app/javascript/shared/assets/stylesheets/z-index.scss
index b170251b8..011bdf11c 100644
--- a/app/javascript/shared/assets/stylesheets/z-index.scss
+++ b/app/javascript/shared/assets/stylesheets/z-index.scss
@@ -8,5 +8,6 @@
   --z-index-high: 1000;
   --z-index-higher: 2000;
   --z-index-much-higher: 5000;
+  --z-index-very-high: 9999;
   --z-index-highest: 10000;
 }

From 24e6a92297aaa24959c841f37de408d4edea0455 Mon Sep 17 00:00:00 2001
From: "Aswin Dev P.S" <aswin@chatwoot.com>
Date: Thu, 18 Nov 2021 22:22:27 -0800
Subject: [PATCH 12/69] feat: IMAP Email Channel (#3298)

This change allows the user to configure both IMAP and SMTP for an email inbox. IMAP enables the user to see emails in Chatwoot. And user can use SMTP to reply to an email conversation.

Users can use the default settings to send and receive emails for email inboxes if both IMAP and SMTP are disabled.

Fixes #2520
---
 .../api/v1/accounts/inboxes_controller.rb     |   4 +-
 app/helpers/api/v1/inboxes_helper.rb          |  33 ++++
 .../dashboard/i18n/locale/en/inboxMgmt.json   |  59 +++++++
 .../dashboard/settings/inbox/ImapSettings.vue | 163 ++++++++++++++++++
 .../dashboard/settings/inbox/Settings.vue     |   6 +
 .../dashboard/settings/inbox/SmtpSettings.vue | 163 ++++++++++++++++++
 .../dashboard/store/modules/inboxes.js        |  48 ++++++
 .../modules/specs/inboxes/actions.spec.js     |  60 +++++++
 .../inboxes/fetch_imap_email_inboxes_job.rb   |   9 +
 app/jobs/inboxes/fetch_imap_emails_job.rb     |  24 +++
 app/mailboxes/imap/imap_mailbox.rb            |  79 +++++++++
 app/mailboxes/mailbox_helper.rb               |  15 ++
 app/mailboxes/support_mailbox.rb              |  15 --
 app/mailers/conversation_reply_mailer.rb      |  34 +---
 .../conversation_reply_mailer_helper.rb       |  51 ++++++
 app/models/channel/email.rb                   |  30 +++-
 app/views/api/v1/models/_inbox.json.jbuilder  |  16 ++
 config/schedule.yml                           |  15 +-
 ...3_add_imap_smtp_config_to_channel_email.rb |  24 +++
 db/schema.rb                                  |  15 ++
 .../v1/accounts/inboxes_controller_spec.rb    |  51 ++++++
 .../fetch_imap_email_inboxes_job_spec.rb      |  27 +++
 .../inboxes/fetch_imap_emails_job_spec.rb     |  37 ++++
 spec/mailboxes/imap/imap_mailbox_spec.rb      |  93 ++++++++++
 .../mailers/conversation_reply_mailer_spec.rb |  26 +++
 25 files changed, 1040 insertions(+), 57 deletions(-)
 create mode 100644 app/helpers/api/v1/inboxes_helper.rb
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
 create mode 100644 app/jobs/inboxes/fetch_imap_email_inboxes_job.rb
 create mode 100644 app/jobs/inboxes/fetch_imap_emails_job.rb
 create mode 100644 app/mailboxes/imap/imap_mailbox.rb
 create mode 100644 app/mailers/conversation_reply_mailer_helper.rb
 create mode 100644 db/migrate/20211027073553_add_imap_smtp_config_to_channel_email.rb
 create mode 100644 spec/jobs/inboxes/fetch_imap_email_inboxes_job_spec.rb
 create mode 100644 spec/jobs/inboxes/fetch_imap_emails_job_spec.rb
 create mode 100644 spec/mailboxes/imap/imap_mailbox_spec.rb

diff --git a/app/controllers/api/v1/accounts/inboxes_controller.rb b/app/controllers/api/v1/accounts/inboxes_controller.rb
index d09565da3..0c80d9983 100644
--- a/app/controllers/api/v1/accounts/inboxes_controller.rb
+++ b/app/controllers/api/v1/accounts/inboxes_controller.rb
@@ -1,4 +1,5 @@
 class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
+  include Api::V1::InboxesHelper
   before_action :fetch_inbox, except: [:index, :create]
   before_action :fetch_agent_bot, only: [:set_agent_bot]
   # we are already handling the authorization in fetch inbox
@@ -41,12 +42,13 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   def update
     @inbox.update(permitted_params.except(:channel))
     @inbox.update_working_hours(params.permit(working_hours: Inbox::OFFISABLE_ATTRS)[:working_hours]) if params[:working_hours]
-
     channel_attributes = get_channel_attributes(@inbox.channel_type)
 
     # Inbox update doesn't necessarily need channel attributes
     return if permitted_params(channel_attributes)[:channel].blank?
 
+    validate_email_channel(channel_attributes) if @inbox.inbox_type == 'Email'
+
     @inbox.channel.update!(permitted_params(channel_attributes)[:channel])
     update_channel_feature_flags
   end
diff --git a/app/helpers/api/v1/inboxes_helper.rb b/app/helpers/api/v1/inboxes_helper.rb
new file mode 100644
index 000000000..08f000cc6
--- /dev/null
+++ b/app/helpers/api/v1/inboxes_helper.rb
@@ -0,0 +1,33 @@
+module Api::V1::InboxesHelper
+  def validate_email_channel(attributes)
+    channel_data = permitted_params(attributes)[:channel]
+
+    validate_imap(channel_data)
+    validate_smtp(channel_data)
+  end
+
+  private
+
+  def validate_imap(channel_data)
+    return unless channel_data.key?('imap_enabled') && channel_data[:imap_enabled]
+
+    Mail.defaults do
+      retriever_method :imap, { address: channel_data[:imap_address],
+                                port: channel_data[:imap_port],
+                                user_name: channel_data[:imap_email],
+                                password: channel_data[:imap_password],
+                                enable_ssl: channel_data[:imap_enable_ssl] }
+    end
+
+    Mail.connection do # rubocop:disable:block
+    end
+  end
+
+  def validate_smtp(channel_data)
+    return unless channel_data.key?('smtp_enabled') && channel_data[:smtp_enabled]
+
+    smtp = Net::SMTP.start(channel_data[:smtp_address], channel_data[:smtp_port], channel_data[:smtp_domain], channel_data[:smtp_email],
+                           channel_data[:smtp_password], :login)
+    smtp.finish unless smtp&.nil?
+  end
+end
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index b05a730e6..774c8160d 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -401,6 +401,65 @@
         "VALIDATION_ERROR": "Starting time should be before closing time.",
         "CHOOSE": "Choose"
       }
+    },
+    "IMAP": {
+      "TITLE": "IMAP",
+      "SUBTITLE": "Set your IMAP details",
+      "UPDATE": "Update IMAP settings",
+      "TOGGLE_AVAILABILITY": "Enable IMAP configuration for this inbox",
+      "TOGGLE_HELP": "Enabling IMAP will help the user to recieve email",
+      "EDIT": {
+        "SUCCESS_MESSAGE": "IMAP settings updated successfully",
+        "ERROR_MESSAGE": "Unable to update IMAP settings"
+      },
+      "ADDRESS": {
+        "LABEL": "Address",
+        "PLACE_HOLDER": "Address (Eg: imap.gmail.com)"
+      },
+      "PORT": {
+        "LABEL": "Port",
+        "PLACE_HOLDER": "Port"
+      },
+      "EMAIL": {
+        "LABEL": "Email",
+        "PLACE_HOLDER": "Email"
+      },
+      "PASSWORD": {
+        "LABEL": "Password",
+        "PLACE_HOLDER": "Password"
+      },
+      "ENABLE_SSL": "Enable SSL" 
+    },
+    "SMTP": {
+      "TITLE": "SMTP",
+      "SUBTITLE": "Set your SMTP details",
+      "UPDATE": "Update SMTP settings",
+      "TOGGLE_AVAILABILITY": "Enable SMTP configuration for this inbox",
+      "TOGGLE_HELP": "Enabling SMTP will help the user to send email",
+      "EDIT": {
+        "SUCCESS_MESSAGE": "SMTP settings updated successfully",
+        "ERROR_MESSAGE": "Unable to update SMTP settings"
+      },
+      "ADDRESS": {
+        "LABEL": "Address",
+        "PLACE_HOLDER": "Address (Eg: smtp.gmail.com)"
+      },
+      "PORT": {
+        "LABEL": "Port",
+        "PLACE_HOLDER": "Port"
+      },
+      "EMAIL": {
+        "LABEL": "Email",
+        "PLACE_HOLDER": "Email"
+      },
+      "PASSWORD": {
+        "LABEL": "Password",
+        "PLACE_HOLDER": "Password"
+      },
+      "DOMAIN": {
+        "LABEL": "Domain",
+        "PLACE_HOLDER": "Domain"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
new file mode 100644
index 000000000..801e6fa98
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="settings--content">
+    <settings-section
+      :title="$t('INBOX_MGMT.IMAP.TITLE')"
+      :sub-title="$t('INBOX_MGMT.IMAP.SUBTITLE')"
+    >
+      <form @submit.prevent="updateInbox">
+        <label for="toggle-imap-enable">
+          <input
+            v-model="isIMAPEnabled"
+            type="checkbox"
+            name="toggle-imap-enable"
+          />
+          {{ $t('INBOX_MGMT.IMAP.TOGGLE_AVAILABILITY') }}
+        </label>
+        <p>{{ $t('INBOX_MGMT.IMAP.TOGGLE_HELP') }}</p>
+        <div v-if="isIMAPEnabled" class="imap-details-wrap">
+          <woot-input
+            v-model.trim="address"
+            :class="{ error: $v.address.$error }"
+            class="medium-9 columns"
+            :label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
+            @blur="$v.address.$touch"
+          />
+          <woot-input
+            v-model="port"
+            type="number"
+            :class="{ error: $v.port.$error }"
+            class="medium-9 columns"
+            :label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
+            @blur="$v.port.$touch"
+          />
+          <woot-input
+            v-model="email"
+            :class="{ error: $v.email.$error }"
+            class="medium-9 columns"
+            :label="$t('INBOX_MGMT.IMAP.EMAIL.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.EMAIL.PLACE_HOLDER')"
+            @blur="$v.email.$touch"
+          />
+          <woot-input
+            v-model="password"
+            :class="{ error: $v.password.$error }"
+            class="medium-9 columns"
+            :label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
+            :placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
+            type="password"
+            @blur="$v.password.$touch"
+          />
+          <label for="toggle-enable-ssl">
+            <input
+              v-model="isSSLEnabled"
+              type="checkbox"
+              name="toggle-enable-ssl"
+            />
+            {{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
+          </label>
+        </div>
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
+          :loading="uiFlags.isUpdatingInbox"
+          :disabled="($v.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
+        />
+      </form>
+    </settings-section>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import SettingsSection from 'dashboard/components/SettingsSection';
+import { required, minLength, email } from 'vuelidate/lib/validators';
+
+export default {
+  components: {
+    SettingsSection,
+  },
+  mixins: [alertMixin],
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      isIMAPEnabled: false,
+      address: '',
+      port: '',
+      email: '',
+      password: '',
+      isSSLEnabled: true,
+    };
+  },
+  validations: {
+    address: { required },
+    port: { required, minLength: minLength(2) },
+    email: { required, email },
+    password: { required },
+  },
+  computed: {
+    ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
+  },
+  watch: {
+    inbox() {
+      this.setDefaults();
+    },
+  },
+  mounted() {
+    this.setDefaults();
+  },
+  methods: {
+    setDefaults() {
+      const {
+        imap_enabled,
+        imap_address,
+        imap_port,
+        imap_email,
+        imap_password,
+        imap_enable_ssl,
+      } = this.inbox;
+      this.isIMAPEnabled = imap_enabled;
+      this.address = imap_address;
+      this.port = imap_port;
+      this.email = imap_email;
+      this.password = imap_password;
+      this.isSSLEnabled = imap_enable_ssl;
+    },
+    async updateInbox() {
+      try {
+        this.loading = true;
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            imap_enabled: this.isIMAPEnabled,
+            imap_address: this.address,
+            imap_port: this.port,
+            imap_email: this.email,
+            imap_password: this.password,
+            imap_enable_ssl: this.isSSLEnabled,
+            imap_inbox_synced_at: this.isIMAPEnabled
+              ? new Date().toISOString()
+              : undefined,
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInboxIMAP', payload);
+        this.showAlert(this.$t('INBOX_MGMT.IMAP.EDIT.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.IMAP.EDIT.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.imap-details-wrap {
+  margin-bottom: var(--space-medium);
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 9d63e5781..7c8db94d5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -353,6 +353,8 @@
             <woot-code :script="inbox.forward_to_email"></woot-code>
           </settings-section>
         </div>
+        <imap-settings :inbox="inbox" />
+        <smtp-settings :inbox="inbox" />
       </div>
     </div>
     <div v-if="selectedTabKey === 'preChatForm'">
@@ -378,6 +380,8 @@ import FacebookReauthorize from './facebook/Reauthorize';
 import PreChatFormSettings from './PreChatForm/Settings';
 import WeeklyAvailability from './components/WeeklyAvailability';
 import GreetingsEditor from 'shared/components/GreetingsEditor';
+import ImapSettings from './ImapSettings';
+import SmtpSettings from './SmtpSettings';
 
 export default {
   components: {
@@ -387,6 +391,8 @@ export default {
     PreChatFormSettings,
     WeeklyAvailability,
     GreetingsEditor,
+    ImapSettings,
+    SmtpSettings,
   },
   mixins: [alertMixin, configMixin, inboxMixin],
   data() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
new file mode 100644
index 000000000..009e3cbb3
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="settings--content">
+    <settings-section
+      :title="$t('INBOX_MGMT.SMTP.TITLE')"
+      :sub-title="$t('INBOX_MGMT.SMTP.SUBTITLE')"
+    >
+      <form @submit.prevent="updateInbox">
+        <label for="toggle-enable-smtp">
+          <input
+            v-model="isSMTPEnabled"
+            type="checkbox"
+            name="toggle-enable-smtp"
+          />
+          {{ $t('INBOX_MGMT.SMTP.TOGGLE_AVAILABILITY') }}
+        </label>
+        <p>{{ $t('INBOX_MGMT.SMTP.TOGGLE_HELP') }}</p>
+        <div v-if="isSMTPEnabled" class="smtp-details-wrap">
+          <woot-input
+            v-model.trim="address"
+            :class="{ error: $v.address.$error }"
+            class="medium-9 columns"
+            :label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
+            @blur="$v.address.$touch"
+          />
+          <woot-input
+            v-model="port"
+            type="number"
+            :class="{ error: $v.port.$error }"
+            class="medium-9 columns"
+            :label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
+            @blur="$v.port.$touch"
+          />
+          <woot-input
+            v-model="email"
+            :class="{ error: $v.email.$error }"
+            class="medium-9 columns"
+            :label="$t('INBOX_MGMT.SMTP.EMAIL.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.EMAIL.PLACE_HOLDER')"
+            @blur="$v.email.$touch"
+          />
+          <woot-input
+            v-model="password"
+            :class="{ error: $v.password.$error }"
+            class="medium-9 columns"
+            :label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
+            type="password"
+            @blur="$v.password.$touch"
+          />
+          <woot-input
+            v-model.trim="domain"
+            :class="{ error: $v.domain.$error }"
+            class="medium-9 columns"
+            :label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
+            :placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
+            @blur="$v.domain.$touch"
+          />
+        </div>
+        <woot-submit-button
+          :button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
+          :loading="uiFlags.isUpdatingInbox"
+          :disabled="($v.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
+        />
+      </form>
+    </settings-section>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import SettingsSection from 'dashboard/components/SettingsSection';
+import { required, minLength, email } from 'vuelidate/lib/validators';
+
+export default {
+  components: {
+    SettingsSection,
+  },
+  mixins: [alertMixin],
+  props: {
+    inbox: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      isSMTPEnabled: false,
+      address: '',
+      port: '',
+      email: '',
+      password: '',
+      domain: '',
+    };
+  },
+  validations: {
+    address: { required },
+    port: {
+      required,
+      minLength: minLength(2),
+    },
+    email: { required, email },
+    password: { required },
+    domain: { required },
+  },
+  computed: {
+    ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }),
+  },
+  watch: {
+    inbox() {
+      this.setDefaults();
+    },
+  },
+  mounted() {
+    this.setDefaults();
+  },
+  methods: {
+    setDefaults() {
+      const {
+        smtp_enabled,
+        smtp_address,
+        smtp_port,
+        smtp_email,
+        smtp_password,
+        smtp_domain,
+      } = this.inbox;
+      this.isSMTPEnabled = smtp_enabled;
+      this.address = smtp_address;
+      this.port = smtp_port;
+      this.email = smtp_email;
+      this.password = smtp_password;
+      this.domain = smtp_domain;
+    },
+    async updateInbox() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {
+            smtp_enabled: this.isSMTPEnabled,
+            smtp_address: this.address,
+            smtp_port: this.port,
+            smtp_email: this.email,
+            smtp_password: this.password,
+            smtp_domain: this.domain,
+          },
+        };
+        await this.$store.dispatch('inboxes/updateInboxSMTP', payload);
+        this.showAlert(this.$t('INBOX_MGMT.SMTP.EDIT.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.SMTP.EDIT.ERROR_MESSAGE'));
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.smtp-details-wrap {
+  margin-bottom: var(--space-medium);
+}
+</style>
diff --git a/app/javascript/dashboard/store/modules/inboxes.js b/app/javascript/dashboard/store/modules/inboxes.js
index 2bb554ba3..83102ba97 100644
--- a/app/javascript/dashboard/store/modules/inboxes.js
+++ b/app/javascript/dashboard/store/modules/inboxes.js
@@ -35,6 +35,8 @@ export const state = {
     isUpdating: false,
     isUpdatingAutoAssignment: false,
     isDeleting: false,
+    isUpdatingIMAP: false,
+    isUpdatingSMTP: false,
   },
 };
 
@@ -164,6 +166,52 @@ export const actions = {
       throw new Error(error);
     }
   },
+  updateInboxIMAP: async (
+    { commit },
+    { id, formData = true, ...inboxParams }
+  ) => {
+    commit(types.default.SET_INBOXES_UI_FLAG, {
+      isUpdatingIMAP: true,
+    });
+    try {
+      const response = await InboxesAPI.update(
+        id,
+        formData ? buildInboxData(inboxParams) : inboxParams
+      );
+      commit(types.default.EDIT_INBOXES, response.data);
+      commit(types.default.SET_INBOXES_UI_FLAG, {
+        isUpdatingIMAP: false,
+      });
+    } catch (error) {
+      commit(types.default.SET_INBOXES_UI_FLAG, {
+        isUpdatingIMAP: false,
+      });
+      throw new Error(error);
+    }
+  },
+  updateInboxSMTP: async (
+    { commit },
+    { id, formData = true, ...inboxParams }
+  ) => {
+    commit(types.default.SET_INBOXES_UI_FLAG, {
+      isUpdatingSMTP: true,
+    });
+    try {
+      const response = await InboxesAPI.update(
+        id,
+        formData ? buildInboxData(inboxParams) : inboxParams
+      );
+      commit(types.default.EDIT_INBOXES, response.data);
+      commit(types.default.SET_INBOXES_UI_FLAG, {
+        isUpdatingSMTP: false,
+      });
+    } catch (error) {
+      commit(types.default.SET_INBOXES_UI_FLAG, {
+        isUpdatingSMTP: false,
+      });
+      throw new Error(error);
+    }
+  },
   delete: async ({ commit }, inboxId) => {
     commit(types.default.SET_INBOXES_UI_FLAG, { isDeleting: true });
     try {
diff --git a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js b/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
index da3424267..80cf92f25 100644
--- a/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/inboxes/actions.spec.js
@@ -107,6 +107,66 @@ describe('#actions', () => {
     });
   });
 
+  describe('#updateInboxIMAP', () => {
+    it('sends correct actions if API is success', async () => {
+      const updatedInbox = inboxList[0];
+
+      axios.patch.mockResolvedValue({ data: updatedInbox });
+      await actions.updateInboxIMAP(
+        { commit },
+        { id: updatedInbox.id, inbox: { channel: { imap_enabled: true } } }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: true }],
+        [types.default.EDIT_INBOXES, updatedInbox],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.updateInboxIMAP(
+          { commit },
+          { id: inboxList[0].id, inbox: { channel: { imap_enabled: true } } }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingIMAP: false }],
+      ]);
+    });
+  });
+
+  describe('#updateInboxSMTP', () => {
+    it('sends correct actions if API is success', async () => {
+      const updatedInbox = inboxList[0];
+
+      axios.patch.mockResolvedValue({ data: updatedInbox });
+      await actions.updateInboxSMTP(
+        { commit },
+        { id: updatedInbox.id, inbox: { channel: { smtp_enabled: true } } }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: true }],
+        [types.default.EDIT_INBOXES, updatedInbox],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.updateInboxSMTP(
+          { commit },
+          { id: inboxList[0].id, inbox: { channel: { smtp_enabled: true } } }
+        )
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: true }],
+        [types.default.SET_INBOXES_UI_FLAG, { isUpdatingSMTP: false }],
+      ]);
+    });
+  });
+
   describe('#delete', () => {
     it('sends correct actions if API is success', async () => {
       axios.delete.mockResolvedValue({ data: inboxList[0] });
diff --git a/app/jobs/inboxes/fetch_imap_email_inboxes_job.rb b/app/jobs/inboxes/fetch_imap_email_inboxes_job.rb
new file mode 100644
index 000000000..ec0ca7d21
--- /dev/null
+++ b/app/jobs/inboxes/fetch_imap_email_inboxes_job.rb
@@ -0,0 +1,9 @@
+class Inboxes::FetchImapEmailInboxesJob < ApplicationJob
+  queue_as :low
+
+  def perform
+    Inbox.where(channel_type: 'Channel::Email').all.each do |inbox|
+      Inboxes::FetchImapEmailsJob.perform_later(inbox.channel) if inbox.channel.imap_enabled
+    end
+  end
+end
diff --git a/app/jobs/inboxes/fetch_imap_emails_job.rb b/app/jobs/inboxes/fetch_imap_emails_job.rb
new file mode 100644
index 000000000..fa18e6599
--- /dev/null
+++ b/app/jobs/inboxes/fetch_imap_emails_job.rb
@@ -0,0 +1,24 @@
+class Inboxes::FetchImapEmailsJob < ApplicationJob
+  queue_as :low
+
+  def perform(channel)
+    Mail.defaults do
+      retriever_method :imap, address: channel.imap_address,
+                              port: channel.imap_port,
+                              user_name: channel.imap_email,
+                              password: channel.imap_password,
+                              enable_ssl: channel.imap_enable_ssl
+    end
+
+    new_mails = false
+
+    Mail.find(what: :last, count: 10, order: :desc).each do |inbound_mail|
+      if inbound_mail.date.utc >= channel.imap_inbox_synced_at
+        Imap::ImapMailbox.new.process(inbound_mail, channel)
+        new_mails = true
+      end
+    end
+
+    Channel::Email.update(channel.id, imap_inbox_synced_at: Time.now.utc) if new_mails
+  end
+end
diff --git a/app/mailboxes/imap/imap_mailbox.rb b/app/mailboxes/imap/imap_mailbox.rb
new file mode 100644
index 000000000..a9ed0a7c9
--- /dev/null
+++ b/app/mailboxes/imap/imap_mailbox.rb
@@ -0,0 +1,79 @@
+class Imap::ImapMailbox
+  include MailboxHelper
+  attr_accessor :channel, :account, :inbox, :conversation, :processed_mail
+
+  def process(mail, channel)
+    @inbound_mail = mail
+    @channel = channel
+    load_account
+    load_inbox
+    decorate_mail
+
+    # prevent loop from chatwoot notification emails
+    return if notification_email_from_chatwoot?
+
+    ActiveRecord::Base.transaction do
+      find_or_create_contact
+      find_or_create_conversation
+      create_message
+      add_attachments_to_message
+    end
+  end
+
+  private
+
+  def load_account
+    @account = @channel.account
+  end
+
+  def load_inbox
+    @inbox = @channel.inbox
+  end
+
+  def decorate_mail
+    @processed_mail = MailPresenter.new(@inbound_mail, @account)
+  end
+
+  def find_conversation_by_in_reply_to
+    return if in_reply_to.blank?
+
+    message = @inbox.messages.find_by(source_id: in_reply_to)
+    if message.nil?
+      @inbox.conversations.where("additional_attributes->>'in_reply_to' = ?", in_reply_to).first
+    else
+      @inbox.conversations.find(message.conversation_id)
+    end
+  end
+
+  def in_reply_to
+    @inbound_mail.in_reply_to
+  end
+
+  def find_or_create_conversation
+    @conversation = find_conversation_by_in_reply_to || ::Conversation.create!({ account_id: @account.id,
+                                                                                 inbox_id: @inbox.id,
+                                                                                 contact_id: @contact.id,
+                                                                                 contact_inbox_id: @contact_inbox.id,
+                                                                                 additional_attributes: {
+                                                                                   source: 'email',
+                                                                                   in_reply_to: in_reply_to,
+                                                                                   mail_subject: @processed_mail.subject,
+                                                                                   initiated_at: {
+                                                                                     timestamp: Time.now.utc
+                                                                                   }
+                                                                                 } })
+  end
+
+  def find_or_create_contact
+    @contact = @inbox.contacts.find_by(email: @processed_mail.original_sender)
+    if @contact.present?
+      @contact_inbox = ContactInbox.find_by(inbox: @inbox, contact: @contact)
+    else
+      create_contact
+    end
+  end
+
+  def identify_contact_name
+    processed_mail.sender_name || processed_mail.from.first.split('@').first
+  end
+end
diff --git a/app/mailboxes/mailbox_helper.rb b/app/mailboxes/mailbox_helper.rb
index 15379bb86..7cdfebe30 100644
--- a/app/mailboxes/mailbox_helper.rb
+++ b/app/mailboxes/mailbox_helper.rb
@@ -29,6 +29,21 @@ module MailboxHelper
     @message.save!
   end
 
+  def create_contact
+    @contact_inbox = ::ContactBuilder.new(
+      source_id: "email:#{processed_mail.message_id}",
+      inbox: @inbox,
+      contact_attributes: {
+        name: identify_contact_name,
+        email: processed_mail.original_sender,
+        additional_attributes: {
+          source_id: "email:#{processed_mail.message_id}"
+        }
+      }
+    ).perform
+    @contact = @contact_inbox.contact
+  end
+
   def notification_email_from_chatwoot?
     # notification emails are send via mailer sender email address. so it should match
     @processed_mail.original_sender == Mail::Address.new(ENV.fetch('MAILER_SENDER_EMAIL', 'Chatwoot <accounts@chatwoot.com>')).address
diff --git a/app/mailboxes/support_mailbox.rb b/app/mailboxes/support_mailbox.rb
index 9de2f79c2..d215310e0 100644
--- a/app/mailboxes/support_mailbox.rb
+++ b/app/mailboxes/support_mailbox.rb
@@ -78,21 +78,6 @@ class SupportMailbox < ApplicationMailbox
     end
   end
 
-  def create_contact
-    @contact_inbox = ::ContactBuilder.new(
-      source_id: "email:#{processed_mail.message_id}",
-      inbox: @inbox,
-      contact_attributes: {
-        name: identify_contact_name,
-        email: @processed_mail.original_sender,
-        additional_attributes: {
-          source_id: "email:#{processed_mail.message_id}"
-        }
-      }
-    ).perform
-    @contact = @contact_inbox.contact
-  end
-
   def identify_contact_name
     processed_mail.sender_name || processed_mail.from.first.split('@').first
   end
diff --git a/app/mailers/conversation_reply_mailer.rb b/app/mailers/conversation_reply_mailer.rb
index 5d4770bd7..333eb01fe 100644
--- a/app/mailers/conversation_reply_mailer.rb
+++ b/app/mailers/conversation_reply_mailer.rb
@@ -1,4 +1,5 @@
 class ConversationReplyMailer < ApplicationMailer
+  include ConversationReplyMailerHelper
   default from: ENV.fetch('MAILER_SENDER_EMAIL', 'Chatwoot <accounts@chatwoot.com>')
   layout :choose_layout
 
@@ -12,16 +13,7 @@ class ConversationReplyMailer < ApplicationMailer
     new_messages = @conversation.messages.chat.where('id >= ?', last_queued_id)
     @messages = recap_messages + new_messages
     @messages = @messages.select(&:email_reply_summarizable?)
-    mail({
-           to: @contact&.email,
-           from: from_email_with_name,
-           reply_to: reply_email,
-           subject: mail_subject,
-           message_id: custom_message_id,
-           in_reply_to: in_reply_to_email,
-           cc: cc_bcc_emails[0],
-           bcc: cc_bcc_emails[1]
-         })
+    prepare_mail(true)
   end
 
   def reply_without_summary(conversation, last_queued_id)
@@ -34,14 +26,7 @@ class ConversationReplyMailer < ApplicationMailer
     @messages = @messages.reject { |m| m.template? && !m.input_csat? }
     return false if @messages.count.zero?
 
-    mail({
-           to: @contact&.email,
-           from: from_email_with_name,
-           reply_to: reply_email,
-           subject: mail_subject,
-           message_id: custom_message_id,
-           in_reply_to: in_reply_to_email
-         })
+    prepare_mail(false)
   end
 
   def email_reply(message)
@@ -49,17 +34,7 @@ class ConversationReplyMailer < ApplicationMailer
 
     init_conversation_attributes(message.conversation)
     @message = message
-
-    reply_mail_object = mail({
-                               to: @contact&.email,
-                               from: from_email_with_name,
-                               reply_to: reply_email,
-                               subject: mail_subject,
-                               message_id: custom_message_id,
-                               in_reply_to: in_reply_to_email,
-                               cc: cc_bcc_emails[0],
-                               bcc: cc_bcc_emails[1]
-                             })
+    reply_mail_object = prepare_mail(true)
 
     message.update(source_id: reply_mail_object.message_id)
   end
@@ -86,6 +61,7 @@ class ConversationReplyMailer < ApplicationMailer
     @contact = @conversation.contact
     @agent = @conversation.assignee
     @inbox = @conversation.inbox
+    @channel = @inbox.channel
   end
 
   def should_use_conversation_email_address?
diff --git a/app/mailers/conversation_reply_mailer_helper.rb b/app/mailers/conversation_reply_mailer_helper.rb
new file mode 100644
index 000000000..a9feb0c72
--- /dev/null
+++ b/app/mailers/conversation_reply_mailer_helper.rb
@@ -0,0 +1,51 @@
+module ConversationReplyMailerHelper
+  def prepare_mail(cc_bcc_enabled)
+    @options = {
+      to: @contact&.email,
+      from: email_from,
+      reply_to: email_reply_to,
+      subject: mail_subject,
+      message_id: custom_message_id,
+      in_reply_to: in_reply_to_email
+    }
+
+    if cc_bcc_enabled
+      @options[:cc] = cc_bcc_emails[0]
+      @options[:bcc] = cc_bcc_emails[1]
+    end
+
+    set_delivery_method
+    mail(@options)
+  end
+
+  private
+
+  def set_delivery_method
+    return unless @inbox.inbox_type == 'Email' && @channel.smtp_enabled
+
+    smtp_settings = {
+      address: @channel.smtp_address,
+      port: @channel.smtp_port,
+      user_name: @channel.smtp_email,
+      password: @channel.smtp_password,
+      domain: @channel.smtp_domain,
+      enable_starttls_auto: @channel.smtp_enable_starttls_auto,
+      authentication: @channel.smtp_authentication
+    }
+
+    @options[:delivery_method] = :smtp
+    @options[:delivery_method_options] = smtp_settings
+  end
+
+  def email_smtp_enabled
+    @inbox.inbox_type == 'Email' && @channel.imap_enabled
+  end
+
+  def email_from
+    email_smtp_enabled ? @channel.smtp_email : from_email_with_name
+  end
+
+  def email_reply_to
+    email_smtp_enabled ? @channel.smtp_email : reply_email
+  end
+end
diff --git a/app/models/channel/email.rb b/app/models/channel/email.rb
index fe711b01e..092a9a101 100644
--- a/app/models/channel/email.rb
+++ b/app/models/channel/email.rb
@@ -2,12 +2,27 @@
 #
 # Table name: channel_email
 #
-#  id               :bigint           not null, primary key
-#  email            :string           not null
-#  forward_to_email :string           not null
-#  created_at       :datetime         not null
-#  updated_at       :datetime         not null
-#  account_id       :integer          not null
+#  id                        :bigint           not null, primary key
+#  email                     :string           not null
+#  forward_to_email          :string           not null
+#  imap_address              :string           default("")
+#  imap_email                :string           default("")
+#  imap_enable_ssl           :boolean          default(TRUE)
+#  imap_enabled              :boolean          default(FALSE)
+#  imap_inbox_synced_at      :datetime
+#  imap_password             :string           default("")
+#  imap_port                 :integer          default(0)
+#  smtp_address              :string           default("")
+#  smtp_authentication       :string           default("login")
+#  smtp_domain               :string           default("")
+#  smtp_email                :string           default("")
+#  smtp_enable_starttls_auto :boolean          default(TRUE)
+#  smtp_enabled              :boolean          default(FALSE)
+#  smtp_password             :string           default("")
+#  smtp_port                 :integer          default(0)
+#  created_at                :datetime         not null
+#  updated_at                :datetime         not null
+#  account_id                :integer          not null
 #
 # Indexes
 #
@@ -19,7 +34,8 @@ class Channel::Email < ApplicationRecord
   include Channelable
 
   self.table_name = 'channel_email'
-  EDITABLE_ATTRS = [:email].freeze
+  EDITABLE_ATTRS = [:email, :imap_enabled, :imap_email, :imap_password, :imap_address, :imap_port, :imap_enable_ssl, :imap_inbox_synced_at,
+                    :smtp_enabled, :smtp_email, :smtp_password, :smtp_address, :smtp_port, :smtp_domain].freeze
 
   validates :email, uniqueness: true
   validates :forward_to_email, uniqueness: true
diff --git a/app/views/api/v1/models/_inbox.json.jbuilder b/app/views/api/v1/models/_inbox.json.jbuilder
index e27ebcac4..e4bdbcc66 100644
--- a/app/views/api/v1/models/_inbox.json.jbuilder
+++ b/app/views/api/v1/models/_inbox.json.jbuilder
@@ -45,6 +45,22 @@ json.medium resource.channel.try(:medium) if resource.twilio?
 json.forward_to_email resource.channel.try(:forward_to_email)
 json.email resource.channel.try(:email) if resource.email?
 
+## IMAP
+json.imap_email resource.channel.try(:imap_email) if resource.email?
+json.imap_password resource.channel.try(:imap_password) if resource.email?
+json.imap_address resource.channel.try(:imap_address) if resource.email?
+json.imap_port resource.channel.try(:imap_port) if resource.email?
+json.imap_enabled resource.channel.try(:imap_enabled) if resource.email?
+json.imap_enable_ssl resource.channel.try(:imap_enable_ssl) if resource.email?
+
+## SMTP
+json.smtp_email resource.channel.try(:smtp_email) if resource.email?
+json.smtp_password resource.channel.try(:smtp_password) if resource.email?
+json.smtp_address resource.channel.try(:smtp_address) if resource.email?
+json.smtp_port resource.channel.try(:smtp_port) if resource.email?
+json.smtp_enabled resource.channel.try(:smtp_enabled) if resource.email?
+json.smtp_domain resource.channel.try(:smtp_domain) if resource.email?
+
 ## API Channel Attributes
 json.webhook_url resource.channel.try(:webhook_url) if resource.api?
 json.inbox_identifier resource.channel.try(:identifier) if resource.api?
diff --git a/config/schedule.yml b/config/schedule.yml
index 4a01893a9..971ee85fd 100644
--- a/config/schedule.yml
+++ b/config/schedule.yml
@@ -3,13 +3,18 @@
 
 # executed At 12:00 on every day-of-month.
 internal_check_new_versions_job:
-  cron: "0 12 */1 * *"
-  class: "Internal::CheckNewVersionsJob"
+  cron: '0 12 */1 * *'
+  class: 'Internal::CheckNewVersionsJob'
   queue: scheduled_jobs
 
 # executed At every 5th minute..
 trigger_scheduled_items_job:
-  cron: "*/5 * * * *"
-  class: "TriggerScheduledItemsJob"
+  cron: '*/5 * * * *'
+  class: 'TriggerScheduledItemsJob'
+  queue: scheduled_jobs
+
+# executed At every minute.
+trigger_scheduled_items_job:
+  cron: '*/1 * * * *'
+  class: 'Inboxes::FetchImapEmailInboxesJob'
   queue: scheduled_jobs
-  
\ No newline at end of file
diff --git a/db/migrate/20211027073553_add_imap_smtp_config_to_channel_email.rb b/db/migrate/20211027073553_add_imap_smtp_config_to_channel_email.rb
new file mode 100644
index 000000000..7bd7aca50
--- /dev/null
+++ b/db/migrate/20211027073553_add_imap_smtp_config_to_channel_email.rb
@@ -0,0 +1,24 @@
+class AddImapSmtpConfigToChannelEmail < ActiveRecord::Migration[6.1]
+  def change
+    change_table :channel_email, bulk: true do |t|
+      # IMAP
+      t.boolean :imap_enabled, default: false
+      t.string :imap_address, default: ''
+      t.integer :imap_port, default: 0
+      t.string :imap_email, default: ''
+      t.string :imap_password, default: ''
+      t.boolean :imap_enable_ssl, default: true
+      t.datetime :imap_inbox_synced_at
+
+      # SMTP
+      t.boolean :smtp_enabled, default: false
+      t.string :smtp_address, default: ''
+      t.integer :smtp_port, default: 0
+      t.string :smtp_email, default: ''
+      t.string :smtp_password, default: ''
+      t.string :smtp_domain, default: ''
+      t.boolean :smtp_enable_starttls_auto, default: true
+      t.string :smtp_authentication, default: 'login'
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 1e3b87636..66550552f 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -181,6 +181,21 @@ ActiveRecord::Schema.define(version: 2021_11_18_100301) do
     t.string "forward_to_email", null: false
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
+    t.boolean "imap_enabled", default: false
+    t.string "imap_address", default: ""
+    t.integer "imap_port", default: 0
+    t.string "imap_email", default: ""
+    t.string "imap_password", default: ""
+    t.boolean "imap_enable_ssl", default: true
+    t.datetime "imap_inbox_synced_at"
+    t.boolean "smtp_enabled", default: false
+    t.string "smtp_address", default: ""
+    t.integer "smtp_port", default: 0
+    t.string "smtp_email", default: ""
+    t.string "smtp_password", default: ""
+    t.string "smtp_domain", default: ""
+    t.boolean "smtp_enable_starttls_auto", default: true
+    t.string "smtp_authentication", default: "login"
     t.index ["email"], name: "index_channel_email_on_email", unique: true
     t.index ["forward_to_email"], name: "index_channel_email_on_forward_to_email", unique: true
   end
diff --git a/spec/controllers/api/v1/accounts/inboxes_controller_spec.rb b/spec/controllers/api/v1/accounts/inboxes_controller_spec.rb
index c1b8b7416..9fdceac6f 100644
--- a/spec/controllers/api/v1/accounts/inboxes_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/inboxes_controller_spec.rb
@@ -376,6 +376,57 @@ RSpec.describe 'Inboxes API', type: :request do
         expect(email_channel.reload.email).to eq('emailtest@email.test')
       end
 
+      it 'updates email inbox with imap when administrator' do
+        email_channel = create(:channel_email, account: account)
+        email_inbox = create(:inbox, channel: email_channel, account: account)
+
+        imap_connection = double
+        allow(Mail).to receive(:connection).and_return(imap_connection)
+
+        patch "/api/v1/accounts/#{account.id}/inboxes/#{email_inbox.id}",
+              headers: admin.create_new_auth_token,
+              params: {
+                channel: {
+                  imap_enabled: true,
+                  imap_address: 'imap.gmail.com',
+                  imap_port: 993,
+                  imap_email: 'imaptest@gmail.com'
+                }
+              },
+              as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(email_channel.reload.imap_enabled).to be true
+        expect(email_channel.reload.imap_address).to eq('imap.gmail.com')
+        expect(email_channel.reload.imap_port).to eq(993)
+      end
+
+      it 'updates email inbox with smtp when administrator' do
+        email_channel = create(:channel_email, account: account)
+        email_inbox = create(:inbox, channel: email_channel, account: account)
+
+        smtp_connection = double
+        allow(smtp_connection).to receive(:finish).and_return(true)
+        allow(Net::SMTP).to receive(:start).and_return(smtp_connection)
+
+        patch "/api/v1/accounts/#{account.id}/inboxes/#{email_inbox.id}",
+              headers: admin.create_new_auth_token,
+              params: {
+                channel: {
+                  smtp_enabled: true,
+                  smtp_address: 'smtp.gmail.com',
+                  smtp_port: 587,
+                  smtp_email: 'smtptest@gmail.com'
+                }
+              },
+              as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(email_channel.reload.smtp_enabled).to be true
+        expect(email_channel.reload.smtp_address).to eq('smtp.gmail.com')
+        expect(email_channel.reload.smtp_port).to eq(587)
+      end
+
       it 'updates avatar when administrator' do
         # no avatar before upload
         expect(inbox.avatar.attached?).to eq(false)
diff --git a/spec/jobs/inboxes/fetch_imap_email_inboxes_job_spec.rb b/spec/jobs/inboxes/fetch_imap_email_inboxes_job_spec.rb
new file mode 100644
index 000000000..210602ac9
--- /dev/null
+++ b/spec/jobs/inboxes/fetch_imap_email_inboxes_job_spec.rb
@@ -0,0 +1,27 @@
+require 'rails_helper'
+
+RSpec.describe Inboxes::FetchImapEmailInboxesJob, type: :job do
+  let(:account) { create(:account) }
+  let(:imap_email_channel) do
+    create(:channel_email, imap_enabled: true, imap_address: 'imap.gmail.com', imap_port: 993, imap_email: 'imap@gmail.com',
+                           imap_password: 'password', account: account)
+  end
+  let(:email_inbox) { create(:inbox, channel: imap_email_channel, account: account) }
+
+  it 'enqueues the job' do
+    expect { described_class.perform_later }.to have_enqueued_job(described_class)
+      .on_queue('low')
+  end
+
+  context 'when called' do
+    it 'fetch all the email channels' do
+      imap_email_inboxes = double
+      allow(imap_email_inboxes).to receive(:all).and_return([email_inbox])
+      allow(Inbox).to receive(:where).and_return(imap_email_inboxes)
+
+      expect(Inboxes::FetchImapEmailsJob).to receive(:perform_later).with(imap_email_channel).once
+
+      described_class.perform_now
+    end
+  end
+end
diff --git a/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb b/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb
new file mode 100644
index 000000000..6c1beecaf
--- /dev/null
+++ b/spec/jobs/inboxes/fetch_imap_emails_job_spec.rb
@@ -0,0 +1,37 @@
+require 'rails_helper'
+
+RSpec.describe Inboxes::FetchImapEmailsJob, type: :job do
+  let(:account) { create(:account) }
+  let(:imap_email_channel) do
+    create(:channel_email, imap_enabled: true, imap_address: 'imap.gmail.com', imap_port: 993, imap_email: 'imap@gmail.com',
+                           imap_password: 'password', imap_inbox_synced_at: Time.now.utc - 10, account: account)
+  end
+  let(:email_inbox) { create(:inbox, channel: imap_email_channel, account: account) }
+
+  it 'enqueues the job' do
+    expect { described_class.perform_later }.to have_enqueued_job(described_class)
+      .on_queue('low')
+  end
+
+  context 'when imap fetch latest 10 emails' do
+    it 'check for the new emails' do
+      mail_date = Time.now.utc
+      mail = Mail.new do
+        to 'test@outlook.com'
+        from 'test@gmail.com'
+        subject :test.to_s
+        body 'hello'
+        date mail_date
+      end
+
+      allow(Mail).to receive(:find).and_return([mail])
+      imap_mailbox = double
+      allow(Imap::ImapMailbox).to receive(:new).and_return(imap_mailbox)
+      expect(imap_mailbox).to receive(:process).with(mail, imap_email_channel).once
+
+      described_class.perform_now(imap_email_channel)
+
+      expect(imap_email_channel.reload.imap_inbox_synced_at).to be > mail_date
+    end
+  end
+end
diff --git a/spec/mailboxes/imap/imap_mailbox_spec.rb b/spec/mailboxes/imap/imap_mailbox_spec.rb
new file mode 100644
index 000000000..0f44e2a40
--- /dev/null
+++ b/spec/mailboxes/imap/imap_mailbox_spec.rb
@@ -0,0 +1,93 @@
+require 'rails_helper'
+
+RSpec.describe Imap::ImapMailbox, type: :mailbox do
+  include ActionMailbox::TestHelper
+
+  describe 'add mail as a new conversation in the email inbox' do
+    let(:account) { create(:account) }
+    let(:agent) { create(:user, email: 'agent@example.com', account: account) }
+    let(:channel) do
+      create(:channel_email, imap_enabled: true, imap_address: 'imap.gmail.com',
+                             imap_port: 993, imap_email: 'imap@gmail.com', imap_password: 'password',
+                             account: account)
+    end
+    let(:inbox) { create(:inbox, channel: channel, account: account) }
+    let!(:contact) { create(:contact, email: 'email@gmail.com', phone_number: '+919584546666', account: account, identifier: '123') }
+    let(:conversation) { Conversation.where(inbox_id: channel.inbox).last }
+    let(:class_instance) { described_class.new }
+
+    before do
+      create(:contact_inbox, contact_id: contact.id, inbox_id: channel.inbox.id)
+    end
+
+    context 'when a new email from non existing contact' do
+      let(:inbound_mail) { create_inbound_email_from_mail(from: 'testemail@gmail.com', to: 'imap@gmail.com', subject: 'Hello!') }
+
+      it 'creates the contact and conversation with message' do
+        class_instance.process(inbound_mail.mail, channel)
+        expect(conversation.contact.email).to eq(inbound_mail.mail.from.first)
+        expect(conversation.additional_attributes['source']).to eq('email')
+        expect(conversation.messages.empty?).to be false
+      end
+    end
+
+    context 'when a new email from existing contact' do
+      let(:inbound_mail) { create_inbound_email_from_mail(from: 'email@gmail.com', to: 'imap@gmail.com', subject: 'Hello!') }
+
+      it 'creates a new conversation with message' do
+        class_instance.process(inbound_mail.mail, channel)
+        expect(conversation.contact.email).to eq(contact.email)
+        expect(conversation.additional_attributes['source']).to eq('email')
+        expect(conversation.messages.empty?).to be false
+      end
+    end
+
+    context 'when a reply for existing email conversation' do
+      let(:prev_conversation) { create(:conversation, account: account, inbox: channel.inbox, assignee: agent) }
+      let(:reply_mail) do
+        create_inbound_email_from_mail(from: 'email@gmail.com', to: 'imap@gmail.com', subject: 'Hello!', in_reply_to: 'test-in-reply-to')
+      end
+
+      it 'appends new email to the existing conversation' do
+        create(
+          :message,
+          content: 'Incoming Message',
+          message_type: 'incoming',
+          inbox: inbox,
+          account: account,
+          conversation: prev_conversation
+        )
+        create(
+          :message,
+          content: 'Outgoing Message',
+          message_type: 'outgoing',
+          inbox: inbox,
+          source_id: 'test-in-reply-to',
+          account: account,
+          conversation: prev_conversation
+        )
+
+        expect(prev_conversation.messages.size).to eq(2)
+
+        class_instance.process(reply_mail.mail, channel)
+
+        expect(prev_conversation.messages.size).to eq(3)
+        expect(prev_conversation.messages.last.content_attributes['email']['from']).to eq(reply_mail.mail.from)
+        expect(prev_conversation.messages.last.content_attributes['email']['to']).to eq(reply_mail.mail.to)
+        expect(prev_conversation.messages.last.content_attributes['email']['subject']).to eq(reply_mail.mail.subject)
+        expect(prev_conversation.messages.last.content_attributes['email']['in_reply_to']).to eq(reply_mail.mail.in_reply_to)
+      end
+    end
+
+    context 'when a reply for non existing email conversation' do
+      let(:reply_mail) do
+        create_inbound_email_from_mail(from: 'email@gmail.com', to: 'imap@gmail.com', subject: 'Hello!', in_reply_to: 'test-in-reply-to')
+      end
+
+      it 'creates new email conversation with incoming in-reply-to' do
+        class_instance.process(reply_mail.mail, channel)
+        expect(conversation.additional_attributes['in_reply_to']).to eq(reply_mail.mail.in_reply_to)
+      end
+    end
+  end
+end
diff --git a/spec/mailers/conversation_reply_mailer_spec.rb b/spec/mailers/conversation_reply_mailer_spec.rb
index eb9799ddf..c1d6d18dd 100644
--- a/spec/mailers/conversation_reply_mailer_spec.rb
+++ b/spec/mailers/conversation_reply_mailer_spec.rb
@@ -154,6 +154,32 @@ RSpec.describe ConversationReplyMailer, type: :mailer do
       end
     end
 
+    context 'when smtp enabled for email channel' do
+      let(:smtp_email_channel) do
+        create(:channel_email, smtp_enabled: true, smtp_address: 'smtp.gmail.com', smtp_port: 587, smtp_email: 'smtp@gmail.com',
+                               smtp_password: 'password', smtp_domain: 'smtp.gmail.com', account: account)
+      end
+      let(:conversation) { create(:conversation, assignee: agent, inbox: smtp_email_channel.inbox, account: account).reload }
+      let(:message) { create(:message, conversation: conversation, account: account, message_type: 'outgoing', content: 'Outgoing Message 2') }
+
+      it 'use smtp mail server' do
+        mail = described_class.email_reply(message)
+        expect(mail.delivery_method.settings.empty?).to be false
+        expect(mail.delivery_method.settings[:address]).to eq 'smtp.gmail.com'
+        expect(mail.delivery_method.settings[:port]).to eq 587
+      end
+    end
+
+    context 'when smtp disabled for email channel', :test do
+      let(:conversation) { create(:conversation, assignee: agent, inbox: email_channel.inbox, account: account).reload }
+      let(:message) { create(:message, conversation: conversation, account: account, message_type: 'outgoing', content: 'Outgoing Message 2') }
+
+      it 'use default mail server' do
+        mail = described_class.email_reply(message)
+        expect(mail.delivery_method.settings).to be_empty
+      end
+    end
+
     context 'when custom domain and email is not enabled' do
       let(:inbox) { create(:inbox, account: account) }
       let(:inbox_member) { create(:inbox_member, user: agent, inbox: inbox) }

From 7b44bf5b78a7d3fb761f55bf91747b02562e4d8c Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Fri, 19 Nov 2021 13:55:40 +0530
Subject: [PATCH 13/69] Fix: Filter with label name (#3418)

---
 app/services/conversations/filter_service.rb       | 2 +-
 spec/services/conversations/filter_service_spec.rb | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/services/conversations/filter_service.rb b/app/services/conversations/filter_service.rb
index 5f12bbb6e..d0ee60ca7 100644
--- a/app/services/conversations/filter_service.rb
+++ b/app/services/conversations/filter_service.rb
@@ -35,7 +35,7 @@ class Conversations::FilterService < FilterService
       " conversations.additional_attributes ->> '#{attribute_key}' #{filter_operator_value} #{query_operator} "
     when 'standard'
       if attribute_key == 'labels'
-        " tags.id #{filter_operator_value} #{query_operator} "
+        " tags.name #{filter_operator_value} #{query_operator} "
       else
         " conversations.#{attribute_key} #{filter_operator_value} #{query_operator} "
       end
diff --git a/spec/services/conversations/filter_service_spec.rb b/spec/services/conversations/filter_service_spec.rb
index 29d6cb2cf..e226e96d5 100644
--- a/spec/services/conversations/filter_service_spec.rb
+++ b/spec/services/conversations/filter_service_spec.rb
@@ -74,7 +74,7 @@ describe ::Conversations::FilterService do
           {
             attribute_key: 'labels',
             filter_operator: 'equal_to',
-            values: [1],
+            values: ['support'],
             query_operator: nil
           }.with_indifferent_access
         ]

From da163cc1f73c50a154557a61826960839f36d1dd Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Fri, 19 Nov 2021 16:09:20 +0530
Subject: [PATCH 14/69] chore: Move unscoped styles to global stylesheet
 (#3422)

---
 .../assets/scss/views/_conversation.scss      | 236 ++++++++++++++++++
 app/javascript/widget/assets/scss/woot.scss   |   1 +
 .../widget/components/AgentMessage.vue        |  80 +-----
 .../widget/components/AgentMessageBubble.vue  |  16 --
 .../widget/components/ChatAttachment.vue      |   5 -
 .../widget/components/ConversationWrap.vue    |  12 -
 .../widget/components/UserMessage.vue         |  58 -----
 .../widget/components/UserMessageBubble.vue   |  35 ---
 app/javascript/widget/views/Unread.vue        |  59 -----
 9 files changed, 240 insertions(+), 262 deletions(-)
 create mode 100644 app/javascript/widget/assets/scss/views/_conversation.scss

diff --git a/app/javascript/widget/assets/scss/views/_conversation.scss b/app/javascript/widget/assets/scss/views/_conversation.scss
new file mode 100644
index 000000000..609752f96
--- /dev/null
+++ b/app/javascript/widget/assets/scss/views/_conversation.scss
@@ -0,0 +1,236 @@
+.file-uploads .attachment-button + label {
+  cursor: pointer;
+}
+
+.conversation-wrap {
+  .agent-message {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin: 0 0 $space-micro $space-small;
+    max-width: 88%;
+
+    .avatar-wrap {
+      flex-shrink: 0;
+      height: $space-medium;
+      width: $space-medium;
+
+      .user-thumbnail-box {
+        margin-top: -$space-large;
+      }
+    }
+
+    .message-wrap {
+      flex-grow: 1;
+      flex-shrink: 0;
+      margin-left: $space-small;
+      max-width: 90%;
+    }
+  }
+
+  &.is-typing .messages-wrap div:last-child {
+    .agent-message {
+      .agent-name {
+        display: none;
+      }
+
+      .user-thumbnail-box {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .agent-name {
+    color: $color-body;
+    font-size: $font-size-small;
+    font-weight: $font-weight-medium;
+    margin: $space-small 0;
+    padding-left: $space-micro;
+  }
+
+  .has-attachment {
+    overflow: hidden;
+    padding: 0;
+
+    &.has-text {
+      margin-top: $space-smaller;
+    }
+  }
+
+  .agent-message-wrap {
+    + .agent-message-wrap {
+      margin-top: $space-micro;
+
+      .agent-message .chat-bubble {
+        border-top-left-radius: $space-smaller;
+      }
+    }
+
+    + .user-message-wrap {
+      margin-top: $space-normal;
+    }
+
+    &.has-response + .user-message-wrap {
+      margin-top: $space-micro;
+
+      .chat-bubble {
+        border-top-right-radius: $space-smaller;
+      }
+    }
+
+    &.has-response + .agent-message-wrap {
+      margin-top: $space-normal;
+    }
+  }
+
+  .user-message {
+    align-items: flex-end;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin: 0 $space-smaller $space-micro auto;
+    max-width: 85%;
+    text-align: right;
+
+    .message-wrap {
+      margin-right: $space-small;
+      max-width: 100%;
+    }
+
+    .in-progress {
+      opacity: 0.6;
+    }
+  }
+
+
+  .user.has-attachment {
+    .icon-wrap {
+      color: $color-white;
+    }
+
+    .download {
+      color: $color-white;
+    }
+  }
+
+  .user-message-wrap {
+    + .user-message-wrap {
+      margin-top: $space-micro;
+
+      .user-message .chat-bubble {
+        border-top-right-radius: $space-smaller;
+      }
+    }
+
+    + .agent-message-wrap {
+      margin-top: $space-normal;
+    }
+  }
+
+  p:not(:last-child) {
+    margin-bottom: $space-normal;
+  }
+}
+
+
+.unread-messages {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  margin-top: 0;
+  overflow-y: auto;
+  padding-bottom: $space-small;
+  width: 100%;
+
+  .chat-bubble-wrap {
+    margin-bottom: $space-smaller;
+
+    &:first-child {
+      margin-top: auto;
+    }
+
+    .chat-bubble {
+      border: 1px solid $color-border-dark;
+    }
+
+    + .chat-bubble-wrap {
+      .chat-bubble {
+        border-top-left-radius: $space-smaller;
+      }
+    }
+
+    &:last-child .chat-bubble {
+      border-bottom-left-radius: $space-two;
+    }
+  }
+}
+
+.is-widget-right .unread-wrap {
+  overflow: hidden;
+  text-align: right;
+
+  .chat-bubble-wrap {
+    .chat-bubble {
+      border-bottom-right-radius: $space-smaller;
+      border-radius: $space-two;
+    }
+
+    + .chat-bubble-wrap {
+      .chat-bubble {
+        border-top-right-radius: $space-smaller;
+      }
+    }
+
+    &:last-child .chat-bubble {
+      border-bottom-right-radius: $space-two;
+    }
+  }
+
+  .close-unread-wrap {
+    text-align: right;
+  }
+}
+
+
+.chat-bubble {
+  @include light-shadow;
+  background: $color-woot;
+  border-radius: $space-two;
+  color: $color-white;
+  display: inline-block;
+  font-size: $font-size-default;
+  line-height: 1.5;
+  max-width: 100%;
+  padding: $space-slab $space-normal;
+  text-align: left;
+  word-break: break-word;
+
+  > a {
+    color: $color-primary;
+    word-break: break-all;
+  }
+
+  .link {
+    text-decoration: underline;
+  }
+
+  &.user {
+    border-bottom-right-radius: $space-smaller;
+
+    > a {
+      color: $color-white;
+    }
+  }
+
+  &.agent {
+    background: $color-white;
+    border-bottom-left-radius: $space-smaller;
+    color: $color-body;
+
+    .link {
+      color: $color-woot;
+      word-break: break-word;
+    }
+  }
+}
diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss
index 5d8a44fdf..90948ddaa 100755
--- a/app/javascript/widget/assets/scss/woot.scss
+++ b/app/javascript/widget/assets/scss/woot.scss
@@ -9,6 +9,7 @@
 @import 'utilities';
 @import 'shared/assets/fonts/widget_fonts';
 @import '~spinkit/scss/spinners/7-three-bounce';
+@import 'views/conversation';
 
 html,
 body {
diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue
index 4366dcc2e..e137e9940 100755
--- a/app/javascript/widget/components/AgentMessage.vue
+++ b/app/javascript/widget/components/AgentMessage.vue
@@ -145,8 +145,9 @@ export default {
 
       if (this.messageContentAttributes.submitted_values) {
         if (this.contentType === 'input_select') {
-          const [selectionOption = {}] =
-            this.messageContentAttributes.submitted_values;
+          const [
+            selectionOption = {},
+          ] = this.messageContentAttributes.submitted_values;
           return { content: selectionOption.title || selectionOption.value };
         }
       }
@@ -171,78 +172,3 @@ export default {
   },
 };
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss">
-@import '~widget/assets/scss/variables.scss';
-
-.conversation-wrap {
-  .agent-message {
-    align-items: flex-end;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    margin: 0 0 $space-micro $space-small;
-    max-width: 88%;
-
-    .avatar-wrap {
-      height: $space-medium;
-      width: $space-medium;
-      flex-shrink: 0;
-
-      .user-thumbnail-box {
-        margin-top: -$space-large;
-      }
-    }
-
-    .message-wrap {
-      flex-grow: 1;
-      flex-shrink: 0;
-      margin-left: $space-small;
-      max-width: 90%;
-    }
-  }
-
-  .agent-name {
-    color: $color-body;
-    font-size: $font-size-small;
-    font-weight: $font-weight-medium;
-    margin: $space-small 0;
-    padding-left: $space-micro;
-  }
-
-  .has-attachment {
-    padding: 0;
-    overflow: hidden;
-
-    &.has-text {
-      margin-top: $space-smaller;
-    }
-  }
-
-  .agent-message-wrap {
-    + .agent-message-wrap {
-      margin-top: $space-micro;
-
-      .agent-message .chat-bubble {
-        border-top-left-radius: $space-smaller;
-      }
-    }
-
-    + .user-message-wrap {
-      margin-top: $space-normal;
-    }
-
-    &.has-response + .user-message-wrap {
-      margin-top: $space-micro;
-      .chat-bubble {
-        border-top-right-radius: $space-smaller;
-      }
-    }
-
-    &.has-response + .agent-message-wrap {
-      margin-top: $space-normal;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index 2aec14e05..467b99b47 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -129,22 +129,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import '~widget/assets/scss/variables.scss';
-
-.chat-bubble {
-  &.agent {
-    background: $color-white;
-    border-bottom-left-radius: $space-smaller;
-    color: $color-body;
-
-    .link {
-      word-break: break-word;
-      color: $color-woot;
-    }
-  }
-}
-</style>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue
index d1d789d61..e33c3812e 100755
--- a/app/javascript/widget/components/ChatAttachment.vue
+++ b/app/javascript/widget/components/ChatAttachment.vue
@@ -66,8 +66,3 @@ export default {
   },
 };
 </script>
-<style lang="scss">
-.file-uploads .attachment-button + label {
-  cursor: pointer;
-}
-</style>
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index d51380837..828f37e22 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/app/javascript/widget/components/ConversationWrap.vue
@@ -120,15 +120,3 @@ export default {
   text-align: center;
 }
 </style>
-<style lang="scss">
-.conversation-wrap.is-typing .messages-wrap div:last-child {
-  .agent-message {
-    .agent-name {
-      display: none;
-    }
-    .user-thumbnail-box {
-      margin-top: 0;
-    }
-  }
-}
-</style>
diff --git a/app/javascript/widget/components/UserMessage.vue b/app/javascript/widget/components/UserMessage.vue
index 640ac4608..b02e8caff 100755
--- a/app/javascript/widget/components/UserMessage.vue
+++ b/app/javascript/widget/components/UserMessage.vue
@@ -74,61 +74,3 @@ export default {
   },
 };
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss">
-@import '~widget/assets/scss/variables.scss';
-.conversation-wrap {
-  .user-message {
-    align-items: flex-end;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin: 0 $space-smaller $space-micro auto;
-    max-width: 85%;
-    text-align: right;
-
-    .message-wrap {
-      margin-right: $space-small;
-      max-width: 100%;
-    }
-
-    .in-progress {
-      opacity: 0.6;
-    }
-  }
-
-  .has-attachment {
-    padding: 0;
-    overflow: hidden;
-  }
-
-  .user.has-attachment {
-    .icon-wrap {
-      color: $color-white;
-    }
-
-    .download {
-      color: $color-white;
-    }
-  }
-
-  .user-message-wrap {
-    + .user-message-wrap {
-      margin-top: $space-micro;
-
-      .user-message .chat-bubble {
-        border-top-right-radius: $space-smaller;
-      }
-    }
-
-    + .agent-message-wrap {
-      margin-top: $space-normal;
-    }
-  }
-
-  p:not(:last-child) {
-    margin-bottom: $space-normal;
-  }
-}
-</style>
diff --git a/app/javascript/widget/components/UserMessageBubble.vue b/app/javascript/widget/components/UserMessageBubble.vue
index 8b47ac9c1..073766545 100755
--- a/app/javascript/widget/components/UserMessageBubble.vue
+++ b/app/javascript/widget/components/UserMessageBubble.vue
@@ -29,41 +29,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
-
-.chat-bubble {
-  @include light-shadow;
-  background: $color-woot;
-  border-radius: $space-two;
-  color: $color-white;
-  display: inline-block;
-  font-size: $font-size-default;
-  line-height: 1.5;
-  padding: $space-slab $space-normal $space-slab $space-normal;
-  text-align: left;
-  word-break: break-word;
-  max-width: 100%;
-
-  > a {
-    color: $color-primary;
-    word-break: break-all;
-  }
-
-  .link {
-    text-decoration: underline;
-  }
-
-  &.user {
-    border-bottom-right-radius: $space-smaller;
-
-    > a {
-      color: $color-white;
-    }
-  }
-}
-</style>
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 
diff --git a/app/javascript/widget/views/Unread.vue b/app/javascript/widget/views/Unread.vue
index 40be39dfb..7eafbdbe2 100644
--- a/app/javascript/widget/views/Unread.vue
+++ b/app/javascript/widget/views/Unread.vue
@@ -178,62 +178,3 @@ export default {
   }
 }
 </style>
-
-<style lang="scss">
-@import '~widget/assets/scss/variables';
-
-.unread-messages {
-  width: 100%;
-  margin-top: 0;
-  padding-bottom: $space-small;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  overflow-y: auto;
-
-  .chat-bubble-wrap {
-    margin-bottom: $space-smaller;
-
-    &:first-child {
-      margin-top: auto;
-    }
-    .chat-bubble {
-      border: 1px solid $color-border-dark;
-    }
-
-    + .chat-bubble-wrap {
-      .chat-bubble {
-        border-top-left-radius: $space-smaller;
-      }
-    }
-    &:last-child .chat-bubble {
-      border-bottom-left-radius: $space-two;
-    }
-  }
-}
-
-.is-widget-right .unread-wrap {
-  text-align: right;
-  overflow: hidden;
-
-  .chat-bubble-wrap {
-    .chat-bubble {
-      border-radius: $space-two;
-      border-bottom-right-radius: $space-smaller;
-    }
-
-    + .chat-bubble-wrap {
-      .chat-bubble {
-        border-top-right-radius: $space-smaller;
-      }
-    }
-    &:last-child .chat-bubble {
-      border-bottom-right-radius: $space-two;
-    }
-  }
-
-  .close-unread-wrap {
-    text-align: right;
-  }
-}
-</style>

From c332e2df125ad08b2371a5a66b3bba42e98aa34b Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Sat, 20 Nov 2021 12:08:45 +0530
Subject: [PATCH 15/69] chore: Add Code of Conduct

---
 CODE_OF_CONDUCT.md | 128 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 CODE_OF_CONDUCT.md

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 000000000..79a2f8d21
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+hello@chatwoot.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

From e93e43532afc7df4a38c7eacf268d4d40b20ed23 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Mon, 22 Nov 2021 12:06:43 +0530
Subject: [PATCH 16/69] fix: Pass label title instead of id to filter API
 (#3432)

---
 .../widgets/conversation/ConversationAdvancedFilter.vue     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 13ff1fcd6..42186f21e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -41,13 +41,13 @@
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
 import { required, requiredIf } from 'vuelidate/lib/validators';
-import filterInputBox from './components/FilterInput.vue';
+import FilterInputBox from './components/FilterInput.vue';
 import languages from './advancedFilterItems/languages';
 import countries from './advancedFilterItems/countries';
 
 export default {
   components: {
-    filterInputBox,
+    FilterInputBox,
   },
   mixins: [alertMixin],
   props: {
@@ -155,7 +155,7 @@ export default {
         case 'labels':
           return this.$store.getters['labels/getLabels'].map(i => {
             return {
-              id: i.id,
+              id: i.title,
               name: i.title,
             };
           });

From 1be7c2d72cc31683cfaef9111877cef3b0a560c7 Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <vishnu@chatwoot.com>
Date: Mon, 22 Nov 2021 13:20:35 +0530
Subject: [PATCH 17/69] chore: add DigitialOcean 1-click deployment button
 (#3421)

---
 README.md | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 41f15553d..eb083bec3 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,10 @@
 
 <p align="center">
   <a href="https://heroku.com/deploy?template=https://github.com/chatwoot/chatwoot/tree/master" alt="Deploy to Heroku">
-     <img alt="Deploy" src="https://www.herokucdn.com/deploy/button.svg"/>
+     <img width="150" alt="Deploy" src="https://www.herokucdn.com/deploy/button.svg"/>
+  </a>
+  <a href="https://marketplace.digitalocean.com/apps/chatwoot?refcode=f2238426a2a8" alt="Deploy to DigitalOcean">
+     <img width="200" alt="Deploy to DO" src="https://www.deploytodo.com/do-btn-blue.svg"/>
   </a>
 </p>
 
@@ -81,9 +84,18 @@ Deploying Chatwoot to Heroku is a breeze. It's as simple as clicking this button
 
 Follow this [link](https://www.chatwoot.com/docs/environment-variables) to understand setting the correct environment variables for the app to work with all the features. There might be breakages if you do not set the relevant environment variables.
 
+
+### DigitalOcean 1-Click Kubernetes deployment
+
+Chatwoot now supports 1-Click deployment to DigitalOcean as a kubernetes app.
+
+<a href="https://marketplace.digitalocean.com/apps/chatwoot?refcode=f2238426a2a8" alt="Deploy to DigitalOcean">
+  <img width="200" alt="Deploy to DO" src="https://www.deploytodo.com/do-btn-blue.svg"/>
+</a>
+
 ### Other deployment options
 
-Please follow [deployment architecture guide](https://www.chatwoot.com/docs/deployment/architecture) to deploy with Docker or Caprover.
+For other supported options, checkout our [deployment page](https://chatwoot.com/deploy). 
 
 ## Security
 

From 1a8b8f090021f3e55710510040f898fe9eae5896 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Mon, 22 Nov 2021 15:05:29 +0530
Subject: [PATCH 18/69] chore: Move referrerHost to appConfig store (#3433)

---
 app/javascript/sdk/IFrameHelper.js            | 16 +++----
 app/javascript/sdk/bubbleHelpers.js           | 12 ++++-
 app/javascript/shared/components/Branding.vue | 43 +++++++-----------
 app/javascript/shared/constants/busEvents.js  |  1 -
 app/javascript/widget/App.vue                 | 45 ++++---------------
 .../widget/helpers/IframeEventHelper.js       | 27 +++++++++++
 .../widget/store/modules/appConfig.js         | 16 +++++--
 .../modules/specs/appConfig/actions.spec.js   | 22 +++++++++
 .../modules/specs/appConfig/getters.spec.js   | 16 +++++++
 .../modules/specs/appConfig/mutations.spec.js | 19 ++++++++
 app/javascript/widget/store/types.js          |  2 +
 11 files changed, 138 insertions(+), 81 deletions(-)
 create mode 100644 app/javascript/widget/helpers/IframeEventHelper.js
 create mode 100644 app/javascript/widget/store/modules/specs/appConfig/actions.spec.js
 create mode 100644 app/javascript/widget/store/modules/specs/appConfig/getters.spec.js
 create mode 100644 app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js

diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index 098171fe5..68bf83f50 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -3,7 +3,6 @@ import {
   wootOn,
   addClass,
   loadCSS,
-  removeClass,
   onLocationChangeListener,
 } from './DOMHelpers';
 import {
@@ -19,6 +18,8 @@ import {
   onClickChatBubble,
   onBubbleClick,
   setBubbleText,
+  addUnreadClass,
+  removeUnreadClass,
 } from './bubbleHelpers';
 import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
 
@@ -171,8 +172,7 @@ export const IFrameHelper = {
       if (!isOpen && unreadMessageCount > 0) {
         IFrameHelper.sendMessage('set-unread-view');
         onBubbleClick({ toggleValue });
-        const holderEl = document.querySelector('.woot-widget-holder');
-        addClass(holderEl, 'has-unread-view');
+        addUnreadClass();
       }
     },
 
@@ -181,8 +181,7 @@ export const IFrameHelper = {
       const toggleValue = true;
       if (!isOpen) {
         onBubbleClick({ toggleValue });
-        const holderEl = document.querySelector('.woot-widget-holder');
-        addClass(holderEl, 'has-unread-view');
+        addUnreadClass();
       }
     },
 
@@ -195,12 +194,7 @@ export const IFrameHelper = {
 
     resetUnreadMode: () => {
       IFrameHelper.sendMessage('unset-unread-view');
-      IFrameHelper.events.removeUnreadClass();
-    },
-
-    removeUnreadClass: () => {
-      const holderEl = document.querySelector('.woot-widget-holder');
-      removeClass(holderEl, 'has-unread-view');
+      removeUnreadClass();
     },
 
     closeChat: () => {
diff --git a/app/javascript/sdk/bubbleHelpers.js b/app/javascript/sdk/bubbleHelpers.js
index 101f76b5c..740d83733 100644
--- a/app/javascript/sdk/bubbleHelpers.js
+++ b/app/javascript/sdk/bubbleHelpers.js
@@ -1,4 +1,4 @@
-import { addClass, toggleClass, wootOn } from './DOMHelpers';
+import { addClass, removeClass, toggleClass, wootOn } from './DOMHelpers';
 import { IFrameHelper } from './IFrameHelper';
 import { BUBBLE_DESIGN } from './constants';
 
@@ -74,3 +74,13 @@ export const onBubbleClick = (props = {}) => {
 export const onClickChatBubble = () => {
   wootOn(bubbleHolder, 'click', onBubbleClick);
 };
+
+export const addUnreadClass = () => {
+  const holderEl = document.querySelector('.woot-widget-holder');
+  addClass(holderEl, 'has-unread-view');
+};
+
+export const removeUnreadClass = () => {
+  const holderEl = document.querySelector('.woot-widget-holder');
+  removeClass(holderEl, 'has-unread-view');
+};
diff --git a/app/javascript/shared/components/Branding.vue b/app/javascript/shared/components/Branding.vue
index 6a284a6bd..faa212e9e 100644
--- a/app/javascript/shared/components/Branding.vue
+++ b/app/javascript/shared/components/Branding.vue
@@ -1,23 +1,27 @@
 <template>
-  <div v-if="globalConfig.brandName" class="branding">
+  <div v-if="globalConfig.brandName" class="px-0 py-3 flex justify-center">
     <a
       :href="brandRedirectURL"
       rel="noreferrer noopener nofollow"
       target="_blank"
-      class="branding--link w-full justify-center"
+      class="branding--link justify-center"
     >
-      <img :alt="globalConfig.brandName" :src="globalConfig.logoThumbnail" />
+      <img
+        class="branding--image"
+        :alt="globalConfig.brandName"
+        :src="globalConfig.logoThumbnail"
+      />
       <span>
         {{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
       </span>
     </a>
   </div>
-  <div v-else class="brand--alternative" />
+  <div v-else class="p-3" />
 </template>
 
 <script>
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { mapGetters } from 'vuex';
 
 const {
   LOGO_THUMBNAIL: logoThumbnail,
@@ -29,7 +33,6 @@ export default {
   mixins: [globalConfigMixin],
   data() {
     return {
-      referrerHost: '',
       globalConfig: {
         brandName,
         logoThumbnail,
@@ -38,6 +41,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters({ referrerHost: 'appConfig/getReferrerHost' }),
     brandRedirectURL() {
       const baseURL = `${this.globalConfig.widgetBrandURL}?utm_source=widget_branding`;
       if (this.referrerHost) {
@@ -46,35 +50,22 @@ export default {
       return baseURL;
     },
   },
-  mounted() {
-    bus.$on(BUS_EVENTS.SET_REFERRER_HOST, referrerHost => {
-      this.referrerHost = referrerHost;
-    });
-  },
 };
 </script>
 
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
-.branding {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding: $space-normal 0 $space-slab;
-  text-align: center;
-
-  img {
-    margin-right: $space-smaller;
-    max-width: $space-slab;
-    max-height: $space-slab;
-  }
+.branding--image {
+  margin-right: $space-smaller;
+  max-width: $space-slab;
+  max-height: $space-slab;
 }
 
 .branding--link {
   color: $color-light-gray;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   filter: grayscale(1);
   font-size: $font-size-small;
   opacity: 0.9;
@@ -86,8 +77,4 @@ export default {
     color: $color-gray;
   }
 }
-
-.brand--alternative {
-  padding: $space-slab;
-}
 </style>
diff --git a/app/javascript/shared/constants/busEvents.js b/app/javascript/shared/constants/busEvents.js
index f104dc992..0c496818f 100644
--- a/app/javascript/shared/constants/busEvents.js
+++ b/app/javascript/shared/constants/busEvents.js
@@ -1,5 +1,4 @@
 export const BUS_EVENTS = {
-  SET_REFERRER_HOST: 'SET_REFERRER_HOST',
   SET_TWEET_REPLY: 'SET_TWEET_REPLY',
   SHOW_ALERT: 'SHOW_ALERT',
   START_NEW_CONVERSATION: 'START_NEW_CONVERSATION',
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 81c4efcb0..98be1b767 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -20,9 +20,11 @@ import configMixin from './mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
 import Router from './views/Router';
 import { getLocale } from './helpers/urlParamsHelper';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { isEmptyObject } from 'widget/helpers/utils';
-
+import {
+  getExtraSpaceToScroll,
+  loadedEventConfig,
+} from './helpers/IframeEventHelper';
 export default {
   name: 'App',
   components: {
@@ -99,7 +101,7 @@ export default {
     this.registerCampaignEvents();
   },
   methods: {
-    ...mapActions('appConfig', ['setWidgetColor']),
+    ...mapActions('appConfig', ['setWidgetColor', 'setReferrerHost']),
     ...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']),
     ...mapActions('campaign', [
       'initCampaigns',
@@ -120,7 +122,7 @@ export default {
     },
     setIframeHeight(isFixedHeight) {
       this.$nextTick(() => {
-        const extraHeight = this.getExtraSpaceToscroll();
+        const extraHeight = getExtraSpaceToScroll();
         IFrameHelper.sendMessage({
           event: 'updateIframeHeight',
           isFixedHeight,
@@ -245,7 +247,7 @@ export default {
             isInBusinessHours: this.isInBusinessHours,
           });
           window.referrerURL = referrerURL;
-          bus.$emit(BUS_EVENTS.SET_REFERRER_HOST, referrerHost);
+          this.setReferrerHost(referrerHost);
         } else if (message.event === 'toggle-close-button') {
           this.isMobile = message.showClose;
         } else if (message.event === 'push-event') {
@@ -286,39 +288,10 @@ export default {
       });
     },
     sendLoadedEvent() {
-      IFrameHelper.sendMessage({
-        event: 'loaded',
-        config: {
-          authToken: window.authToken,
-          channelConfig: window.chatwootWebChannel,
-        },
-      });
+      IFrameHelper.sendMessage(loadedEventConfig());
     },
     sendRNWebViewLoadedEvent() {
-      RNHelper.sendMessage({
-        event: 'loaded',
-        config: {
-          authToken: window.authToken,
-          channelConfig: window.chatwootWebChannel,
-        },
-      });
-    },
-    getExtraSpaceToscroll: () => {
-      // This function calculates the extra space needed for the view to
-      // accomodate the height of close button + height of
-      // read messages button. So that scrollbar won't appear
-      const unreadMessageWrap = document.querySelector('.unread-messages');
-      const unreadCloseWrap = document.querySelector('.close-unread-wrap');
-      const readViewWrap = document.querySelector('.open-read-view-wrap');
-
-      if (!unreadMessageWrap) return 0;
-
-      // 24px to compensate the paddings
-      let extraHeight = 24 + unreadMessageWrap.scrollHeight;
-      if (unreadCloseWrap) extraHeight += unreadCloseWrap.scrollHeight;
-      if (readViewWrap) extraHeight += readViewWrap.scrollHeight;
-
-      return extraHeight;
+      RNHelper.sendMessage(loadedEventConfig());
     },
   },
 };
diff --git a/app/javascript/widget/helpers/IframeEventHelper.js b/app/javascript/widget/helpers/IframeEventHelper.js
new file mode 100644
index 000000000..f09cb0f47
--- /dev/null
+++ b/app/javascript/widget/helpers/IframeEventHelper.js
@@ -0,0 +1,27 @@
+export const loadedEventConfig = () => {
+  return {
+    event: 'loaded',
+    config: {
+      authToken: window.authToken,
+      channelConfig: window.chatwootWebChannel,
+    },
+  };
+};
+
+export const getExtraSpaceToScroll = () => {
+  // This function calculates the extra space needed for the view to
+  // accomodate the height of close button + height of
+  // read messages button. So that scrollbar won't appear
+  const unreadMessageWrap = document.querySelector('.unread-messages');
+  const unreadCloseWrap = document.querySelector('.close-unread-wrap');
+  const readViewWrap = document.querySelector('.open-read-view-wrap');
+
+  if (!unreadMessageWrap) return 0;
+
+  // 24px to compensate the paddings
+  let extraHeight = 24 + unreadMessageWrap.scrollHeight;
+  if (unreadCloseWrap) extraHeight += unreadCloseWrap.scrollHeight;
+  if (readViewWrap) extraHeight += readViewWrap.scrollHeight;
+
+  return extraHeight;
+};
diff --git a/app/javascript/widget/store/modules/appConfig.js b/app/javascript/widget/store/modules/appConfig.js
index 47a7098cf..e04f868b3 100644
--- a/app/javascript/widget/store/modules/appConfig.js
+++ b/app/javascript/widget/store/modules/appConfig.js
@@ -1,23 +1,31 @@
-import { SET_WIDGET_COLOR } from '../types';
+import { SET_REFERRER_HOST, SET_WIDGET_COLOR } from '../types';
 
 const state = {
   widgetColor: '',
+  referrerHost: '',
 };
 
-const getters = {
+export const getters = {
   getWidgetColor: $state => $state.widgetColor,
+  getReferrerHost: $state => $state.referrerHost,
 };
 
-const actions = {
+export const actions = {
   setWidgetColor({ commit }, data) {
     commit(SET_WIDGET_COLOR, data);
   },
+  setReferrerHost({ commit }, referrerHost) {
+    commit(SET_REFERRER_HOST, referrerHost);
+  },
 };
 
-const mutations = {
+export const mutations = {
   [SET_WIDGET_COLOR]($state, data) {
     $state.widgetColor = data.widgetColor;
   },
+  [SET_REFERRER_HOST]($state, referrerHost) {
+    $state.referrerHost = referrerHost;
+  },
 };
 
 export default {
diff --git a/app/javascript/widget/store/modules/specs/appConfig/actions.spec.js b/app/javascript/widget/store/modules/specs/appConfig/actions.spec.js
new file mode 100644
index 000000000..cf1366226
--- /dev/null
+++ b/app/javascript/widget/store/modules/specs/appConfig/actions.spec.js
@@ -0,0 +1,22 @@
+import { actions } from '../../appConfig';
+
+const commit = jest.fn();
+describe('#actions', () => {
+  describe('#setReferrerHost', () => {
+    it('creates actions properly', () => {
+      actions.setReferrerHost({ commit }, 'www.chatwoot.com');
+      expect(commit.mock.calls).toEqual([
+        ['SET_REFERRER_HOST', 'www.chatwoot.com'],
+      ]);
+    });
+  });
+
+  describe('#setWidgetColor', () => {
+    it('creates actions properly', () => {
+      actions.setWidgetColor({ commit }, { widgetColor: '#eaeaea' });
+      expect(commit.mock.calls).toEqual([
+        ['SET_WIDGET_COLOR', { widgetColor: '#eaeaea' }],
+      ]);
+    });
+  });
+});
diff --git a/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js b/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js
new file mode 100644
index 000000000..045933aa8
--- /dev/null
+++ b/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js
@@ -0,0 +1,16 @@
+import { getters } from '../../appConfig';
+
+describe('#getters', () => {
+  describe('#getWidgetColor', () => {
+    it('returns correct value', () => {
+      const state = { widgetColor: '#00bcd4' };
+      expect(getters.getWidgetColor(state)).toEqual('#00bcd4');
+    });
+  });
+  describe('#getReferrerHost', () => {
+    it('returns correct value', () => {
+      const state = { referrerHost: 'www.chatwoot.com' };
+      expect(getters.getReferrerHost(state)).toEqual('www.chatwoot.com');
+    });
+  });
+});
diff --git a/app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js b/app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js
new file mode 100644
index 000000000..f8d90bf26
--- /dev/null
+++ b/app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js
@@ -0,0 +1,19 @@
+import { mutations } from '../../appConfig';
+
+describe('#mutations', () => {
+  describe('#SET_REFERRER_HOST', () => {
+    it('sets referrer host properly', () => {
+      const state = { referrerHost: '' };
+      mutations.SET_REFERRER_HOST(state, 'www.chatwoot.com');
+      expect(state.referrerHost).toEqual('www.chatwoot.com');
+    });
+  });
+
+  describe('#SET_WIDGET_COLOR', () => {
+    it('sets widget color properly', () => {
+      const state = { widgetColor: '' };
+      mutations.SET_WIDGET_COLOR(state, { widgetColor: '#00bcd4' });
+      expect(state.widgetColor).toEqual('#00bcd4');
+    });
+  });
+});
diff --git a/app/javascript/widget/store/types.js b/app/javascript/widget/store/types.js
index 0ade84403..a5ab12420 100644
--- a/app/javascript/widget/store/types.js
+++ b/app/javascript/widget/store/types.js
@@ -1,4 +1,6 @@
 export const SET_WIDGET_COLOR = 'SET_WIDGET_COLOR';
+export const SET_REFERRER_HOST = 'SET_REFERRER_HOST';
+
 export const SET_CONVERSATION_ATTRIBUTES = 'SET_CONVERSATION_ATTRIBUTES';
 export const UPDATE_CONVERSATION_ATTRIBUTES = 'UPDATE_CONVERSATION_ATTRIBUTES';
 export const CLEAR_CONVERSATION_ATTRIBUTES = 'CLEAR_CONVERSATION_ATTRIBUTES';

From 7f8204a9dad3e907646085519e455e206fcbd568 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Tue, 23 Nov 2021 09:42:47 +0530
Subject: [PATCH 19/69] fix: Required check for Conversation filters (#3442)

---
 .../conversation/ConversationAdvancedFilter.vue       | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 42186f21e..288b7cc1f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -66,13 +66,10 @@ export default {
       $each: {
         values: {
           required: requiredIf(prop => {
-            let userInputRequired = true;
-            if (
-              prop.filter_operator !== 'is_present' ||
-              prop.filter_operator !== 'is_not_present'
-            )
-              userInputRequired = false;
-            return userInputRequired;
+            return !(
+              prop.filter_operator === 'is_present' ||
+              prop.filter_operator === 'is_not_present'
+            );
           }),
         },
       },

From e182b59002f81fa8945f1e7475922a7b56f833c1 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 23 Nov 2021 15:26:26 +0530
Subject: [PATCH 20/69] bug: fixes link icon doesn't work in the campaign
 editor (#3447)

---
 .../dashboard/components/widgets/WootWriter/Editor.vue     | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
index b4627cc17..ac9c3b628 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
@@ -296,6 +296,13 @@ export default {
   overflow: auto;
 }
 
+.ProseMirror-prompt {
+  z-index: var(--z-index-highest);
+  background: var(--color-background-light);
+  border-radius: var(--border-radius-normal);
+  border: 1px solid var(--color-border);
+}
+
 .is-private {
   .prosemirror-mention-node {
     font-weight: var(--font-weight-medium);

From 9103fbbddeb24c2b5dba10f75087cb9b2ca6ef22 Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Tue, 23 Nov 2021 16:04:01 +0530
Subject: [PATCH 21/69] chore: Update schema files (#3438)

- removes the unintended table from schema files
---
 .../20211122112607_remove_invalid_migration.rb      | 13 +++++++++++++
 db/schema.rb                                        | 10 +---------
 2 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 db/migrate/20211122112607_remove_invalid_migration.rb

diff --git a/db/migrate/20211122112607_remove_invalid_migration.rb b/db/migrate/20211122112607_remove_invalid_migration.rb
new file mode 100644
index 000000000..51a9701c8
--- /dev/null
+++ b/db/migrate/20211122112607_remove_invalid_migration.rb
@@ -0,0 +1,13 @@
+class RemoveInvalidMigration < ActiveRecord::Migration[6.1]
+  def change
+    return unless ActiveRecord::Base.connection.table_exists? 'actions'
+
+    drop_table :actions do |t|
+      t.string :name
+      t.jsonb :execution_list
+      t.datetime :created_at
+      t.datetime :updated_at
+      t.index ['name'], name: 'index_actions_on_name'
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index a05c3e7da..b8ea425a8 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2021_11_22_061012) do
+ActiveRecord::Schema.define(version: 2021_11_22_112607) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
@@ -63,14 +63,6 @@ ActiveRecord::Schema.define(version: 2021_11_22_061012) do
     t.index ["message_id", "message_checksum"], name: "index_action_mailbox_inbound_emails_uniqueness", unique: true
   end
 
-  create_table "actions", force: :cascade do |t|
-    t.string "name", null: false
-    t.jsonb "execution_list", default: {}, null: false
-    t.datetime "created_at", precision: 6, null: false
-    t.datetime "updated_at", precision: 6, null: false
-    t.index ["name"], name: "index_actions_on_name"
-  end
-
   create_table "active_storage_attachments", force: :cascade do |t|
     t.string "name", null: false
     t.string "record_type", null: false

From 11cd7fd6c54a898cb54793102b87c02e0cc019ce Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Tue, 23 Nov 2021 16:36:44 +0530
Subject: [PATCH 22/69] Feat: Added support changes for contact filters (#3435)

---
 lib/filters/filter_keys.json                  | 78 ++++++++-----------
 spec/services/contacts/filter_service_spec.rb |  8 +-
 2 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/lib/filters/filter_keys.json b/lib/filters/filter_keys.json
index 6c284d1b5..5b2b63c69 100644
--- a/lib/filters/filter_keys.json
+++ b/lib/filters/filter_keys.json
@@ -79,54 +79,47 @@
     }
   },
   "contacts": {
-    "assignee_id": {
-      "attribute_name": "Assignee Name",
+    "name": {
+      "attribute_name": "Name",
       "input_type": "search_box with name tags/plain text",
       "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
+      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
       "attribute_type": "standard"
     },
-    "contact_id": {
-      "attribute_name": "Contact Name",
-      "input_type": "plain_text",
+    "phone_number": {
+      "attribute_name": "Phone Number",
+      "input_type": "search_box with name tags/plain text",
       "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
+      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
       "attribute_type": "standard"
     },
-    "inbox_id": {
-      "attribute_name": "Inbox Name",
-      "input_type": "search_box",
+    "email": {
+      "attribute_name": "Email",
+      "input_type":  "search_box with name tags/plain text",
       "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
+      "filter_operators":  [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
       "attribute_type": "standard"
     },
-    "team_id": {
-      "attribute_name": "Team Name",
-      "input_type": "search_box",
-      "data_type": "number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
+    "contact_identifier": {
+      "attribute_name": "Contact Identifier",
+      "input_type": "search_box with name tags/plain text",
+      "data_type": "text",
+      "filter_operators": [ "equal_to", "not_equal_to" ],
       "attribute_type": "standard"
     },
-    "id": {
-      "attribute_name": "Conversation Identifier",
+    "country_code": {
+      "attribute_name": "Country",
       "input_type": "textbox",
-      "data_type": "Number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "campaign_id": {
-      "attribute_name": "Campaign Name",
-      "input_type": "textbox",
-      "data_type": "Number",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "is_present", "is_not_present" ],
-      "attribute_type": "standard"
-    },
-    "labels": {
-      "attribute_name": "Labels",
-      "input_type": "tags",
       "data_type": "text",
-      "filter_operators": ["exactly_equal_to", "contains", "does_not_contain" ],
-      "attribute_type": "standard"
+      "filter_operators": [ "equal_to", "not_equal_to" ],
+      "attribute_type": "additional_attributes"
+    },
+    "city": {
+      "attribute_name": "City",
+      "input_type": "textbox",
+      "data_type": "text",
+      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
+      "attribute_type": "additional_attributes"
     },
     "browser_language": {
       "attribute_name": "Browser Language",
@@ -135,19 +128,12 @@
       "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
       "attribute_type": "additional_attributes"
     },
-    "country_code": {
-      "attribute_name": "Country Name",
-      "input_type": "textbox",
+    "labels": {
+      "attribute_name": "Labels",
+      "input_type": "tags",
       "data_type": "text",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
-    },
-    "referer": {
-      "attribute_name": "Referer link",
-      "input_type": "textbox",
-      "data_type": "link",
-      "filter_operators": [ "equal_to", "not_equal_to", "contains", "does_not_contain", "present", "is_not_present" ],
-      "attribute_type": "additional_attributes"
+      "filter_operators": ["exactly_equal_to", "contains", "does_not_contain" ],
+      "attribute_type": "standard"
     }
   }
 }
diff --git a/spec/services/contacts/filter_service_spec.rb b/spec/services/contacts/filter_service_spec.rb
index 0ba1d1f7e..8275d0d52 100644
--- a/spec/services/contacts/filter_service_spec.rb
+++ b/spec/services/contacts/filter_service_spec.rb
@@ -26,6 +26,12 @@ describe ::Contacts::FilterService do
             attribute_key: 'browser_language',
             filter_operator: 'equal_to',
             values: ['en'],
+            query_operator: 'AND'
+          }.with_indifferent_access,
+          {
+            attribute_key: 'name',
+            filter_operator: 'equal_to',
+            values: [contact.name],
             query_operator: nil
           }.with_indifferent_access
         ]
@@ -37,7 +43,7 @@ describe ::Contacts::FilterService do
         expect(result.length).to be 2
       end
 
-      it 'filter conversations by tags' do
+      it 'filter contact by tags' do
         Contact.last.update_labels('support')
         params[:payload] = [
           {

From 0530e9491c6a2bd87b1b625a2b101d8929fc7beb Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 23 Nov 2021 17:37:01 +0530
Subject: [PATCH 23/69] fix: Use role permissions from accounts instead of role
 attribute (#3445)

Use role permissions from accounts instead of the role attribute

Fixes: #2557
---
 app/javascript/dashboard/routes/index.js      | 17 +++++++---
 app/javascript/dashboard/routes/index.spec.js | 33 ++++++++-----------
 .../dashboard/store/modules/auth.js           |  7 ++--
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/app/javascript/dashboard/routes/index.js b/app/javascript/dashboard/routes/index.js
index 83ae20533..b2d19cf7f 100644
--- a/app/javascript/dashboard/routes/index.js
+++ b/app/javascript/dashboard/routes/index.js
@@ -21,6 +21,11 @@ window.roleWiseRoutes = {
   administrator: [],
 };
 
+const getUserRole = ({ accounts } = {}, accountId) => {
+  const currentAccount = accounts.find(account => account.id === accountId);
+  return currentAccount ? currentAccount.role : null;
+};
+
 // generateRoleWiseRoute - updates window object with agent/admin route
 const generateRoleWiseRoute = route => {
   route.forEach(element => {
@@ -57,7 +62,10 @@ const routeValidators = [
   {
     protected: false,
     loggedIn: true,
-    handler: () => 'dashboard',
+    handler: () => {
+      const user = auth.getCurrentUser();
+      return `accounts/${user.account_id}/dashboard`;
+    },
   },
   {
     protected: true,
@@ -69,8 +77,9 @@ const routeValidators = [
     loggedIn: true,
     handler: to => {
       const user = auth.getCurrentUser();
-      const isAccessible = routeIsAccessibleFor(to, user.role);
-      return isAccessible ? null : 'dashboard';
+      const userRole = getUserRole(user, Number(to.params.accountId));
+      const isAccessible = routeIsAccessibleFor(to.name, userRole);
+      return isAccessible ? null : `accounts/${to.params.accountId}/dashboard`;
     },
   },
   {
@@ -88,7 +97,7 @@ export const validateAuthenticateRoutePermission = (to, from, next) => {
       validator.protected === isProtectedRoute &&
       validator.loggedIn === isLoggedIn
   );
-  const nextRoute = strategy.handler(to.name);
+  const nextRoute = strategy.handler(to);
   return nextRoute ? next(frontendURL(nextRoute)) : next();
 };
 
diff --git a/app/javascript/dashboard/routes/index.spec.js b/app/javascript/dashboard/routes/index.spec.js
index b3af17480..ef917af38 100644
--- a/app/javascript/dashboard/routes/index.spec.js
+++ b/app/javascript/dashboard/routes/index.spec.js
@@ -37,17 +37,16 @@ describe(`behavior`, () => {
       // Arrange
       spyOn(auth, 'isLoggedIn').and.returnValue(true);
       spyOn(auth, 'getCurrentUser').and.returnValue({
-        role: 'user',
+        account_id: 1,
+        accounts: [{ id: 1, role: 'agent' }],
       });
-      const to = {
-        name: 'login',
-      };
-      const from = { name: '' };
+      const to = { name: 'login' };
+      const from = { name: '', params: { accountId: 1 } };
       const next = jest.fn();
       // Act
       validateAuthenticateRoutePermission(to, from, next);
       // Assert
-      expect(next).toHaveBeenCalledWith('/app/dashboard');
+      expect(next).toHaveBeenCalledWith('/app/accounts/1/dashboard');
     });
   });
   describe(`when route is protected`, () => {
@@ -56,9 +55,7 @@ describe(`behavior`, () => {
         // Arrange
         spyOn(auth, 'isLoggedIn').and.returnValue(false);
         spyOn(auth, 'getCurrentUser').and.returnValue(null);
-        const to = {
-          name: 'some-protected-route',
-        };
+        const to = { name: 'some-protected-route', params: { accountId: 1 } };
         const from = { name: '' };
         const next = jest.fn();
         // Act
@@ -73,18 +70,16 @@ describe(`behavior`, () => {
           // Arrange
           spyOn(auth, 'isLoggedIn').and.returnValue(true);
           spyOn(auth, 'getCurrentUser').and.returnValue({
-            role: 'user',
+            accounts: [{ id: 1, role: 'agent' }],
           });
-          window.roleWiseRoutes.user = ['dashboard'];
-          const to = {
-            name: 'admin',
-          };
+          window.roleWiseRoutes.agent = ['dashboard'];
+          const to = { name: 'admin', params: { accountId: 1 } };
           const from = { name: '' };
           const next = jest.fn();
           // Act
           validateAuthenticateRoutePermission(to, from, next);
           // Assert
-          expect(next).toHaveBeenCalledWith('/app/dashboard');
+          expect(next).toHaveBeenCalledWith('/app/accounts/1/dashboard');
         });
       });
       describe(`when route is accessible to current user`, () => {
@@ -92,12 +87,10 @@ describe(`behavior`, () => {
           // Arrange
           spyOn(auth, 'isLoggedIn').and.returnValue(true);
           spyOn(auth, 'getCurrentUser').and.returnValue({
-            role: 'user',
+            accounts: [{ id: 1, role: 'agent' }],
           });
-          window.roleWiseRoutes.user = ['dashboard', 'admin'];
-          const to = {
-            name: 'admin',
-          };
+          window.roleWiseRoutes.agent = ['dashboard', 'admin'];
+          const to = { name: 'admin', params: { accountId: 1 } };
           const from = { name: '' };
           const next = jest.fn();
           // Act
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index a50481110..5ef83086d 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -47,8 +47,11 @@ export const getters = {
     return currentAccount.availability;
   },
 
-  getCurrentAccountId(_state) {
-    return _state.currentAccountId;
+  getCurrentAccountId(_, __, rootState) {
+    if (rootState.route.params && rootState.route.params.accountId) {
+      return Number(rootState.route.params.accountId);
+    }
+    return null;
   },
 
   getCurrentRole(_state) {

From da8f9d0337181315696e2ee301295f973da3c409 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 24 Nov 2021 09:00:55 +0530
Subject: [PATCH 24/69] feat: Add support for List and Checkbox in Custom
 Attributes (#3439)

---
 .../dashboard/components/CustomAttribute.vue  | 240 +++++++++++++-----
 .../i18n/locale/en/attributesMgmt.json        |  13 +-
 .../dashboard/i18n/locale/en/contact.json     |   7 +
 .../customAttributes/CustomAttributes.vue     |   1 +
 .../settings/attributes/AddAttribute.vue      |  96 ++++++-
 .../settings/attributes/EditAttribute.vue     | 102 +++++++-
 .../settings/attributes/constants.js          |   8 +
 .../components/ui/MultiselectDropdown.vue     |  10 +-
 .../ui/MultiselectDropdownItems.vue           |   5 +
 9 files changed, 388 insertions(+), 94 deletions(-)

diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index bdadc8c59..b11350d2d 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -2,77 +2,113 @@
   <div class="custom-attribute">
     <div class="title-wrap">
       <h4 class="text-block-title title error">
-        <span class="attribute-name" :class="{ error: $v.editedValue.$error }">
-          {{ label }}
-        </span>
+        <div v-if="isAttributeTypeCheckbox" class="checkbox-wrap">
+          <input
+            v-model="editedValue"
+            class="checkbox"
+            type="checkbox"
+            @change="onUpdate"
+          />
+        </div>
+        <div class="name-button__wrap">
+          <span
+            class="attribute-name"
+            :class="{ error: $v.editedValue.$error }"
+          >
+            {{ label }}
+          </span>
+          <woot-button
+            v-if="showActions"
+            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
+            variant="link"
+            size="medium"
+            color-scheme="secondary"
+            icon="ion-trash-a"
+            class-names="delete-button"
+            @click="onDelete"
+          />
+        </div>
       </h4>
     </div>
-    <div v-show="isEditing">
-      <div class="input-group small">
-        <input
-          ref="inputfield"
-          v-model="editedValue"
-          :type="inputType"
-          class="input-group-field"
-          autofocus="true"
-          :class="{ error: $v.editedValue.$error }"
-          @blur="$v.editedValue.$touch"
-          @keyup.enter="onUpdate"
-        />
-        <div class="input-group-button">
-          <woot-button size="small" icon="ion-checkmark" @click="onUpdate" />
+    <div v-if="notAttributeTypeCheckboxAndList">
+      <div v-show="isEditing">
+        <div class="input-group small">
+          <input
+            ref="inputfield"
+            v-model="editedValue"
+            :type="inputType"
+            class="input-group-field"
+            autofocus="true"
+            :class="{ error: $v.editedValue.$error }"
+            @blur="$v.editedValue.$touch"
+            @keyup.enter="onUpdate"
+          />
+          <div class="input-group-button">
+            <woot-button size="small" icon="ion-checkmark" @click="onUpdate" />
+          </div>
+        </div>
+        <span v-if="shouldShowErrorMessage" class="error-message">
+          {{ errorMessage }}
+        </span>
+      </div>
+      <div
+        v-show="!isEditing"
+        class="value--view"
+        :class="{ 'is-editable': showActions }"
+      >
+        <a
+          v-if="isAttributeTypeLink"
+          :href="value"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="value"
+        >
+          {{ value || '---' }}
+        </a>
+        <p v-else class="value">
+          {{ formattedValue || '---' }}
+        </p>
+        <div class="action-buttons__wrap">
+          <woot-button
+            v-if="showActions"
+            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="ion-clipboard"
+            class-names="edit-button"
+            @click="onCopy"
+          />
+          <woot-button
+            v-if="showActions"
+            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
+            variant="link"
+            size="small"
+            color-scheme="secondary"
+            icon="ion-compose"
+            class-names="edit-button"
+            @click="onEdit"
+          />
         </div>
       </div>
-      <span v-if="shouldShowErrorMessage" class="error-message">
-        {{ errorMessage }}
-      </span>
     </div>
-    <div
-      v-show="!isEditing"
-      class="value--view"
-      :class="{ 'is-editable': showActions }"
-    >
-      <a
-        v-if="isAttributeTypeLink"
-        :href="value"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="value"
-      >
-        {{ value || '---' }}
-      </a>
-      <p v-else class="value">
-        {{ formattedValue || '---' }}
-      </p>
-      <woot-button
-        v-if="showActions"
-        v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
-        variant="link"
-        size="small"
-        color-scheme="secondary"
-        icon="ion-clipboard"
-        class-names="edit-button"
-        @click="onCopy"
-      />
-      <woot-button
-        v-if="showActions"
-        v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
-        variant="link"
-        size="small"
-        color-scheme="secondary"
-        icon="ion-compose"
-        class-names="edit-button"
-        @click="onEdit"
-      />
-      <woot-button
-        v-if="showActions"
-        v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
-        variant="link"
-        size="small"
-        color-scheme="secondary"
-        icon="ion-trash-a"
-        class-names="edit-button"
-        @click="onDelete"
+    <div v-if="isAttributeTypeList">
+      <multiselect-dropdown
+        :options="listOptions"
+        :selected-item="selectedItem"
+        :has-thumbnail="false"
+        :multiselector-placeholder="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
+        "
+        :no-search-result="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
+        "
+        :input-placeholder="
+          $t(
+            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
+          )
+        "
+        @click="onUpdateListValue"
       />
     </div>
   </div>
@@ -82,13 +118,18 @@
 import format from 'date-fns/format';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 
 const DATE_FORMAT = 'yyyy-MM-dd';
 
 export default {
+  components: {
+    MultiselectDropdown,
+  },
   props: {
     label: { type: String, required: true },
-    value: { type: [String, Number], default: '' },
+    values: { type: Array, default: () => [] },
+    value: { type: [String, Number, Boolean], default: '' },
     showActions: { type: Boolean, default: false },
     attributeType: { type: String, default: 'text' },
     attributeKey: { type: String, required: true },
@@ -115,9 +156,28 @@ export default {
   },
 
   computed: {
+    listOptions() {
+      return this.values.map((value, index) => ({
+        id: index + 1,
+        name: value,
+      }));
+    },
+    selectedItem() {
+      const id = this.values.indexOf(this.editedValue) + 1;
+      return { id, name: this.editedValue };
+    },
+    isAttributeTypeCheckbox() {
+      return this.attributeType === 'checkbox';
+    },
+    isAttributeTypeList() {
+      return this.attributeType === 'list';
+    },
     isAttributeTypeLink() {
       return this.attributeType === 'link';
     },
+    notAttributeTypeCheckboxAndList() {
+      return !this.isAttributeTypeCheckbox && !this.isAttributeTypeList;
+    },
     inputType() {
       return this.isAttributeTypeLink ? 'url' : this.attributeType;
     },
@@ -156,6 +216,12 @@ export default {
         this.focusInput();
       });
     },
+    onUpdateListValue(value) {
+      if (value) {
+        this.editedValue = value.name;
+        this.onUpdate();
+      }
+    },
     onUpdate() {
       const updatedValue =
         this.attributeType === 'date'
@@ -194,8 +260,23 @@ export default {
   display: flex;
   align-items: center;
   margin: 0;
+  width: 100%;
+}
+.checkbox-wrap {
+  display: flex;
+  align-items: center;
+}
+.checkbox {
+  margin: 0 var(--space-small) 0 0;
+}
+.name-button__wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 }
 .attribute-name {
+  width: 100%;
   &.error {
     color: var(--r-400);
   }
@@ -206,22 +287,34 @@ export default {
 .edit-button {
   display: none;
 }
+.delete-button {
+  display: flex;
+  justify-content: flex-end;
+  width: var(--space-normal);
+}
 .value--view {
   display: flex;
 
   &.is-editable:hover {
     .value {
       background: var(--color-background);
+      margin-bottom: 0;
     }
     .edit-button {
       display: block;
     }
   }
+
+  .action-buttons__wrap {
+    display: flex;
+    max-width: var(--space-larger);
+  }
 }
 .value {
   display: inline-block;
   min-width: var(--space-mega);
   border-radius: var(--border-radius-small);
+  margin-bottom: 0;
   word-break: break-all;
   padding: var(--space-micro) var(--space-smaller);
 }
@@ -235,4 +328,17 @@ export default {
   margin-top: -1.6rem;
   width: 100%;
 }
+
+::v-deep {
+  .selector-wrap {
+    margin: 0;
+    top: var(--space-smaller);
+    .selector-name {
+      margin-left: 0;
+    }
+  }
+  .name {
+    margin-left: 0;
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
index 0ea8af780..77c81edd3 100644
--- a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
@@ -27,7 +27,12 @@
         "TYPE": {
           "LABEL": "Type",
           "PLACEHOLDER": "Please select a type",
-          "ERROR": "Type is required"
+          "ERROR": "Type is required",
+          "LIST": {
+            "LABEL": "List Values",
+            "PLACEHOLDER": "Please enter value and press enter key",
+            "ERROR": "Must have at least one value"
+          }
         },
         "KEY": {
           "LABEL": "Key",
@@ -58,6 +63,12 @@
     "EDIT": {
       "TITLE": "Edit Custom Attribute",
       "UPDATE_BUTTON_TEXT": "Update",
+      "TYPE": {
+        "LIST": {
+          "LABEL": "List Values",
+          "PLACEHOLDER": "Please enter values and press enter key"
+        }
+      },
       "API": {
         "SUCCESS_MESSAGE": "Custom Attribute updated successfully",
         "ERROR_MESSAGE": "There was an error updating custom attribute, please try again"
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 0286dbfa4..a06331b4b 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -279,6 +279,13 @@
         "TITLE": "Add attributes",
         "PLACEHOLDER": "Search attributes",
         "NO_RESULT": "No attributes found"
+      },
+      "ATTRIBUTE_TYPE": {
+        "LIST": {
+          "PLACEHOLDER": "Select value",
+          "SEARCH_INPUT_PLACEHOLDER": "Search value",
+          "NO_RESULT": "No result found"
+        }
       }
     },
     "VALIDATIONS": {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index c95e15ff7..ece28d004 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -5,6 +5,7 @@
       :key="attribute.id"
       :attribute-key="attribute.attribute_key"
       :attribute-type="attribute.attribute_display_type"
+      :values="attribute.attribute_values"
       :label="attribute.attribute_display_name"
       :icon="attribute.icon"
       emoji=""
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index 29f5c3fc8..75d0e0f72 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -30,6 +30,15 @@
             @input="onDisplayNameChange"
             @blur="$v.displayName.$touch"
           />
+          <woot-input
+            v-model="attributeKey"
+            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
+            type="text"
+            :class="{ error: $v.attributeKey.$error }"
+            :error="$v.attributeKey.$error ? keyErrorMessage : ''"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
+            @blur="$v.attributeKey.$touch"
+          />
           <label :class="{ error: $v.description.$error }">
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
             <textarea
@@ -54,15 +63,29 @@
               {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
             </span>
           </label>
-          <woot-input
-            v-model="attributeKey"
-            :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
-            type="text"
-            :class="{ error: $v.attributeKey.$error }"
-            :error="$v.attributeKey.$error ? keyErrorMessage : ''"
-            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
-            @blur="$v.attributeKey.$touch"
-          />
+          <div v-if="isAttributeTypeList" class="multiselect--wrap">
+            <label>
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.LABEL') }}
+            </label>
+            <multiselect
+              ref="tagInput"
+              v-model="values"
+              :placeholder="
+                $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')
+              "
+              label="name"
+              track-by="name"
+              :class="{ invalid: isMultiselectInvalid }"
+              :options="options"
+              :multiple="true"
+              :taggable="true"
+              @close="onTouch"
+              @tag="addTagValue"
+            />
+            <label v-show="isMultiselectInvalid" class="error-message">
+              {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
+            </label>
+          </div>
           <div class="modal-footer">
             <woot-submit-button
               :disabled="isButtonDisabled"
@@ -103,7 +126,10 @@ export default {
       attributeKey: '',
       models: ATTRIBUTE_MODELS,
       types: ATTRIBUTE_TYPES,
+      values: [],
+      options: [],
       show: true,
+      isTouched: false,
     };
   },
 
@@ -111,11 +137,21 @@ export default {
     ...mapGetters({
       uiFlags: 'getUIFlags',
     }),
+    isMultiselectInvalid() {
+      return this.isTouched && this.values.length === 0;
+    },
+    isTagInputInvalid() {
+      return this.isAttributeTypeList && this.values.length === 0;
+    },
+    attributeListValues() {
+      return this.values.map(item => item.name);
+    },
     isButtonDisabled() {
       return (
         this.$v.displayName.$invalid ||
         this.$v.description.$invalid ||
-        this.uiFlags.isCreating
+        this.uiFlags.isCreating ||
+        this.isTagInputInvalid
       );
     },
     keyErrorMessage() {
@@ -124,6 +160,9 @@ export default {
       }
       return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
     },
+    isAttributeTypeList() {
+      return this.attributeType === 6;
+    },
   },
 
   validations: {
@@ -149,6 +188,16 @@ export default {
   },
 
   methods: {
+    addTagValue(tagValue) {
+      const tag = {
+        name: tagValue,
+      };
+      this.values.push(tag);
+      this.$refs.tagInput.$el.focus();
+    },
+    onTouch() {
+      this.isTouched = true;
+    },
     onDisplayNameChange() {
       this.attributeKey = convertToSlug(this.displayName);
     },
@@ -164,6 +213,7 @@ export default {
           attribute_model: this.attributeModel,
           attribute_display_type: this.attributeType,
           attribute_key: this.attributeKey,
+          attribute_values: this.attributeListValues,
         });
         this.alertMessage = this.$t('ATTRIBUTES_MGMT.ADD.API.SUCCESS_MESSAGE');
         this.onClose();
@@ -183,4 +233,30 @@ export default {
   padding: 0 var(--space-small) var(--space-small) 0;
   font-family: monospace;
 }
+.multiselect--wrap {
+  margin-bottom: var(--space-normal);
+  .error-message {
+    color: var(--r-400);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-normal);
+  }
+  .invalid {
+    ::v-deep {
+      .multiselect__tags {
+        border: 1px solid var(--r-400);
+      }
+    }
+  }
+}
+::v-deep {
+  .multiselect {
+    margin-bottom: 0;
+  }
+  .multiselect__content-wrapper {
+    display: none;
+  }
+  .multiselect--active .multiselect__tags {
+    border-radius: var(--border-radius-normal);
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
index 1acf8a4a3..45ab2cdea 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
@@ -16,6 +16,16 @@
           :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
           @blur="$v.displayName.$touch"
         />
+        <woot-input
+          v-model.trim="attributeKey"
+          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
+          type="text"
+          :class="{ error: $v.attributeKey.$error }"
+          :error="$v.attributeKey.$error ? keyErrorMessage : ''"
+          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
+          readonly
+          @blur="$v.attributeKey.$touch"
+        />
         <label :class="{ error: $v.description.$error }">
           {{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
           <textarea
@@ -40,22 +50,29 @@
             {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
           </span>
         </label>
-        <woot-input
-          v-model.trim="attributeKey"
-          :label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
-          type="text"
-          :class="{ error: $v.attributeKey.$error }"
-          :error="$v.attributeKey.$error ? keyErrorMessage : ''"
-          :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
-          readonly
-          @blur="$v.attributeKey.$touch"
-        />
+        <div v-if="isAttributeTypeList" class="multiselect--wrap">
+          <label>
+            {{ $t('ATTRIBUTES_MGMT.EDIT.TYPE.LIST.LABEL') }}
+          </label>
+          <multiselect
+            ref="tagInput"
+            v-model="values"
+            :placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.PLACEHOLDER')"
+            label="name"
+            track-by="name"
+            :class="{ invalid: isMultiselectInvalid }"
+            :options="options"
+            :multiple="true"
+            :taggable="true"
+            @tag="addTagValue"
+          />
+          <label v-show="isMultiselectInvalid" class="error-message">
+            {{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LIST.ERROR') }}
+          </label>
+        </div>
       </div>
       <div class="modal-footer">
-        <woot-button
-          :is-loading="isUpdating"
-          :disabled="$v.description.$invalid"
-        >
+        <woot-button :is-loading="isUpdating" :disabled="isButtonDisabled">
           {{ $t('ATTRIBUTES_MGMT.EDIT.UPDATE_BUTTON_TEXT') }}
         </woot-button>
         <woot-button variant="clear" @click.prevent="onClose">
@@ -92,6 +109,9 @@ export default {
       types: ATTRIBUTE_TYPES,
       show: true,
       attributeKey: '',
+      values: [],
+      options: [],
+      isTouched: true,
     };
   },
   validations: {
@@ -116,6 +136,22 @@ export default {
     ...mapGetters({
       uiFlags: 'attributes/getUIFlags',
     }),
+    setAttributeListValue() {
+      return this.selectedAttribute.attribute_values.map(values => ({
+        name: values,
+      }));
+    },
+    updatedAttributeListValues() {
+      return this.values.map(item => item.name);
+    },
+    isButtonDisabled() {
+      return this.$v.description.$invalid || this.isMultiselectInvalid;
+    },
+    isMultiselectInvalid() {
+      return (
+        this.isAttributeTypeList && this.isTouched && this.values.length === 0
+      );
+    },
     pageTitle() {
       return `${this.$t('ATTRIBUTES_MGMT.EDIT.TITLE')} - ${
         this.selectedAttribute.attribute_display_name
@@ -134,6 +170,9 @@ export default {
       }
       return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
     },
+    isAttributeTypeList() {
+      return this.attributeType === 6;
+    },
   },
   mounted() {
     this.setFormValues();
@@ -142,11 +181,19 @@ export default {
     onClose() {
       this.$emit('on-close');
     },
+    addTagValue(tagValue) {
+      const tag = {
+        name: tagValue,
+      };
+      this.values.push(tag);
+      this.$refs.tagInput.$el.focus();
+    },
     setFormValues() {
       this.displayName = this.selectedAttribute.attribute_display_name;
       this.description = this.selectedAttribute.attribute_description;
       this.attributeType = this.selectedAttributeType;
       this.attributeKey = this.selectedAttribute.attribute_key;
+      this.values = this.setAttributeListValue;
     },
     async editAttributes() {
       this.$v.$touch();
@@ -158,6 +205,7 @@ export default {
           id: this.selectedAttribute.id,
           attribute_description: this.description,
           attribute_display_name: this.displayName,
+          attribute_values: this.updatedAttributeListValues,
         });
 
         this.alertMessage = this.$t('ATTRIBUTES_MGMT.EDIT.API.SUCCESS_MESSAGE');
@@ -178,4 +226,30 @@ export default {
   padding: 0 var(--space-small) var(--space-small) 0;
   font-family: monospace;
 }
+.multiselect--wrap {
+  margin-bottom: var(--space-normal);
+  .error-message {
+    color: var(--r-400);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-normal);
+  }
+  .invalid {
+    ::v-deep {
+      .multiselect__tags {
+        border: 1px solid var(--r-400);
+      }
+    }
+  }
+}
+::v-deep {
+  .multiselect {
+    margin-bottom: 0;
+  }
+  .multiselect__content-wrapper {
+    display: none;
+  }
+  .multiselect--active .multiselect__tags {
+    border-radius: var(--border-radius-normal);
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/constants.js b/app/javascript/dashboard/routes/dashboard/settings/attributes/constants.js
index 1a3cd57a2..9aa36dec1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/constants.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/constants.js
@@ -26,4 +26,12 @@ export const ATTRIBUTE_TYPES = [
     id: 5,
     option: 'Date',
   },
+  {
+    id: 6,
+    option: 'List',
+  },
+  {
+    id: 7,
+    option: 'Checkbox',
+  },
 ];
diff --git a/app/javascript/shared/components/ui/MultiselectDropdown.vue b/app/javascript/shared/components/ui/MultiselectDropdown.vue
index 687b7bf90..e2fdeb0db 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdown.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdown.vue
@@ -12,7 +12,7 @@
     >
       <div class="selector-user-wrap">
         <Thumbnail
-          v-if="hasValue"
+          v-if="hasValue && hasThumbnail"
           :src="selectedItem.thumbnail"
           size="24px"
           :status="selectedItem.availability_status"
@@ -48,6 +48,7 @@
         v-if="showSearchDropdown"
         :options="options"
         :selected-item="selectedItem"
+        :has-thumbnail="hasThumbnail"
         :input-placeholder="inputPlaceholder"
         :no-search-result="noSearchResult"
         @click="onClickSelectItem"
@@ -75,9 +76,13 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    hasThumbnail: {
+      type: Boolean,
+      default: true,
+    },
     multiselectorTitle: {
       type: String,
-      default: 'Select',
+      default: '',
     },
     multiselectorPlaceholder: {
       type: String,
@@ -116,6 +121,7 @@ export default {
 
     onClickSelectItem(value) {
       this.$emit('click', value);
+      this.onCloseDropdown();
     },
   },
 };
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index c66e225e5..be5fb4fa3 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -27,6 +27,7 @@
             >
               <div class="user-wrap">
                 <Thumbnail
+                  v-if="hasThumbnail"
                   :src="option.thumbnail"
                   size="24px"
                   :username="option.name"
@@ -76,6 +77,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    hasThumbnail: {
+      type: Boolean,
+      default: true,
+    },
     inputPlaceholder: {
       type: String,
       default: 'Search',

From 00143f7ee5080f360d76c6b3c6b5f17b52efc509 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 24 Nov 2021 11:02:45 +0530
Subject: [PATCH 25/69] fix: Render checkbox if string value passed  (#3453)

---
 .../dashboard/components/CustomAttribute.vue  | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index b11350d2d..a1dad74c4 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -66,7 +66,7 @@
           {{ value || '---' }}
         </a>
         <p v-else class="value">
-          {{ formattedValue || '---' }}
+          {{ displayValue || '---' }}
         </p>
         <div class="action-buttons__wrap">
           <woot-button
@@ -138,10 +138,7 @@ export default {
   data() {
     return {
       isEditing: false,
-      editedValue:
-        this.attributeType === 'date'
-          ? format(new Date(this.value || new Date()), DATE_FORMAT)
-          : this.value,
+      editedValue: null,
     };
   },
   validations() {
@@ -156,6 +153,15 @@ export default {
   },
 
   computed: {
+    formattedValue() {
+      if (this.isAttributeTypeDate) {
+        return format(new Date(this.value || new Date()), DATE_FORMAT);
+      }
+      if (this.isAttributeTypeCheckbox) {
+        return this.value === 'false' ? false : this.value;
+      }
+      return this.value;
+    },
     listOptions() {
       return this.values.map((value, index) => ({
         id: index + 1,
@@ -175,6 +181,9 @@ export default {
     isAttributeTypeLink() {
       return this.attributeType === 'link';
     },
+    isAttributeTypeDate() {
+      return this.attributeType === 'date';
+    },
     notAttributeTypeCheckboxAndList() {
       return !this.isAttributeTypeCheckbox && !this.isAttributeTypeList;
     },
@@ -190,7 +199,7 @@ export default {
       }
       return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.REQUIRED');
     },
-    formattedValue() {
+    displayValue() {
       if (this.attributeType === 'date') {
         return format(new Date(this.editedValue), 'dd-MM-yyyy');
       }
@@ -198,6 +207,7 @@ export default {
     },
   },
   mounted() {
+    this.editedValue = this.formattedValue;
     bus.$on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, focusAttributeKey => {
       if (this.attributeKey === focusAttributeKey) {
         this.onEdit();

From 330a97b5c5888673ea2fad25fd80d8975da505f3 Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Wed, 24 Nov 2021 12:58:00 +0530
Subject: [PATCH 26/69] Fix: contact filter values (#3456)

---
 app/services/contacts/filter_service.rb | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/services/contacts/filter_service.rb b/app/services/contacts/filter_service.rb
index 879295c8f..cefcee7b5 100644
--- a/app/services/contacts/filter_service.rb
+++ b/app/services/contacts/filter_service.rb
@@ -38,6 +38,10 @@ class Contacts::FilterService < FilterService
     end
   end
 
+  def filter_values(query_hash)
+    query_hash['values'][0]
+  end
+
   def base_relation
     Current.account.contacts.left_outer_joins(:labels)
   end

From c23e2c23d4151a2879b33e5e74c808565246730f Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 24 Nov 2021 14:26:32 +0530
Subject: [PATCH 27/69] chore: Update design for filters (#3423)

---
 .../assets/scss/_foundation-custom.scss       |  10 +
 .../assets/scss/widgets/_buttons.scss         |   2 +-
 .../dashboard/assets/scss/widgets/_modal.scss |   6 +
 .../dashboard/components/ChatList.vue         |   1 +
 app/javascript/dashboard/components/Modal.vue |   7 +-
 .../ConversationAdvancedFilter.vue            |  94 ++--------
 .../conversation/components/FilterInput.vue   | 172 ++++++++++++------
 .../i18n/locale/en/advancedFilters.json       |   4 +-
 .../shared/assets/stylesheets/font-size.scss  |   1 -
 .../shared/assets/stylesheets/spacing.scss    |   2 -
 10 files changed, 161 insertions(+), 138 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
index 1cb529b97..83f5f9ea4 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -49,7 +49,17 @@ code {
 .cursor-pointer {
   cursor: pointer;
 }
+
 // remove when grid gutters are fixed
 .columns.with-right-space {
   padding-right: var(--space-normal);
 }
+
+
+.padding-right-small {
+  padding-right: var(--space-one);
+}
+
+.margin-right-small {
+  margin-right: var(--space-small);
+}
diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 1a72d51df..55c7bc3de 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -25,6 +25,7 @@ $default-button-height: 4.0rem;
   // @TODDO - Remove after moving all buttons to woot-button
   .icon+.button__content {
     padding-left: var(--space-small);
+    width: auto;
   }
 
   &.expanded {
@@ -103,7 +104,6 @@ $default-button-height: 4.0rem;
     padding: 0;
   }
 
-
 }
 
 
diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
index f1a36a87c..7a9a83845 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@@ -47,6 +47,11 @@
   position: relative;
   width: 60rem;
 
+  &.medium {
+    max-width: 80%;
+    width: 90rem;
+  }
+
   .content-box {
     @include padding($zero);
     height: auto;
@@ -94,6 +99,7 @@
 
   .delete-item {
     @include padding($space-large);
+
     button {
       @include margin($zero);
     }
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 919105c2f..4a614cf3f 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -81,6 +81,7 @@ l<template>
     <woot-modal
       :show.sync="showAdvancedFilters"
       :on-close="onToggleAdvanceFiltersModal"
+      size="medium"
     >
       <conversation-advanced-filter
         v-if="showAdvancedFilters"
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index ad423f918..463a2aeea 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -34,6 +34,10 @@ export default {
       type: String,
       default: 'centered',
     },
+    size: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     modalContainerClassName() {
@@ -41,7 +45,8 @@ export default {
       if (this.fullWidth) {
         return `${className} modal-container--full-width`;
       }
-      return className;
+
+      return `${className} ${this.size}`;
     },
     modalClassName() {
       const modalClassNameMap = {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 288b7cc1f..4d2c39814 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -4,7 +4,7 @@
       <p>{{ $t('FILTER.SUBTITLE') }}</p>
     </woot-modal-header>
     <div class="row modal-content">
-      <div class="medium-12 columns">
+      <div class="medium-12 columns filters-wrap">
         <filter-input-box
           v-for="(filter, i) in appliedFilters"
           :key="i"
@@ -20,11 +20,18 @@
           @removeFilter="removeFilter(i)"
         />
         <div class="filter-actions">
-          <button class="append-filter-btn" @click="appendNewFilter">
-            <i class="icon ion-plus-circled margin-right-small" />
-            <span>{{ $t('FILTER.ADD_NEW_FILTER') }}</span>
-          </button>
+          <woot-button
+            icon="ion-plus"
+            color-scheme="success"
+            variant="smooth"
+            size="small"
+            @click="appendNewFilter"
+          >
+            {{ $t('FILTER.ADD_NEW_FILTER') }}
+          </woot-button>
         </div>
+      </div>
+      <div class="medium-12 columns">
         <div class="modal-footer justify-content-end w-full">
           <woot-button class="button clear" @click.prevent="onClose">
             {{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
@@ -203,79 +210,16 @@ export default {
   },
 };
 </script>
-
-<style>
-.filter-modal-content {
+<style lang="scss" scoped>
+.filters-wrap {
+  padding: var(--space-normal);
+  border-radius: var(--border-radius-large);
   border: 1px solid var(--color-border);
-  border-radius: var(--space-half);
-  padding: var(--space-one);
-}
-.filter--attributes {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-one);
-}
-.filter--attribute_clearbtn {
-  font-size: var(--space-two);
-  margin-left: var(--space-one);
-  cursor: pointer;
-}
-.filter--attributes_select {
-  margin-bottom: var(--space-zero) !important;
+  background: var(--color-background-light);
+  margin-bottom: var(--space-normal);
 }
 
-.filter--values_select {
-  margin-bottom: var(--space-zero) !important;
-}
-
-.padding-right-small {
-  padding-right: var(--space-one);
-}
-.margin-right-small {
-  margin-right: var(--space-three-fourths);
-}
-.append-filter-btn {
-  width: 100%;
-  border: 1px solid var(--color-border);
-  border-radius: var(--space-one-fourths);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-woot);
-  font-size: var(--font-size-one-and-half);
-  padding: var(--space-one);
-  height: var(----space-medium);
-  cursor: pointer;
-}
 .filter-actions {
-  margin: var(--space-two) var(--space-zero) var(--space-one) var(--space-zero);
-}
-.filter--attributes_input {
-  margin-bottom: var(--space-zero) !important;
-}
-.filter--query_operator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  margin: var(--space-one) var(--space-zero);
-}
-.filter--query_operator_line {
-  position: absolute;
-  z-index: var(--z-index-low);
-  width: 100%;
-  border-bottom: 1px solid var(--color-border);
-}
-.filter--query_operator_container {
-  position: relative;
-  z-index: var(--z-index-twenty);
-  margin: var(--space-zero);
-}
-.filter--query_operator_select {
-  width: 100%;
-  margin-bottom: var(--space-zero) !important;
-  border: none;
-  padding: var(--space-zero) var(--space-three) var(--space-zero)
-    var(--space-two);
+  margin-top: var(--space-normal);
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
index a9f00fa57..d5a9cefd8 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
@@ -1,40 +1,32 @@
 <template>
   <div class="filters">
-    <div class="filter--attributes">
-      <select
-        v-model="attribute_key"
-        class="filter--attributes_select"
-        @change="resetFilter()"
-      >
-        <option
-          v-for="attribute in filterAttributes"
-          :key="attribute.key"
-          :value="attribute.key"
+    <div class="filter">
+      <div class="filter-inputs">
+        <select
+          v-model="attributeKey"
+          class="filter__question"
+          @change="resetFilter()"
         >
-          {{ $t(`FILTER.ATTRIBUTES.${attribute.attributeI18nKey}`) }}
-        </option>
-      </select>
-      <button class="filter--attribute_clearbtn" @click="removeFilter">
-        <i class="icon ion-close-circled" />
-      </button>
-    </div>
-    <div class="filter-values">
-      <div class="row">
-        <div
-          class="columns padding-right-small"
-          :class="showUserInput ? 'small-4' : 'small-12'"
-        >
-          <select v-model="filter_operator" class="filter--values_select">
-            <option
-              v-for="(operator, o) in operators"
-              :key="o"
-              :value="operator.value"
-            >
-              {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
-            </option>
-          </select>
-        </div>
-        <div v-if="showUserInput" class="small-8 columns">
+          <option
+            v-for="attribute in filterAttributes"
+            :key="attribute.key"
+            :value="attribute.key"
+          >
+            {{ $t(`FILTER.ATTRIBUTES.${attribute.attributeI18nKey}`) }}
+          </option>
+        </select>
+
+        <select v-model="filterOperator" class="filter__operator">
+          <option
+            v-for="(operator, o) in operators"
+            :key="o"
+            :value="operator.value"
+          >
+            {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
+          </option>
+        </select>
+
+        <div v-if="showUserInput" class="filter__answer--wrap">
           <div
             v-if="inputType === 'multi_select'"
             class="multiselect-wrap--small"
@@ -73,27 +65,32 @@
             v-else
             v-model="values"
             type="text"
-            class="filter--attributes_input"
+            class="answer--text-input"
             placeholder="Enter value"
           />
-          <div v-if="v.values.$dirty && v.values.$error" class="filter-error">
-            {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
-          </div>
         </div>
+        <woot-button
+          icon="ion-close"
+          variant="clear"
+          color-scheme="secondary"
+          @click="removeFilter"
+        />
       </div>
+      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
+        {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+      </p>
     </div>
-    <div v-if="showQueryOperator" class="filter--query_operator">
-      <hr class="filter--query_operator_line" />
-      <div class="filter--query_operator_container">
-        <select v-model="query_operator" class="filter--query_operator_select">
-          <option value="and">
-            {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
-          </option>
-          <option value="or">
-            {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
-          </option>
-        </select>
-      </div>
+
+    <div v-if="showQueryOperator" class="filter__join-operator">
+      <hr class="operator__line" />
+      <select v-model="query_operator" class="operator__select">
+        <option value="and">
+          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
+        </option>
+        <option value="or">
+          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
+        </option>
+      </select>
     </div>
   </div>
 </template>
@@ -135,7 +132,7 @@ export default {
     },
   },
   computed: {
-    attribute_key: {
+    attributeKey: {
       get() {
         if (!this.value) return null;
         return this.value.attribute_key;
@@ -145,7 +142,7 @@ export default {
         this.$emit('input', { ...payload, attribute_key: value });
       },
     },
-    filter_operator: {
+    filterOperator: {
       get() {
         if (!this.value) return null;
         return this.value.filter_operator;
@@ -186,12 +183,75 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.multiselect {
-  margin-bottom: var(--space-zero) !important;
+<style lang="scss" scoped>
+.filter {
+  background: var(--color-background);
+  padding: var(--space-small);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-medium);
 }
+
+.filter-inputs {
+  display: flex;
+}
+
 .filter-error {
   color: var(--r-500);
+  display: block;
+  margin: var(--space-smaller) 0;
+}
+
+.filter__question,
+.filter__operator {
+  margin-bottom: var(--space-zero);
+  margin-right: var(--space-smaller);
+}
+
+.filter__question {
+  max-width: 30%;
+}
+
+.filter__operator {
+  max-width: 20%;
+}
+
+.filter__answer--wrap {
+  margin-right: var(--space-smaller);
+  flex-grow: 1;
+}
+.filter__answer {
+  &.answer--text-input {
+    margin-bottom: var(--space-zero);
+  }
+}
+
+.filter__join-operator-wrap {
+  position: relative;
+  z-index: var(--z-index-twenty);
+  margin: var(--space-zero);
+}
+
+.filter__join-operator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin: var(--space-one) var(--space-zero);
+
+  .operator__line {
+    position: absolute;
+    width: 100%;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .operator__select {
+    position: relative;
+    width: auto;
+    margin-bottom: var(--space-zero) !important;
+  }
+}
+
+.multiselect {
+  margin-bottom: var(--space-zero);
 }
 </style>
diff --git a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
index 0d4a5fc4d..f2292db8e 100644
--- a/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
+++ b/app/javascript/dashboard/i18n/locale/en/advancedFilters.json
@@ -1,10 +1,10 @@
 {
   "FILTER": {
     "TITLE": "Filter Conversations",
-    "SUBTITLE": "Add filters below and hit 'Submit' to filter conversations.",
+    "SUBTITLE": "Add filters below and hit 'Apply filters' to filter conversations.",
     "ADD_NEW_FILTER": "Add Filter",
     "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
-    "SUBMIT_BUTTON_LABEL": "Submit",
+    "SUBMIT_BUTTON_LABEL": "Apply filters",
     "CANCEL_BUTTON_LABEL": "Cancel",
     "CLEAR_BUTTON_LABEL": "Clear Filters",
     "EMPTY_VALUE_ERROR": "Value is required",
diff --git a/app/javascript/shared/assets/stylesheets/font-size.scss b/app/javascript/shared/assets/stylesheets/font-size.scss
index ed6447531..d431abb8c 100644
--- a/app/javascript/shared/assets/stylesheets/font-size.scss
+++ b/app/javascript/shared/assets/stylesheets/font-size.scss
@@ -3,7 +3,6 @@
   --font-size-micro: 1rem;
   --font-size-mini: 1.2rem;
   --font-size-small: 1.4rem;
-  --font-size-one-and-half: 1.5rem;
   --font-size-default: 1.6rem;
   --font-size-medium: 1.8rem;
   --font-size-two: 2rem;
diff --git a/app/javascript/shared/assets/stylesheets/spacing.scss b/app/javascript/shared/assets/stylesheets/spacing.scss
index 313cb650b..9ce5fecb0 100644
--- a/app/javascript/shared/assets/stylesheets/spacing.scss
+++ b/app/javascript/shared/assets/stylesheets/spacing.scss
@@ -2,10 +2,8 @@
   // spaces
   --space-zero: 0;
   --space-micro: 0.2rem;
-  --space-one-fourths: 0.25rem;
   --space-smaller: 0.4rem;
   --space-half: 0.5rem;
-  --space-three-fourths: 0.75rem;
   --space-small: 0.8rem;
   --space-one: 1rem;
   --space-slab: 1.2rem;

From 3a48e08fe0a60ea3b0e2ec1c069e1db233c81003 Mon Sep 17 00:00:00 2001
From: Vishnu Narayanan <vishnu@chatwoot.com>
Date: Thu, 25 Nov 2021 00:55:26 +0530
Subject: [PATCH 28/69] feat: migrate facebook env vars to globalConfig (#3369)

Migrate facebook env vars to globalConfig and make it editable from the super admin UI.
---
 .../api/v1/accounts/callbacks_controller.rb         |  2 +-
 app/controllers/dashboard_controller.rb             | 13 ++++++++-----
 app/controllers/webhooks/instagram_controller.rb    |  2 +-
 app/models/installation_config.rb                   |  6 ++++++
 app/services/instagram/send_on_instagram_service.rb |  2 +-
 config/initializers/facebook_messenger.rb           |  4 ++--
 lib/integrations/facebook/message_parser.rb         |  2 +-
 spec/lib/vapid_service_spec.rb                      |  7 ++++++-
 8 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/app/controllers/api/v1/accounts/callbacks_controller.rb b/app/controllers/api/v1/accounts/callbacks_controller.rb
index 9fc05d531..7c2469c05 100644
--- a/app/controllers/api/v1/accounts/callbacks_controller.rb
+++ b/app/controllers/api/v1/accounts/callbacks_controller.rb
@@ -74,7 +74,7 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
   end
 
   def long_lived_token(omniauth_token)
-    koala = Koala::Facebook::OAuth.new(ENV['FB_APP_ID'], ENV['FB_APP_SECRET'])
+    koala = Koala::Facebook::OAuth.new(GlobalConfigService.load('FB_APP_ID', ''), GlobalConfigService.load('FB_APP_SECRET', ''))
     koala.exchange_access_token_info(omniauth_token)['access_token']
   rescue StandardError => e
     Rails.logger.info e
diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index ad5b0ba24..783b138af 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -26,14 +26,17 @@ class DashboardController < ActionController::Base
       'API_CHANNEL_THUMBNAIL',
       'ANALYTICS_TOKEN',
       'ANALYTICS_HOST'
-    ).merge(
-      APP_VERSION: Chatwoot.config[:version],
-      VAPID_PUBLIC_KEY: VapidService.public_key,
-      ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false')
-    )
+    ).merge(app_config)
   end
 
   def ensure_installation_onboarding
     redirect_to '/installation/onboarding' if ::Redis::Alfred.get(::Redis::Alfred::CHATWOOT_INSTALLATION_ONBOARDING)
   end
+
+  def app_config
+    { APP_VERSION: Chatwoot.config[:version],
+      VAPID_PUBLIC_KEY: VapidService.public_key,
+      ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false'),
+      FB_APP_ID: GlobalConfigService.load('FB_APP_ID', '') }
+  end
 end
diff --git a/app/controllers/webhooks/instagram_controller.rb b/app/controllers/webhooks/instagram_controller.rb
index bd6fee1f5..2338ca7d1 100644
--- a/app/controllers/webhooks/instagram_controller.rb
+++ b/app/controllers/webhooks/instagram_controller.rb
@@ -25,6 +25,6 @@ class Webhooks::InstagramController < ApplicationController
   private
 
   def valid_instagram_token?(token)
-    token == ENV['IG_VERIFY_TOKEN']
+    token == GlobalConfigService.load('IG_VERIFY_TOKEN', '')
   end
 end
diff --git a/app/models/installation_config.rb b/app/models/installation_config.rb
index ce65eb678..20ee1f5ff 100644
--- a/app/models/installation_config.rb
+++ b/app/models/installation_config.rb
@@ -23,6 +23,8 @@ class InstallationConfig < ApplicationRecord
   default_scope { order(created_at: :desc) }
   scope :editable, -> { where(locked: false) }
 
+  after_commit :clear_cache
+
   def value
     serialized_value[:value]
   end
@@ -38,4 +40,8 @@ class InstallationConfig < ApplicationRecord
   def set_lock
     self.locked = true if locked.nil?
   end
+
+  def clear_cache
+    GlobalConfig.clear_cache
+  end
 end
diff --git a/app/services/instagram/send_on_instagram_service.rb b/app/services/instagram/send_on_instagram_service.rb
index 4f331e58b..0a8e9d4ec 100644
--- a/app/services/instagram/send_on_instagram_service.rb
+++ b/app/services/instagram/send_on_instagram_service.rb
@@ -50,7 +50,7 @@ class Instagram::SendOnInstagramService < Base::SendOnChannelService
   # @see https://developers.facebook.com/docs/messenger-platform/instagram/features/send-message
   def send_to_facebook_page(message_content)
     access_token = channel.page_access_token
-    app_secret_proof = calculate_app_secret_proof(ENV['FB_APP_SECRET'], access_token)
+    app_secret_proof = calculate_app_secret_proof(GlobalConfigService.load('FB_APP_SECRET', ''), access_token)
 
     query = { access_token: access_token }
     query[:appsecret_proof] = app_secret_proof if app_secret_proof
diff --git a/config/initializers/facebook_messenger.rb b/config/initializers/facebook_messenger.rb
index ad7e5ab1f..f9f4fae88 100644
--- a/config/initializers/facebook_messenger.rb
+++ b/config/initializers/facebook_messenger.rb
@@ -1,11 +1,11 @@
 # ref: https://github.com/jgorset/facebook-messenger#make-a-configuration-provider
 class ChatwootFbProvider < Facebook::Messenger::Configuration::Providers::Base
   def valid_verify_token?(_verify_token)
-    ENV['FB_VERIFY_TOKEN']
+    GlobalConfigService.load('FB_VERIFY_TOKEN', '')
   end
 
   def app_secret_for(_page_id)
-    ENV['FB_APP_SECRET']
+    GlobalConfigService.load('FB_APP_SECRET', '')
   end
 
   def access_token_for(page_id)
diff --git a/lib/integrations/facebook/message_parser.rb b/lib/integrations/facebook/message_parser.rb
index e53438d70..d2b943c00 100644
--- a/lib/integrations/facebook/message_parser.rb
+++ b/lib/integrations/facebook/message_parser.rb
@@ -44,7 +44,7 @@ class Integrations::Facebook::MessageParser
 
   # TODO : does this work ?
   def sent_from_chatwoot_app?
-    app_id && app_id == ENV['FB_APP_ID'].to_i
+    app_id && app_id == GlobalConfigService.load('FB_APP_ID', '').to_i
   end
 end
 
diff --git a/spec/lib/vapid_service_spec.rb b/spec/lib/vapid_service_spec.rb
index bdadeabf5..8a5d3891c 100644
--- a/spec/lib/vapid_service_spec.rb
+++ b/spec/lib/vapid_service_spec.rb
@@ -19,6 +19,9 @@ describe VapidService do
         ENV['VAPID_PUBLIC_KEY'] = 'test'
         described_class.public_key
 
+        # this call will hit db as after_commit method will clear globalConfig cache
+        expect(InstallationConfig).to receive(:find_by)
+        described_class.public_key
         # subsequent calls should not hit DB
         expect(InstallationConfig).not_to receive(:find_by)
         described_class.public_key
@@ -30,11 +33,13 @@ describe VapidService do
         ENV['VAPID_PRIVATE_KEY'] = 'test'
         described_class.private_key
 
+        # this call will hit db as after_commit method will clear globalConfig cache
+        expect(InstallationConfig).to receive(:find_by)
+        described_class.private_key
         # subsequent calls should not hit DB
         expect(InstallationConfig).not_to receive(:find_by)
         described_class.private_key
         ENV['VAPID_PRIVATE_KEY'] = nil
-        ENV['VAPID_PRIVATE_KEY'] = nil
       end
 
       it 'clears cache and fetch from DB next time, when clear_cache is called' do

From b0370ce44dc0994ef4e21a968e2d53e29fcf676e Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Thu, 25 Nov 2021 12:01:31 +0530
Subject: [PATCH 29/69] Feat: Fix contact filter pagination (#3463)

---
 app/controllers/api/v1/accounts/contacts_controller.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/controllers/api/v1/accounts/contacts_controller.rb b/app/controllers/api/v1/accounts/contacts_controller.rb
index e22341d90..fcb1de831 100644
--- a/app/controllers/api/v1/accounts/contacts_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts_controller.rb
@@ -11,9 +11,9 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   RESULTS_PER_PAGE = 15
 
   before_action :check_authorization
-  before_action :set_current_page, only: [:index, :active, :search]
+  before_action :set_current_page, only: [:index, :active, :search, :filter]
   before_action :fetch_contact, only: [:show, :update, :destroy, :contactable_inboxes, :destroy_custom_attributes]
-  before_action :set_include_contact_inboxes, only: [:index, :search]
+  before_action :set_include_contact_inboxes, only: [:index, :search, :filter]
 
   def index
     @contacts_count = resolved_contacts.count

From 2c3c1888f181c3f7efdb7c6e8741416dee0d9929 Mon Sep 17 00:00:00 2001
From: Sanju <sanjusdhr@gmail.com>
Date: Thu, 25 Nov 2021 20:25:14 +0530
Subject: [PATCH 30/69] Enhancement: Show unread marker on widget bubble
 (#3390)

* add unread marker

* add removeClass in IFramehelper

* Update app/javascript/sdk/sdk.js

* Update app/javascript/sdk/sdk.js

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
---
 app/javascript/sdk/IFrameHelper.js | 13 +++++++++++++
 app/javascript/sdk/sdk.js          | 13 +++++++++++++
 app/javascript/widget/App.vue      | 12 ++++++++++++
 3 files changed, 38 insertions(+)

diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index 68bf83f50..21cd923ff 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -3,6 +3,7 @@ import {
   wootOn,
   addClass,
   loadCSS,
+  removeClass,
   onLocationChangeListener,
 } from './DOMHelpers';
 import {
@@ -197,6 +198,18 @@ export const IFrameHelper = {
       removeUnreadClass();
     },
 
+    handleNotificationDot: event => {
+      const bubbleElement = document.querySelector('.woot-widget-bubble');
+      if (
+        event.unreadMessageCount > 0 &&
+        !bubbleElement.classList.contains('unread-notification')
+      ) {
+        addClass(bubbleElement, 'unread-notification');
+      } else if (event.unreadMessageCount === 0) {
+        removeClass(bubbleElement, 'unread-notification');
+      }
+    },
+
     closeChat: () => {
       onBubbleClick({ toggleValue: false });
     },
diff --git a/app/javascript/sdk/sdk.js b/app/javascript/sdk/sdk.js
index ebdbdf1ca..50f147c70 100644
--- a/app/javascript/sdk/sdk.js
+++ b/app/javascript/sdk/sdk.js
@@ -37,6 +37,19 @@ export const SDK_CSS = `.woot-widget-holder {
   user-select: none;
 }
 
+.woot-widget-bubble.unread-notification::after {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #ff4040;
+  border-radius: 100%;
+  top: 0px;
+  right: 0px;
+  border: 2px solid #ffffff;
+  transition: background 0.2s ease;
+}
+
 .woot-widget-bubble.woot-widget--expanded {
   bottom: 24px;
   display: flex;
diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index 98be1b767..818ef6db4 100755
--- a/app/javascript/widget/App.vue
+++ b/app/javascript/widget/App.vue
@@ -200,12 +200,23 @@ export default {
           unreadMessageCount,
         });
         this.setIframeHeight(this.isMobile);
+        this.handleUnreadNotificationDot();
       }
     },
     unsetUnreadView() {
       if (this.isIFrame) {
         IFrameHelper.sendMessage({ event: 'resetUnreadMode' });
         this.setIframeHeight();
+        this.handleUnreadNotificationDot();
+      }
+    },
+    handleUnreadNotificationDot() {
+      const { unreadMessageCount } = this;
+      if (this.isIFrame) {
+        IFrameHelper.sendMessage({
+          event: 'handleNotificationDot',
+          unreadMessageCount,
+        });
       }
     },
     createWidgetEvents(message) {
@@ -281,6 +292,7 @@ export default {
           }
           this.showUnreadView = false;
           this.showCampaignView = false;
+          this.handleUnreadNotificationDot();
         } else if (message.event === 'toggle-open') {
           this.isWidgetOpen = message.isOpen;
           this.toggleOpen();

From 55843c5bada54b30b46f698e1af970144832ad2f Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 26 Nov 2021 13:41:09 +0530
Subject: [PATCH 31/69] chore: fixes filter input multiselect height issue
 (#3466)

---
 .../widgets/conversation/components/FilterInput.vue         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
index d5a9cefd8..8ef570dca 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
@@ -40,6 +40,7 @@
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               deselect-label=""
+              :max-height="160"
               :options="dropdownValues"
               :allow-empty="false"
             />
@@ -56,6 +57,7 @@
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               deselect-label=""
+              :max-height="160"
               :options="dropdownValues"
               :allow-empty="false"
               :option-height="104"
@@ -218,6 +220,10 @@ export default {
 .filter__answer--wrap {
   margin-right: var(--space-smaller);
   flex-grow: 1;
+
+  input {
+    margin-bottom: 0;
+  }
 }
 .filter__answer {
   &.answer--text-input {

From add004a56e9c7155659f602f818775fa1a80b852 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Sat, 27 Nov 2021 00:48:46 +0530
Subject: [PATCH 32/69] Chore: API Improvements (#3469)

---
 .rubocop.yml                                  |  2 +-
 .../accounts/canned_responses_controller.rb   |  2 +-
 app/presenters/agent_bot_presenter.rb         |  7 +++++
 .../accounts/agent_bots/create.json.jbuilder  |  2 +-
 .../accounts/agent_bots/index.json.jbuilder   |  2 +-
 .../v1/accounts/agent_bots/show.json.jbuilder |  2 +-
 .../accounts/agent_bots/update.json.jbuilder  |  2 +-
 .../api/v1/models/_agent_bot.json.jbuilder    |  1 +
 .../api/v1/models/_agent_bot.json.jbuilder    |  1 +
 db/seeds.rb                                   | 12 ++++-----
 lib/seeders/account_seeder.rb                 | 27 +++++++++++++++++++
 .../message_seeder.rb}                        |  2 +-
 .../v1/accounts/agent_bots_controller_spec.rb |  6 +++++
 13 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 app/presenters/agent_bot_presenter.rb
 create mode 100644 lib/seeders/account_seeder.rb
 rename lib/{woot_message_seeder.rb => seeders/message_seeder.rb} (99%)

diff --git a/.rubocop.yml b/.rubocop.yml
index b1c69ec70..8f8473547 100644
--- a/.rubocop.yml
+++ b/.rubocop.yml
@@ -57,7 +57,7 @@ Metrics/BlockLength:
     - db/schema.rb
 Metrics/ModuleLength:
   Exclude:
-    - lib/woot_message_seeder.rb
+    - lib/seeders/message_seeder.rb
 Rails/ApplicationController:
   Exclude:
     - 'app/controllers/api/v1/widget/messages_controller.rb'
diff --git a/app/controllers/api/v1/accounts/canned_responses_controller.rb b/app/controllers/api/v1/accounts/canned_responses_controller.rb
index 16e16e4a6..bbfa9c4b7 100644
--- a/app/controllers/api/v1/accounts/canned_responses_controller.rb
+++ b/app/controllers/api/v1/accounts/canned_responses_controller.rb
@@ -33,7 +33,7 @@ class Api::V1::Accounts::CannedResponsesController < Api::V1::Accounts::BaseCont
 
   def canned_responses
     if params[:search]
-      Current.account.canned_responses.where('short_code ILIKE ?', "#{params[:search]}%")
+      Current.account.canned_responses.where('short_code ILIKE :search OR content ILIKE :search', search: "%#{params[:search]}%")
     else
       Current.account.canned_responses
     end
diff --git a/app/presenters/agent_bot_presenter.rb b/app/presenters/agent_bot_presenter.rb
new file mode 100644
index 000000000..2fa61f59c
--- /dev/null
+++ b/app/presenters/agent_bot_presenter.rb
@@ -0,0 +1,7 @@
+class AgentBotPresenter < SimpleDelegator
+  def access_token
+    return if account_id.blank?
+
+    Current.account.id == account_id ? super&.token : nil
+  end
+end
diff --git a/app/views/api/v1/accounts/agent_bots/create.json.jbuilder b/app/views/api/v1/accounts/agent_bots/create.json.jbuilder
index 453ef5cb4..f84bfc80d 100644
--- a/app/views/api/v1/accounts/agent_bots/create.json.jbuilder
+++ b/app/views/api/v1/accounts/agent_bots/create.json.jbuilder
@@ -1 +1 @@
-json.partial! 'api/v1/models/agent_bot.json.jbuilder', resource: @agent_bot
+json.partial! 'api/v1/models/agent_bot.json.jbuilder', resource: AgentBotPresenter.new(@agent_bot)
diff --git a/app/views/api/v1/accounts/agent_bots/index.json.jbuilder b/app/views/api/v1/accounts/agent_bots/index.json.jbuilder
index d65188ff2..e77d418fb 100644
--- a/app/views/api/v1/accounts/agent_bots/index.json.jbuilder
+++ b/app/views/api/v1/accounts/agent_bots/index.json.jbuilder
@@ -1,3 +1,3 @@
 json.array! @agent_bots do |agent_bot|
-  json.partial! 'api/v1/models/agent_bot.json.jbuilder', resource: agent_bot
+  json.partial! 'api/v1/models/agent_bot.json.jbuilder', resource: AgentBotPresenter.new(agent_bot)
 end
diff --git a/app/views/api/v1/accounts/agent_bots/show.json.jbuilder b/app/views/api/v1/accounts/agent_bots/show.json.jbuilder
index 453ef5cb4..f84bfc80d 100644
--- a/app/views/api/v1/accounts/agent_bots/show.json.jbuilder
+++ b/app/views/api/v1/accounts/agent_bots/show.json.jbuilder
@@ -1 +1 @@
-json.partial! 'api/v1/models/agent_bot.json.jbuilder', resource: @agent_bot
+json.partial! 'api/v1/models/agent_bot.json.jbuilder', resource: AgentBotPresenter.new(@agent_bot)
diff --git a/app/views/api/v1/accounts/agent_bots/update.json.jbuilder b/app/views/api/v1/accounts/agent_bots/update.json.jbuilder
index 453ef5cb4..f84bfc80d 100644
--- a/app/views/api/v1/accounts/agent_bots/update.json.jbuilder
+++ b/app/views/api/v1/accounts/agent_bots/update.json.jbuilder
@@ -1 +1 @@
-json.partial! 'api/v1/models/agent_bot.json.jbuilder', resource: @agent_bot
+json.partial! 'api/v1/models/agent_bot.json.jbuilder', resource: AgentBotPresenter.new(@agent_bot)
diff --git a/app/views/api/v1/models/_agent_bot.json.jbuilder b/app/views/api/v1/models/_agent_bot.json.jbuilder
index d9d1eaa17..044624fd8 100644
--- a/app/views/api/v1/models/_agent_bot.json.jbuilder
+++ b/app/views/api/v1/models/_agent_bot.json.jbuilder
@@ -3,3 +3,4 @@ json.name resource.name
 json.description resource.description
 json.outgoing_url resource.outgoing_url
 json.account_id resource.account_id
+json.access_token resource.access_token if resource.access_token.present?
diff --git a/app/views/platform/api/v1/models/_agent_bot.json.jbuilder b/app/views/platform/api/v1/models/_agent_bot.json.jbuilder
index 1aa152186..8e04e98d7 100644
--- a/app/views/platform/api/v1/models/_agent_bot.json.jbuilder
+++ b/app/views/platform/api/v1/models/_agent_bot.json.jbuilder
@@ -3,3 +3,4 @@ json.name resource.name
 json.description resource.description
 json.outgoing_url resource.name
 json.account_id resource.account_id
+json.access_token resource.access_token.token
diff --git a/db/seeds.rb b/db/seeds.rb
index 2cce3e7cf..306d8ba2d 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -60,20 +60,20 @@ unless Rails.env.production?
   )
 
   # sample email collect
-  WootMessageSeeder.create_sample_email_collect_message conversation
+  Seeders::MessageSeeder.create_sample_email_collect_message conversation
 
   Message.create!(content: 'Hello', account: account, inbox: inbox, conversation: conversation, message_type: :incoming)
 
   # sample card
-  WootMessageSeeder.create_sample_cards_message conversation
+  Seeders::MessageSeeder.create_sample_cards_message conversation
   # input select
-  WootMessageSeeder.create_sample_input_select_message conversation
+  Seeders::MessageSeeder.create_sample_input_select_message conversation
   # form
-  WootMessageSeeder.create_sample_form_message conversation
+  Seeders::MessageSeeder.create_sample_form_message conversation
   # articles
-  WootMessageSeeder.create_sample_articles_message conversation
+  Seeders::MessageSeeder.create_sample_articles_message conversation
   # csat
-  WootMessageSeeder.create_sample_csat_collect_message conversation
+  Seeders::MessageSeeder.create_sample_csat_collect_message conversation
 
   CannedResponse.create!(account: account, short_code: 'start', content: 'Hello welcome to chatwoot.')
 end
diff --git a/lib/seeders/account_seeder.rb b/lib/seeders/account_seeder.rb
new file mode 100644
index 000000000..65fe5a4e1
--- /dev/null
+++ b/lib/seeders/account_seeder.rb
@@ -0,0 +1,27 @@
+## Class to generate sample data for a chatwoot test Account.
+############################################################
+### Usage #####
+#
+#   # Seed an account with all data types in this class
+#   Seeders::AccountSeeder.new(account: account).seed!
+#
+#   # When you want to seed only a specific type of data
+#   Seeders::AccountSeeder.new(account: account).seed_canned_responses
+#   # Seed specific number of objects
+#   Seeders::AccountSeeder.new(account: account).seed_canned_responses(count: 10)
+#
+############################################################
+
+class Seeders::AccountSeeder
+  pattr_initialize [:account!]
+
+  def seed!
+    seed_canned_responses
+  end
+
+  def seed_canned_responses(count: 50)
+    count.times do
+      account.canned_responses.create(content: Faker::Quote.fortune_cookie, short_code: Faker::Alphanumeric.alpha(number: 10))
+    end
+  end
+end
diff --git a/lib/woot_message_seeder.rb b/lib/seeders/message_seeder.rb
similarity index 99%
rename from lib/woot_message_seeder.rb
rename to lib/seeders/message_seeder.rb
index 2e38868d8..5159225bd 100644
--- a/lib/woot_message_seeder.rb
+++ b/lib/seeders/message_seeder.rb
@@ -1,4 +1,4 @@
-module WootMessageSeeder
+module Seeders::MessageSeeder
   def self.create_sample_email_collect_message(conversation)
     Message.create!(
       account: conversation.account,
diff --git a/spec/controllers/api/v1/accounts/agent_bots_controller_spec.rb b/spec/controllers/api/v1/accounts/agent_bots_controller_spec.rb
index 60442e6d6..ab3b578fc 100644
--- a/spec/controllers/api/v1/accounts/agent_bots_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/agent_bots_controller_spec.rb
@@ -25,6 +25,8 @@ RSpec.describe 'Agent Bot API', type: :request do
         expect(response).to have_http_status(:success)
         expect(response.body).to include(agent_bot.name)
         expect(response.body).to include(global_bot.name)
+        expect(response.body).to include(agent_bot.access_token.token)
+        expect(response.body).not_to include(global_bot.access_token.token)
       end
     end
   end
@@ -46,6 +48,7 @@ RSpec.describe 'Agent Bot API', type: :request do
 
         expect(response).to have_http_status(:success)
         expect(response.body).to include(agent_bot.name)
+        expect(response.body).to include(agent_bot.access_token.token)
       end
 
       it 'will show a global agent bot' do
@@ -56,6 +59,7 @@ RSpec.describe 'Agent Bot API', type: :request do
 
         expect(response).to have_http_status(:success)
         expect(response.body).to include(global_bot.name)
+        expect(response.body).not_to include(global_bot.access_token.token)
       end
     end
   end
@@ -113,6 +117,7 @@ RSpec.describe 'Agent Bot API', type: :request do
 
         expect(response).to have_http_status(:success)
         expect(agent_bot.reload.name).to eq('test_updated')
+        expect(response.body).to include(agent_bot.access_token.token)
       end
 
       it 'would not update the agent bot when agent' do
@@ -134,6 +139,7 @@ RSpec.describe 'Agent Bot API', type: :request do
 
         expect(response).to have_http_status(:not_found)
         expect(agent_bot.reload.name).not_to eq('test_updated')
+        expect(response.body).not_to include(global_bot.access_token.token)
       end
     end
   end

From b326da7d94312ca585c61d6b677fda7a4e960ed5 Mon Sep 17 00:00:00 2001
From: Santhosh C <csesanthosh15@gmail.com>
Date: Sat, 27 Nov 2021 00:56:07 +0530
Subject: [PATCH 33/69] feat: Ability to remove user profile picture (#3156)

Fixes #3107
---
 app/controllers/api/v1/profiles_controller.rb |  5 ++++
 app/javascript/dashboard/api/auth.js          |  4 +++
 app/javascript/dashboard/api/endPoints.js     |  4 +++
 .../dashboard/i18n/locale/en/settings.json    | 11 ++++++--
 .../dashboard/settings/profile/Index.vue      | 24 +++++++++++++++++
 .../dashboard/store/modules/auth.js           |  9 +++++++
 .../store/modules/specs/auth/actions.spec.js  |  2 +-
 config/routes.rb                              |  2 ++
 .../api/v1/profiles_controller_spec.rb        | 26 +++++++++++++++++++
 9 files changed, 84 insertions(+), 3 deletions(-)

diff --git a/app/controllers/api/v1/profiles_controller.rb b/app/controllers/api/v1/profiles_controller.rb
index a92c479bc..b915f0775 100644
--- a/app/controllers/api/v1/profiles_controller.rb
+++ b/app/controllers/api/v1/profiles_controller.rb
@@ -13,6 +13,11 @@ class Api::V1::ProfilesController < Api::BaseController
     @user.update!(profile_params)
   end
 
+  def avatar
+    @user.avatar.attachment.destroy! if @user.avatar.attached?
+    head :ok
+  end
+
   def availability
     @user.account_users.find_by!(account_id: availability_params[:account_id]).update!(availability: availability_params[:availability])
   end
diff --git a/app/javascript/dashboard/api/auth.js b/app/javascript/dashboard/api/auth.js
index c41a43624..e5ed77a34 100644
--- a/app/javascript/dashboard/api/auth.js
+++ b/app/javascript/dashboard/api/auth.js
@@ -166,4 +166,8 @@ export default {
       profile: { ...availabilityData },
     });
   },
+
+  deleteAvatar() {
+    return axios.delete(endPoints('deleteAvatar').url);
+  },
 };
diff --git a/app/javascript/dashboard/api/endPoints.js b/app/javascript/dashboard/api/endPoints.js
index 0b801fdb3..c9d0955ef 100644
--- a/app/javascript/dashboard/api/endPoints.js
+++ b/app/javascript/dashboard/api/endPoints.js
@@ -36,6 +36,10 @@ const endPoints = {
     },
     params: { omniauth_token: '' },
   },
+
+  deleteAvatar: {
+    url: '/api/v1/profile/avatar',
+  },
 };
 
 export default page => {
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 5c8dcbf98..47ad6ec7b 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -3,6 +3,9 @@
     "LINK": "Profile Settings",
     "TITLE": "Profile Settings",
     "BTN_TEXT": "Update Profile",
+    "DELETE_AVATAR": "Delete Avatar",
+    "AVATAR_DELETE_SUCCESS": "Avatar has been deleted successfully",
+    "AVATAR_DELETE_FAILED": "There is an error while deleting avatar, please try again",
     "UPDATE_SUCCESS": "Your profile has been updated successfully",
     "PASSWORD_UPDATE_SUCCESS": "Your password has been changed successfully",
     "AFTER_EMAIL_CHANGED": "Your profile has been updated successfully, please login again as your login credentials are changed",
@@ -69,7 +72,11 @@
       },
       "AVAILABILITY": {
         "LABEL": "Availability",
-        "STATUSES_LIST": ["Online", "Busy", "Offline"]
+        "STATUSES_LIST": [
+          "Online",
+          "Busy",
+          "Offline"
+        ]
       },
       "EMAIL": {
         "LABEL": "Your email address",
@@ -196,4 +203,4 @@
       "FORWARD_SLASH_KEY": "/"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index e2ce46575..053ac5e50 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -14,6 +14,17 @@
             :src="avatarUrl"
             @change="handleImageUpload"
           />
+          <div v-if="showDeleteButton" class="avatar-delete-btn">
+            <woot-button
+              type="button"
+              color-scheme="alert"
+              variant="hollow"
+              size="small"
+              @click="deleteAvatar"
+            >
+              {{ $t('PROFILE_SETTINGS.DELETE_AVATAR') }}
+            </woot-button>
+          </div>
           <label :class="{ error: $v.name.$error }">
             {{ $t('PROFILE_SETTINGS.FORM.NAME.LABEL') }}
             <input
@@ -177,6 +188,19 @@ export default {
       this.avatarFile = file;
       this.avatarUrl = url;
     },
+    async deleteAvatar() {
+      try {
+        await this.$store.dispatch('deleteAvatar');
+        this.avatarUrl = '';
+        this.avatarFile = '';
+        this.showAlert(this.$t('PROFILE_SETTINGS.AVATAR_DELETE_SUCCESS'));
+      } catch (error) {
+        this.showAlert(this.$t('PROFILE_SETTINGS.AVATAR_DELETE_FAILED'));
+      }
+    },
+    showDeleteButton() {
+      return this.avatarUrl && !this.avatarUrl.includes('www.gravatar.com');
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/store/modules/auth.js b/app/javascript/dashboard/store/modules/auth.js
index 5ef83086d..ffd3aee26 100644
--- a/app/javascript/dashboard/store/modules/auth.js
+++ b/app/javascript/dashboard/store/modules/auth.js
@@ -121,6 +121,15 @@ export const actions = {
     }
   },
 
+  deleteAvatar: async ({ commit }) => {
+    try {
+      await authAPI.deleteAvatar();
+      commit(types.default.SET_CURRENT_USER);
+    } catch (error) {
+      // Ignore error
+    }
+  },
+
   updateUISettings: async ({ commit }, params) => {
     try {
       commit(types.default.SET_CURRENT_USER_UI_SETTINGS, params);
diff --git a/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js b/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
index 1d2dfe889..2a09ae576 100644
--- a/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/auth/actions.spec.js
@@ -63,7 +63,7 @@ describe('#actions', () => {
       });
       await actions.updateAvailability(
         { commit, dispatch },
-        { availability: 'offline', account_id: 1 },
+        { availability: 'offline', account_id: 1 }
       );
       expect(setUser).toHaveBeenCalledTimes(1);
       expect(commit.mock.calls).toEqual([[types.default.SET_CURRENT_USER]]);
diff --git a/config/routes.rb b/config/routes.rb
index 8cb8b4fb9..44011cfcd 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -166,10 +166,12 @@ Rails.application.routes.draw do
       end
 
       resource :profile, only: [:show, :update] do
+        delete :avatar, on: :collection
         member do
           post :availability
         end
       end
+
       resource :notification_subscriptions, only: [:create]
 
       namespace :widget do
diff --git a/spec/controllers/api/v1/profiles_controller_spec.rb b/spec/controllers/api/v1/profiles_controller_spec.rb
index 53de5bcfe..961d5c091 100644
--- a/spec/controllers/api/v1/profiles_controller_spec.rb
+++ b/spec/controllers/api/v1/profiles_controller_spec.rb
@@ -102,6 +102,32 @@ RSpec.describe 'Profile API', type: :request do
     end
   end
 
+  describe 'DELETE /api/v1/profile/avatar' do
+    let(:agent) { create(:user, password: 'Test123!', account: account, role: :agent) }
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        delete '/api/v1/profile/avatar'
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated user' do
+      before do
+        agent.avatar.attach(io: File.open(Rails.root.join('spec/assets/avatar.png')), filename: 'avatar.png', content_type: 'image/png')
+      end
+
+      it 'deletes the agent avatar' do
+        delete '/api/v1/profile/avatar',
+               headers: agent.create_new_auth_token,
+               as: :json
+
+        expect(response).to have_http_status(:success)
+      end
+    end
+  end
+
   describe 'POST /api/v1/profile/availability' do
     context 'when it is an unauthenticated user' do
       it 'returns unauthorized' do

From 89f9f39e6edcefb9525318bad6402cdd3f23c3a0 Mon Sep 17 00:00:00 2001
From: Sanju <sanjusdhr@gmail.com>
Date: Sat, 27 Nov 2021 09:07:09 +0530
Subject: [PATCH 34/69] chore: add account id in account settings page (#3365)

Fixes: #3317
---
 .../i18n/locale/ar/generalSettings.json        |  4 ++++
 .../i18n/locale/ca/generalSettings.json        |  4 ++++
 .../i18n/locale/cs/generalSettings.json        |  4 ++++
 .../i18n/locale/da/generalSettings.json        |  4 ++++
 .../i18n/locale/de/generalSettings.json        |  4 ++++
 .../i18n/locale/el/generalSettings.json        |  4 ++++
 .../i18n/locale/en/generalSettings.json        |  4 ++++
 .../i18n/locale/es/generalSettings.json        |  4 ++++
 .../i18n/locale/fa/generalSettings.json        |  4 ++++
 .../i18n/locale/fi/generalSettings.json        |  4 ++++
 .../i18n/locale/fr/generalSettings.json        |  4 ++++
 .../i18n/locale/he/generalSettings.json        |  4 ++++
 .../i18n/locale/hi/generalSettings.json        |  4 ++++
 .../i18n/locale/hu/generalSettings.json        |  4 ++++
 .../i18n/locale/id/generalSettings.json        |  4 ++++
 .../i18n/locale/it/generalSettings.json        |  4 ++++
 .../i18n/locale/ja/generalSettings.json        |  4 ++++
 .../i18n/locale/ko/generalSettings.json        |  4 ++++
 .../i18n/locale/ml/generalSettings.json        |  4 ++++
 .../i18n/locale/ne/generalSettings.json        |  4 ++++
 .../i18n/locale/nl/generalSettings.json        |  4 ++++
 .../i18n/locale/no/generalSettings.json        |  4 ++++
 .../i18n/locale/pl/generalSettings.json        |  4 ++++
 .../i18n/locale/pt/generalSettings.json        |  4 ++++
 .../i18n/locale/pt_BR/generalSettings.json     |  4 ++++
 .../i18n/locale/ro/generalSettings.json        |  4 ++++
 .../i18n/locale/ru/generalSettings.json        |  4 ++++
 .../i18n/locale/sk/generalSettings.json        |  4 ++++
 .../i18n/locale/sv/generalSettings.json        |  4 ++++
 .../i18n/locale/ta/generalSettings.json        |  4 ++++
 .../i18n/locale/th/generalSettings.json        |  4 ++++
 .../i18n/locale/tr/generalSettings.json        |  4 ++++
 .../i18n/locale/uk/generalSettings.json        |  4 ++++
 .../i18n/locale/vi/generalSettings.json        |  4 ++++
 .../i18n/locale/zh/generalSettings.json        |  4 ++++
 .../i18n/locale/zh_CN/generalSettings.json     |  4 ++++
 .../i18n/locale/zh_TW/generalSettings.json     |  4 ++++
 .../dashboard/settings/account/Index.vue       | 18 ++++++++++++++++++
 38 files changed, 166 insertions(+)

diff --git a/app/javascript/dashboard/i18n/locale/ar/generalSettings.json b/app/javascript/dashboard/i18n/locale/ar/generalSettings.json
index 8530c8a09..ee6b016a0 100644
--- a/app/javascript/dashboard/i18n/locale/ar/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ar/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "الإعدادات العامة",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "اسم الحساب",
         "PLACEHOLDER": "اسم الحساب الخاص بك",
diff --git a/app/javascript/dashboard/i18n/locale/ca/generalSettings.json b/app/javascript/dashboard/i18n/locale/ca/generalSettings.json
index 4599847de..bffe573da 100644
--- a/app/javascript/dashboard/i18n/locale/ca/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ca/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Configuració general",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Nom del compte",
         "PLACEHOLDER": "El nom del vostre compte",
diff --git a/app/javascript/dashboard/i18n/locale/cs/generalSettings.json b/app/javascript/dashboard/i18n/locale/cs/generalSettings.json
index f3b928221..0ed3e3316 100644
--- a/app/javascript/dashboard/i18n/locale/cs/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/cs/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Obecná nastavení",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Název účtu",
         "PLACEHOLDER": "Název vašeho účtu",
diff --git a/app/javascript/dashboard/i18n/locale/da/generalSettings.json b/app/javascript/dashboard/i18n/locale/da/generalSettings.json
index 6c83d63b0..23fb2588d 100644
--- a/app/javascript/dashboard/i18n/locale/da/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/da/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Generelle indstillinger",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Kontonavn",
         "PLACEHOLDER": "Dit kontonavn",
diff --git a/app/javascript/dashboard/i18n/locale/de/generalSettings.json b/app/javascript/dashboard/i18n/locale/de/generalSettings.json
index 5d809f37a..a7e3bc31e 100644
--- a/app/javascript/dashboard/i18n/locale/de/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/de/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Allgemeine Einstellungen",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Kontobezeichnung",
         "PLACEHOLDER": "Ihr Kontoname",
diff --git a/app/javascript/dashboard/i18n/locale/el/generalSettings.json b/app/javascript/dashboard/i18n/locale/el/generalSettings.json
index 0f8ea675d..df5be0fa3 100644
--- a/app/javascript/dashboard/i18n/locale/el/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/el/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Γενικές Ρυθμίσεις",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Ονομασία Λογαριασμού",
         "PLACEHOLDER": "Η ονομασία του Λογαριασμού σας",
diff --git a/app/javascript/dashboard/i18n/locale/en/generalSettings.json b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
index bbeb72f0f..a31f0fb90 100644
--- a/app/javascript/dashboard/i18n/locale/en/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "General settings",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Account name",
         "PLACEHOLDER": "Your account name",
diff --git a/app/javascript/dashboard/i18n/locale/es/generalSettings.json b/app/javascript/dashboard/i18n/locale/es/generalSettings.json
index d53e8d0ee..d5ef417bb 100644
--- a/app/javascript/dashboard/i18n/locale/es/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/es/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Ajustes generales",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Nombre de cuenta",
         "PLACEHOLDER": "Tu nombre de cuenta",
diff --git a/app/javascript/dashboard/i18n/locale/fa/generalSettings.json b/app/javascript/dashboard/i18n/locale/fa/generalSettings.json
index 0e022a557..d74c51f63 100644
--- a/app/javascript/dashboard/i18n/locale/fa/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/fa/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "تنظیمات عمومی",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "عنوان حساب",
         "PLACEHOLDER": "عنوان حساب شما",
diff --git a/app/javascript/dashboard/i18n/locale/fi/generalSettings.json b/app/javascript/dashboard/i18n/locale/fi/generalSettings.json
index ac9ca0fba..7e5f509d9 100644
--- a/app/javascript/dashboard/i18n/locale/fi/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/fi/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Yleiset asetukset",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Tilin nimi",
         "PLACEHOLDER": "Tilisi nimi",
diff --git a/app/javascript/dashboard/i18n/locale/fr/generalSettings.json b/app/javascript/dashboard/i18n/locale/fr/generalSettings.json
index a5b80bbde..b0a23a94b 100644
--- a/app/javascript/dashboard/i18n/locale/fr/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/fr/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Paramètres généraux",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Nom du compte",
         "PLACEHOLDER": "Votre nom de compte",
diff --git a/app/javascript/dashboard/i18n/locale/he/generalSettings.json b/app/javascript/dashboard/i18n/locale/he/generalSettings.json
index bbc6356b8..5257cc284 100644
--- a/app/javascript/dashboard/i18n/locale/he/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/he/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "הגדרות כלליות",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "שם החשבון",
         "PLACEHOLDER": "שם החשבון שלך",
diff --git a/app/javascript/dashboard/i18n/locale/hi/generalSettings.json b/app/javascript/dashboard/i18n/locale/hi/generalSettings.json
index 223a4688e..474176d34 100644
--- a/app/javascript/dashboard/i18n/locale/hi/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/hi/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "General settings",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Account name",
         "PLACEHOLDER": "Your account name",
diff --git a/app/javascript/dashboard/i18n/locale/hu/generalSettings.json b/app/javascript/dashboard/i18n/locale/hu/generalSettings.json
index 7c302ac76..39a35093f 100644
--- a/app/javascript/dashboard/i18n/locale/hu/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/hu/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Általános beállítások",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Fióknév",
         "PLACEHOLDER": "A fiókneved",
diff --git a/app/javascript/dashboard/i18n/locale/id/generalSettings.json b/app/javascript/dashboard/i18n/locale/id/generalSettings.json
index a975655eb..adf0be4bd 100644
--- a/app/javascript/dashboard/i18n/locale/id/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/id/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Pengaturan Umum",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Nama Akun",
         "PLACEHOLDER": "Nama akun Anda",
diff --git a/app/javascript/dashboard/i18n/locale/it/generalSettings.json b/app/javascript/dashboard/i18n/locale/it/generalSettings.json
index d3924657e..053ae94b5 100644
--- a/app/javascript/dashboard/i18n/locale/it/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/it/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Impostazioni generali",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Nome del conto",
         "PLACEHOLDER": "Nome del tuo account",
diff --git a/app/javascript/dashboard/i18n/locale/ja/generalSettings.json b/app/javascript/dashboard/i18n/locale/ja/generalSettings.json
index d6ae68c71..bc65e37e2 100644
--- a/app/javascript/dashboard/i18n/locale/ja/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ja/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "全般設定",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "アカウント名",
         "PLACEHOLDER": "あなたのアカウント名",
diff --git a/app/javascript/dashboard/i18n/locale/ko/generalSettings.json b/app/javascript/dashboard/i18n/locale/ko/generalSettings.json
index 761ce5044..eef8744e7 100644
--- a/app/javascript/dashboard/i18n/locale/ko/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ko/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "일반 설정",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "계정 이름",
         "PLACEHOLDER": "당신의 계정 이름",
diff --git a/app/javascript/dashboard/i18n/locale/ml/generalSettings.json b/app/javascript/dashboard/i18n/locale/ml/generalSettings.json
index c6680ee72..735eb5b95 100644
--- a/app/javascript/dashboard/i18n/locale/ml/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ml/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "പൊതുവായ ക്രമീകരണങ്ങൾ",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "അക്കൗണ്ടിന്റെ പേര്",
         "PLACEHOLDER": "നിങ്ങളുടെ അക്കൗണ്ടിന്റെ പേര്",
diff --git a/app/javascript/dashboard/i18n/locale/ne/generalSettings.json b/app/javascript/dashboard/i18n/locale/ne/generalSettings.json
index 223a4688e..474176d34 100644
--- a/app/javascript/dashboard/i18n/locale/ne/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ne/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "General settings",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Account name",
         "PLACEHOLDER": "Your account name",
diff --git a/app/javascript/dashboard/i18n/locale/nl/generalSettings.json b/app/javascript/dashboard/i18n/locale/nl/generalSettings.json
index 5a8b51d66..d96d4eb88 100644
--- a/app/javascript/dashboard/i18n/locale/nl/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/nl/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Algemene instellingen",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "accountnaam",
         "PLACEHOLDER": "Uw accountnaam",
diff --git a/app/javascript/dashboard/i18n/locale/no/generalSettings.json b/app/javascript/dashboard/i18n/locale/no/generalSettings.json
index 8201daa63..1b9db2b65 100644
--- a/app/javascript/dashboard/i18n/locale/no/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/no/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Generelle innstillinger",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Kontonavn",
         "PLACEHOLDER": "Ditt kontonavn",
diff --git a/app/javascript/dashboard/i18n/locale/pl/generalSettings.json b/app/javascript/dashboard/i18n/locale/pl/generalSettings.json
index 5192759f7..aaec50055 100644
--- a/app/javascript/dashboard/i18n/locale/pl/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/pl/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Ustawienia ogólne",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Nazwa konta",
         "PLACEHOLDER": "Nazwa konta",
diff --git a/app/javascript/dashboard/i18n/locale/pt/generalSettings.json b/app/javascript/dashboard/i18n/locale/pt/generalSettings.json
index b86110f4d..68530f0a2 100644
--- a/app/javascript/dashboard/i18n/locale/pt/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/pt/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Configurações gerais",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Nome da Conta",
         "PLACEHOLDER": "Nome da sua conta",
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/generalSettings.json b/app/javascript/dashboard/i18n/locale/pt_BR/generalSettings.json
index 38a42b057..5b78bc6f2 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Configurações gerais",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Nome da Conta",
         "PLACEHOLDER": "Nome da sua conta",
diff --git a/app/javascript/dashboard/i18n/locale/ro/generalSettings.json b/app/javascript/dashboard/i18n/locale/ro/generalSettings.json
index 85a0881f0..128b2b00c 100644
--- a/app/javascript/dashboard/i18n/locale/ro/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ro/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Setări generale",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Nume cont",
         "PLACEHOLDER": "Numele contului tău",
diff --git a/app/javascript/dashboard/i18n/locale/ru/generalSettings.json b/app/javascript/dashboard/i18n/locale/ru/generalSettings.json
index 050a92f9d..769be36d7 100644
--- a/app/javascript/dashboard/i18n/locale/ru/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ru/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Общие настройки",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Имя аккаунта",
         "PLACEHOLDER": "Имя вашего аккаунта",
diff --git a/app/javascript/dashboard/i18n/locale/sk/generalSettings.json b/app/javascript/dashboard/i18n/locale/sk/generalSettings.json
index 223a4688e..474176d34 100644
--- a/app/javascript/dashboard/i18n/locale/sk/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sk/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "General settings",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Account name",
         "PLACEHOLDER": "Your account name",
diff --git a/app/javascript/dashboard/i18n/locale/sv/generalSettings.json b/app/javascript/dashboard/i18n/locale/sv/generalSettings.json
index 8e1cdab68..429c9c62d 100644
--- a/app/javascript/dashboard/i18n/locale/sv/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/sv/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Allmänna inställningar",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Kontonamn",
         "PLACEHOLDER": "Ditt kontonamn",
diff --git a/app/javascript/dashboard/i18n/locale/ta/generalSettings.json b/app/javascript/dashboard/i18n/locale/ta/generalSettings.json
index b95b00a86..b411201e7 100644
--- a/app/javascript/dashboard/i18n/locale/ta/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/ta/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "பொது அமைப்புகள்",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "கணக்கின் பெயர்",
         "PLACEHOLDER": "உங்கள் கணக்கின் பெயர்",
diff --git a/app/javascript/dashboard/i18n/locale/th/generalSettings.json b/app/javascript/dashboard/i18n/locale/th/generalSettings.json
index 21de7034e..4ed96ffc6 100644
--- a/app/javascript/dashboard/i18n/locale/th/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/th/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "ตั้งค่าทั่วไป",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "ชื่อบัญชี",
         "PLACEHOLDER": "ชื่อบัญชีของคุณ",
diff --git a/app/javascript/dashboard/i18n/locale/tr/generalSettings.json b/app/javascript/dashboard/i18n/locale/tr/generalSettings.json
index 39b5008b1..67e6226ab 100644
--- a/app/javascript/dashboard/i18n/locale/tr/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/tr/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Genel Ayarlar",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Hesap adı",
         "PLACEHOLDER": "Hesap adınız",
diff --git a/app/javascript/dashboard/i18n/locale/uk/generalSettings.json b/app/javascript/dashboard/i18n/locale/uk/generalSettings.json
index 4c41f74f7..59f6e114e 100644
--- a/app/javascript/dashboard/i18n/locale/uk/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/uk/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Загальні налаштування",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Назва облікового запису",
         "PLACEHOLDER": "Ім'я вашого облікового запису",
diff --git a/app/javascript/dashboard/i18n/locale/vi/generalSettings.json b/app/javascript/dashboard/i18n/locale/vi/generalSettings.json
index 36b348c34..e47568696 100644
--- a/app/javascript/dashboard/i18n/locale/vi/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/vi/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "Cài đặt chung",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "Tên tài khoản",
         "PLACEHOLDER": "Tên tài khoản của bạn",
diff --git a/app/javascript/dashboard/i18n/locale/zh/generalSettings.json b/app/javascript/dashboard/i18n/locale/zh/generalSettings.json
index bef55da23..a1333ebe4 100644
--- a/app/javascript/dashboard/i18n/locale/zh/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/zh/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "常规设置",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "帐户名称",
         "PLACEHOLDER": "您的帐户名称",
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/generalSettings.json b/app/javascript/dashboard/i18n/locale/zh_CN/generalSettings.json
index 522ba6e8a..3a3176c75 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "常规设置",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "帐户名称",
         "PLACEHOLDER": "您的帐户名称",
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/generalSettings.json b/app/javascript/dashboard/i18n/locale/zh_TW/generalSettings.json
index 0e384c381..8c347ec53 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/generalSettings.json
@@ -13,6 +13,10 @@
         "TITLE": "常規設定",
         "NOTE": ""
       },
+      "ACCOUNT_ID": {
+        "TITLE": "Account ID",
+        "NOTE": "This ID is required if you are building an API based integration"
+      },
       "NAME": {
         "LABEL": "帳戶名稱",
         "PLACEHOLDER": "您的帳戶名稱",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
index 3e837b77e..08c57a0c4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
@@ -78,6 +78,20 @@
           </label>
         </div>
       </div>
+
+      <div class="profile--settings--row row">
+        <div class="columns small-3">
+          <h4 class="block-title">
+            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
+          </h4>
+          <p>
+            {{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.NOTE') }}
+          </p>
+        </div>
+        <div class="columns small-9 medium-5">
+          <woot-code :script="getAccountId"></woot-code>
+        </div>
+      </div>
       <div class="current-version">
         <div>{{ `v${globalConfig.appVersion}` }}</div>
         <div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
@@ -167,6 +181,10 @@ export default {
     featureCustomDomainEmailEnabled() {
       return this.featureInboundEmailEnabled && !!this.customEmailDomainEnabled;
     },
+
+    getAccountId() {
+      return this.id.toString();
+    },
   },
   mounted() {
     if (!this.id) {

From a4ee8ee239b87183ee6d090f6028130fabd0f7f7 Mon Sep 17 00:00:00 2001
From: Shivam Chahar <chahar.shivam@yahoo.com>
Date: Sat, 27 Nov 2021 09:26:18 +0530
Subject: [PATCH 35/69] Chore: Improve conversation auto resolution (#3405)

Fixes: #1583
---
 .../conversations_resolution_scheduler_job.rb |  9 +++++
 app/jobs/auto_resolve_conversations_job.rb    | 16 ---------
 app/jobs/conversations/resolution_job.rb      |  8 +++++
 app/jobs/trigger_scheduled_items_job.rb       |  3 ++
 .../concerns/activity_message_handler.rb      |  1 -
 app/models/conversation.rb                    | 15 ++++----
 ...ersations_resolution_scheduler_job_spec.rb | 18 ++++++++++
 .../auto_resolve_conversations_job_spec.rb    | 34 -------------------
 .../jobs/conversations/resolution_job_spec.rb | 26 ++++++++++++++
 spec/jobs/trigger_scheduled_items_job_spec.rb |  5 +++
 spec/models/conversation_spec.rb              | 25 --------------
 11 files changed, 75 insertions(+), 85 deletions(-)
 create mode 100644 app/jobs/account/conversations_resolution_scheduler_job.rb
 delete mode 100644 app/jobs/auto_resolve_conversations_job.rb
 create mode 100644 app/jobs/conversations/resolution_job.rb
 create mode 100644 spec/jobs/account/conversations_resolution_scheduler_job_spec.rb
 delete mode 100644 spec/jobs/auto_resolve_conversations_job_spec.rb
 create mode 100644 spec/jobs/conversations/resolution_job_spec.rb

diff --git a/app/jobs/account/conversations_resolution_scheduler_job.rb b/app/jobs/account/conversations_resolution_scheduler_job.rb
new file mode 100644
index 000000000..d98604c27
--- /dev/null
+++ b/app/jobs/account/conversations_resolution_scheduler_job.rb
@@ -0,0 +1,9 @@
+class Account::ConversationsResolutionSchedulerJob < ApplicationJob
+  queue_as :scheduled_jobs
+
+  def perform
+    Account.where.not(auto_resolve_duration: nil).all.each do |account|
+      Conversations::ResolutionJob.perform_later(account: account)
+    end
+  end
+end
diff --git a/app/jobs/auto_resolve_conversations_job.rb b/app/jobs/auto_resolve_conversations_job.rb
deleted file mode 100644
index 08db549da..000000000
--- a/app/jobs/auto_resolve_conversations_job.rb
+++ /dev/null
@@ -1,16 +0,0 @@
-class AutoResolveConversationsJob < ApplicationJob
-  queue_as :medium
-
-  def perform(conversation_id)
-    conversation = Conversation.find_by(id: conversation_id)
-    return unless conversation&.auto_resolve_duration && conversation&.open?
-
-    time_since_last_activity = Time.zone.now.to_i - conversation.last_activity_at.to_i
-    time_left_to_auto_resolve = conversation.auto_resolve_duration.days.to_i - time_since_last_activity
-    if time_left_to_auto_resolve.positive?
-      AutoResolveConversationsJob.set(wait_until: time_left_to_auto_resolve.seconds.from_now).perform_later(conversation_id)
-    else
-      conversation.toggle_status
-    end
-  end
-end
diff --git a/app/jobs/conversations/resolution_job.rb b/app/jobs/conversations/resolution_job.rb
new file mode 100644
index 000000000..957c8bace
--- /dev/null
+++ b/app/jobs/conversations/resolution_job.rb
@@ -0,0 +1,8 @@
+class Conversations::ResolutionJob < ApplicationJob
+  queue_as :medium
+
+  def perform(account:)
+    resolvable_conversations = account.conversations.resolvable(account.auto_resolve_duration)
+    resolvable_conversations.each(&:toggle_status)
+  end
+end
diff --git a/app/jobs/trigger_scheduled_items_job.rb b/app/jobs/trigger_scheduled_items_job.rb
index 16094dc4a..5d1b89727 100644
--- a/app/jobs/trigger_scheduled_items_job.rb
+++ b/app/jobs/trigger_scheduled_items_job.rb
@@ -9,5 +9,8 @@ class TriggerScheduledItemsJob < ApplicationJob
 
     # Job to reopen snoozed conversations
     Conversations::ReopenSnoozedConversationsJob.perform_later
+
+    # Job to auto-resolve conversations
+    Account::ConversationsResolutionSchedulerJob.perform_later
   end
 end
diff --git a/app/models/concerns/activity_message_handler.rb b/app/models/concerns/activity_message_handler.rb
index 80ccae38a..90eb2f52d 100644
--- a/app/models/concerns/activity_message_handler.rb
+++ b/app/models/concerns/activity_message_handler.rb
@@ -11,7 +11,6 @@ module ActivityMessageHandler
 
   def status_change_activity(user_name)
     create_status_change_message(user_name)
-    queue_conversation_auto_resolution_job if open?
   end
 
   def activity_message_params(content)
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index c5cd30629..1e5945431 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -57,6 +57,11 @@ class Conversation < ApplicationRecord
   scope :unassigned, -> { where(assignee_id: nil) }
   scope :assigned, -> { where.not(assignee_id: nil) }
   scope :assigned_to, ->(agent) { where(assignee_id: agent.id) }
+  scope :resolvable, lambda { |auto_resolve_duration|
+    return [] if auto_resolve_duration.to_i.zero?
+
+    open.where('last_activity_at < ? ', Time.now.utc - auto_resolve_duration.days)
+  }
 
   belongs_to :account
   belongs_to :inbox
@@ -74,7 +79,7 @@ class Conversation < ApplicationRecord
   before_create :mark_conversation_pending_if_bot
 
   after_update_commit :execute_after_update_commit_callbacks
-  after_create_commit :notify_conversation_creation, :queue_conversation_auto_resolution_job
+  after_create_commit :notify_conversation_creation
   after_commit :set_display_id, unless: :display_id?
 
   delegate :auto_resolve_duration, to: :account
@@ -175,14 +180,6 @@ class Conversation < ApplicationRecord
     dispatcher_dispatch(CONVERSATION_CREATED)
   end
 
-  def queue_conversation_auto_resolution_job
-    # FIXME: Move this to one cronjob that iterates over accounts and enqueue resolution jobs
-    # Similar to how we handle campaigns
-    return unless auto_resolve_duration
-
-    AutoResolveConversationsJob.set(wait_until: (last_activity_at || created_at) + auto_resolve_duration.days).perform_later(id)
-  end
-
   def self_assign?(assignee_id)
     assignee_id.present? && Current.user&.id == assignee_id
   end
diff --git a/spec/jobs/account/conversations_resolution_scheduler_job_spec.rb b/spec/jobs/account/conversations_resolution_scheduler_job_spec.rb
new file mode 100644
index 000000000..78baae779
--- /dev/null
+++ b/spec/jobs/account/conversations_resolution_scheduler_job_spec.rb
@@ -0,0 +1,18 @@
+require 'rails_helper'
+
+RSpec.describe Account::ConversationsResolutionSchedulerJob, type: :job do
+  subject(:job) { described_class.perform_later }
+
+  let!(:account) { create(:account) }
+
+  it 'enqueues the job' do
+    expect { job }.to have_enqueued_job(described_class)
+      .on_queue('scheduled_jobs')
+  end
+
+  it 'enqueues Conversations::ResolutionJob' do
+    account.update(auto_resolve_duration: 10)
+    expect(Conversations::ResolutionJob).to receive(:perform_later).with(account: account).once
+    described_class.perform_now
+  end
+end
diff --git a/spec/jobs/auto_resolve_conversations_job_spec.rb b/spec/jobs/auto_resolve_conversations_job_spec.rb
deleted file mode 100644
index 9ecea3b42..000000000
--- a/spec/jobs/auto_resolve_conversations_job_spec.rb
+++ /dev/null
@@ -1,34 +0,0 @@
-require 'rails_helper'
-
-RSpec.describe AutoResolveConversationsJob, type: :job do
-  subject(:job) { described_class.perform_later(conversation.id) }
-
-  let!(:account) { create(:account) }
-  let!(:conversation) { create(:conversation, account: account) }
-
-  it 'queues the job' do
-    expect { job }.to have_enqueued_job(described_class)
-      .with(conversation.id)
-      .on_queue('medium')
-  end
-
-  it 'does nothing when there is no auto resolve duration' do
-    described_class.perform_now(conversation.id)
-    expect(conversation.reload.status).to eq('open')
-  end
-
-  it 're-queues the job if there is still time left to allow inactivity' do
-    account.update(auto_resolve_duration: 10)
-    conversation.update(last_activity_at: 3.days.ago)
-    expect { described_class.perform_now(conversation.id) }.to have_enqueued_job(described_class)
-      .with(conversation.id)
-      .on_queue('medium')
-  end
-
-  it 'resolves the issue if time of inactivity is more than the auto resolve duration' do
-    account.update(auto_resolve_duration: 10)
-    conversation.update(last_activity_at: 13.days.ago)
-    described_class.perform_now(conversation.id)
-    expect(conversation.reload.status).to eq('resolved')
-  end
-end
diff --git a/spec/jobs/conversations/resolution_job_spec.rb b/spec/jobs/conversations/resolution_job_spec.rb
new file mode 100644
index 000000000..0482f8bbf
--- /dev/null
+++ b/spec/jobs/conversations/resolution_job_spec.rb
@@ -0,0 +1,26 @@
+require 'rails_helper'
+
+RSpec.describe Conversations::ResolutionJob, type: :job do
+  subject(:job) { described_class.perform_later(account) }
+
+  let!(:account) { create(:account) }
+  let!(:conversation) { create(:conversation, account: account) }
+
+  it 'enqueues the job' do
+    expect { job }.to have_enqueued_job(described_class)
+      .with(account)
+      .on_queue('medium')
+  end
+
+  it 'does nothing when there is no auto resolve duration' do
+    described_class.perform_now(account: account)
+    expect(conversation.reload.status).to eq('open')
+  end
+
+  it 'resolves the issue if time of inactivity is more than the auto resolve duration' do
+    account.update(auto_resolve_duration: 10)
+    conversation.update(last_activity_at: 13.days.ago)
+    described_class.perform_now(account: account)
+    expect(conversation.reload.status).to eq('resolved')
+  end
+end
diff --git a/spec/jobs/trigger_scheduled_items_job_spec.rb b/spec/jobs/trigger_scheduled_items_job_spec.rb
index a7c3cffef..f94371e8b 100644
--- a/spec/jobs/trigger_scheduled_items_job_spec.rb
+++ b/spec/jobs/trigger_scheduled_items_job_spec.rb
@@ -25,5 +25,10 @@ RSpec.describe TriggerScheduledItemsJob, type: :job do
       expect(Conversations::ReopenSnoozedConversationsJob).to receive(:perform_later).once
       described_class.perform_now
     end
+
+    it 'triggers Account::ConversationsResolutionSchedulerJob' do
+      expect(Account::ConversationsResolutionSchedulerJob).to receive(:perform_later).once
+      described_class.perform_now
+    end
   end
 end
diff --git a/spec/models/conversation_spec.rb b/spec/models/conversation_spec.rb
index 6fa916e54..c305909da 100644
--- a/spec/models/conversation_spec.rb
+++ b/spec/models/conversation_spec.rb
@@ -56,19 +56,6 @@ RSpec.describe Conversation, type: :model do
       expect(Rails.configuration.dispatcher).to have_received(:dispatch)
         .with(described_class::CONVERSATION_CREATED, kind_of(Time), conversation: conversation)
     end
-
-    it 'queues AutoResolveConversationsJob post creation if auto resolve duration present' do
-      account.update(auto_resolve_duration: 30)
-      expect do
-        create(
-          :conversation,
-          account: account,
-          contact: create(:contact, account: account),
-          inbox: inbox,
-          assignee: nil
-        )
-      end.to have_enqueued_job(AutoResolveConversationsJob)
-    end
   end
 
   describe '.after_update' do
@@ -138,18 +125,6 @@ RSpec.describe Conversation, type: :model do
         .with(conversation2, { account_id: conversation2.account_id, inbox_id: conversation2.inbox_id, message_type: :activity,
                                content: system_resolved_message })
     end
-
-    it 'does not trigger AutoResolutionJob if conversation reopened and account does not have auto resolve duration' do
-      expect { conversation.update(status: :open) }
-        .not_to have_enqueued_job(AutoResolveConversationsJob).with(conversation.id)
-    end
-
-    it 'does trigger AutoResolutionJob if conversation reopened and account has auto resolve duration' do
-      account.update(auto_resolve_duration: 40)
-      conversation.resolved!
-      conversation.reload.update(status: :open)
-      expect(AutoResolveConversationsJob).to have_been_enqueued.with(conversation.id)
-    end
   end
 
   describe '#update_labels' do

From 6a98a812e70cd76ad4ee1e9ca33af98ec4b7b3e9 Mon Sep 17 00:00:00 2001
From: Akhil G Krishnan <akhilgkrishnan4u@gmail.com>
Date: Sat, 27 Nov 2021 09:46:12 +0530
Subject: [PATCH 36/69] Fix: Outgoing email sender header translation issue
 (#3393)

Outgoing email-sender header translation fix for "from"

Fixes #3380
---
 app/mailers/conversation_reply_mailer.rb | 9 ++++++---
 config/locales/en.yml                    | 4 ++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/mailers/conversation_reply_mailer.rb b/app/mailers/conversation_reply_mailer.rb
index 333eb01fe..2e6e4bf67 100644
--- a/app/mailers/conversation_reply_mailer.rb
+++ b/app/mailers/conversation_reply_mailer.rb
@@ -98,7 +98,8 @@ class ConversationReplyMailer < ApplicationMailer
 
   def reply_email
     if should_use_conversation_email_address?
-      "#{assignee_name} from #{@inbox.name} <reply+#{@conversation.uuid}@#{@account.inbound_email_domain}>"
+      I18n.t('conversations.reply.email.header.reply_with_name', assignee_name: assignee_name, inbox_name: @inbox.name,
+                                                                 reply_email: "#{@conversation.uuid}@#{@account.inbound_email_domain}")
     else
       @inbox.email_address || @agent&.email
     end
@@ -106,9 +107,11 @@ class ConversationReplyMailer < ApplicationMailer
 
   def from_email_with_name
     if should_use_conversation_email_address?
-      "#{assignee_name} from #{@inbox.name} <#{parse_email(@account.support_email)}>"
+      I18n.t('conversations.reply.email.header.from_with_name', assignee_name: assignee_name, inbox_name: @inbox.name,
+                                                                from_email: parse_email(@account.support_email))
     else
-      "#{assignee_name} from #{@inbox.name} <#{parse_email(inbox_from_email_address)}>"
+      I18n.t('conversations.reply.email.header.from_with_name', assignee_name: assignee_name, inbox_name: @inbox.name,
+                                                                from_email: parse_email(inbox_from_email_address))
     end
   end
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 12cb8ce0f..0804fbcd9 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -93,6 +93,10 @@ en:
       email_input_box_message_body: "Get notified by email"
       csat_input_message_body: "Please rate the conversation"
     reply:
+      email:
+        header:
+          from_with_name: '%{assignee_name} from %{inbox_name} <%{from_email}>'
+          reply_with_name: '%{assignee_name} from %{inbox_name} <reply+%{reply_email}>'
       email_subject: "New messages on this conversation"
       transcript_subject: "Conversation Transcript"
     survey:

From bfcde9b02257f1ba4a355ebf152204446678a53d Mon Sep 17 00:00:00 2001
From: Shivam Chahar <chahar.shivam@yahoo.com>
Date: Sat, 27 Nov 2021 15:38:27 +0530
Subject: [PATCH 37/69] chore: Conversation history in email notifications
 (#3414)

Display recent messages in the notification email when a new conversation is created.

Fixes: #2041
---
 app/drops/conversation_drop.rb                | 15 +++++++++-
 app/drops/inbox_drop.rb                       |  3 ++
 .../conversation_creation.liquid              | 30 ++++++++++++++++---
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/app/drops/conversation_drop.rb b/app/drops/conversation_drop.rb
index 1758c29c5..b24586c30 100644
--- a/app/drops/conversation_drop.rb
+++ b/app/drops/conversation_drop.rb
@@ -5,13 +5,26 @@ class ConversationDrop < BaseDrop
     @obj.try(:display_id)
   end
 
+  def contact_name
+    @obj.try(:contact).name.capitalize || 'Customer'
+  end
+
   def recent_messages
     @obj.try(:recent_messages).map do |message|
       {
-        'sender' => message.sender&.available_name || message.sender&.name,
+        'sender' => message_sender_name(message.sender),
         'content' => transform_user_mention_content(message.content),
         'attachments' => message.attachments.map(&:file_url)
       }
     end
   end
+
+  private
+
+  def message_sender_name(sender)
+    return 'Bot' if sender.blank?
+    return contact_name if sender.instance_of?(Contact)
+
+    sender&.available_name || sender&.name
+  end
 end
diff --git a/app/drops/inbox_drop.rb b/app/drops/inbox_drop.rb
index 7972e7325..563916d5f 100644
--- a/app/drops/inbox_drop.rb
+++ b/app/drops/inbox_drop.rb
@@ -1,2 +1,5 @@
 class InboxDrop < BaseDrop
+  def name
+    @obj.try(:name)
+  end
 end
diff --git a/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_creation.liquid b/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_creation.liquid
index e324dd9e6..095e1bd7b 100644
--- a/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_creation.liquid
+++ b/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_creation.liquid
@@ -1,8 +1,30 @@
 <p>Hi {{user.available_name}}</p>
 
-
-<p>Time to save the world. A new conversation has been created in {{ inbox.name }}</p>
-
 <p>
-Click <a href="{{ action_url }}">here</a> to get cracking.
+  A new conversation (<a href="{{ action_url }}">#{{conversation.display_id}}</a>) has been created in {{ inbox.name }}.
+  <strong>{{ conversation.contact_name }}</strong> wrote:
 </p>
+
+{% for chat_message in conversation.recent_messages %}
+  <div>
+    {% if chat_message.sender == user.available_name %}
+      <h4 style="margin: 0;">You</h4>
+    {% else %}
+      <h4 style="margin: 0;">{{chat_message.sender}}</h4>
+    {% endif %}
+  </div>
+
+  <div>
+    <p style="padding: 10px 20px; margin: 5px 0 20px 0; background: #F2F3F7; border-radius: 10px; display: inline-block; font-family: "Helvetica Neue",Tahoma,Arial,sans-serif; text-align: start; unicode-bidi: plaintext;">
+      {% if chat_message.content %}
+        {{chat_message.content}}
+      {% endif %}
+
+      {% if chat_message.attachments %}
+        {% for attachment in chat_message.attachments %}
+          Attachment [<a href="{{ attachment }}" _target="blank">Click here to view</a>]
+        {% endfor %}
+      {% endif %}
+    </p>
+  </div>
+{% endfor %}

From 86dfdfb9ab279f57a2adf7cd7d0977377684ecd8 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Sat, 27 Nov 2021 17:08:40 +0530
Subject: [PATCH 38/69] chore: fix scheduled jobs (#3473)

- fixes the duplicate schedule job key
---
 config/schedule.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/schedule.yml b/config/schedule.yml
index 971ee85fd..a462c4479 100644
--- a/config/schedule.yml
+++ b/config/schedule.yml
@@ -14,7 +14,7 @@ trigger_scheduled_items_job:
   queue: scheduled_jobs
 
 # executed At every minute.
-trigger_scheduled_items_job:
+trigger_imap_email_inboxes_job:
   cron: '*/1 * * * *'
   class: 'Inboxes::FetchImapEmailInboxesJob'
   queue: scheduled_jobs

From 0899f62912cc9810ad5ea8bd181e4a63714144a3 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Mon, 29 Nov 2021 21:15:36 -0800
Subject: [PATCH 39/69] fix: Use bus.$off to remove listeners on destroy
 (#3478)

---
 .../v1/accounts/conversations_controller.rb   |  7 +++---
 .../dashboard/components/SidemenuIcon.vue     |  4 +++-
 .../components/SnackbarContainer.vue          | 16 ++++++++-----
 .../widgets/conversation/MessagesView.vue     | 24 ++++++++++++-------
 .../widgets/conversation/ReplyBox.vue         |  3 ++-
 .../dashboard/routes/dashboard/Dashboard.vue  |  9 ++++---
 .../conversation/ConversationView.vue         |  3 ++-
 app/javascript/shared/constants/busEvents.js  |  2 ++
 8 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/app/controllers/api/v1/accounts/conversations_controller.rb b/app/controllers/api/v1/accounts/conversations_controller.rb
index 2d91e1cbd..22eee629e 100644
--- a/app/controllers/api/v1/accounts/conversations_controller.rb
+++ b/app/controllers/api/v1/accounts/conversations_controller.rb
@@ -74,9 +74,10 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def update_last_seen
-    @conversation.agent_last_seen_at = DateTime.now.utc
-    @conversation.assignee_last_seen_at = DateTime.now.utc if assignee?
-    @conversation.save!
+    # rubocop:disable Rails/SkipsModelValidations
+    @conversation.update_column(:agent_last_seen_at, DateTime.now.utc)
+    @conversation.update_column(:assignee_last_seen_at, DateTime.now.utc) if assignee?
+    # rubocop:enable Rails/SkipsModelValidations
   end
 
   def custom_attributes
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
index f17a1c865..89668449a 100644
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -3,10 +3,12 @@
 </template>
 
 <script>
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
 export default {
   methods: {
     onMenuItemClick() {
-      bus.$emit('sidemenu_icon_click');
+      bus.$emit(BUS_EVENTS.TOGGLE_SIDEMENU);
     },
   },
 };
diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index 8414afc7e..15123ca7a 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -29,12 +29,16 @@ export default {
   },
 
   mounted() {
-    bus.$on('newToastMessage', message => {
-      this.snackMessages.push({ key: new Date().getTime(), message });
-      window.setTimeout(() => {
-        this.snackMessages.splice(0, 1);
-      }, this.duration);
-    });
+    bus.$on('newToastMessage', this.onNewToastMessage);
+  },
+  beforeDestroy() {
+    bus.$off('newToastMessage', this.onNewToastMessage);
+  },
+  onNewToastMessage(message) {
+    this.snackMessages.push({ key: new Date().getTime(), message });
+    window.setTimeout(() => {
+      this.snackMessages.splice(0, 1);
+    }, this.duration);
   },
 };
 </script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index db042b5b7..db13011ca 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -243,25 +243,31 @@ export default {
   },
 
   created() {
-    bus.$on('scrollToMessage', () => {
-      this.$nextTick(() => this.scrollToBottom());
-      this.makeMessagesRead();
-    });
-
-    bus.$on(BUS_EVENTS.SET_TWEET_REPLY, selectedTweetId => {
-      this.selectedTweetId = selectedTweetId;
-    });
+    bus.$on(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
+    bus.$on(BUS_EVENTS.SET_TWEET_REPLY, this.setSelectedTweet);
   },
 
   mounted() {
     this.addScrollListener();
   },
 
-  unmounted() {
+  beforeDestroy() {
+    this.removeBusListeners();
     this.removeScrollListener();
   },
 
   methods: {
+    removeBusListeners() {
+      bus.$off(BUS_EVENTS.SCROLL_TO_MESSAGE, this.onScrollToMessage);
+      bus.$off(BUS_EVENTS.SET_TWEET_REPLY, this.setSelectedTweet);
+    },
+    setSelectedTweet(tweetId) {
+      this.selectedTweetId = tweetId;
+    },
+    onScrollToMessage() {
+      this.$nextTick(() => this.scrollToBottom());
+      this.makeMessagesRead();
+    },
     showPopoutReplyBox() {
       this.isPopoutReplyBox = !this.isPopoutReplyBox;
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index d6f5e1c0c..952b81bbc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -93,6 +93,7 @@ import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/cons
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 import {
   isEscape,
@@ -368,7 +369,7 @@ export default {
         this.clearMessage();
         try {
           await this.$store.dispatch('sendMessage', messagePayload);
-          this.$emit('scrollToMessage');
+          this.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
         } catch (error) {
           const errorMessage =
             error?.response?.data?.error ||
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 123863eb7..7bb0bd847 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -11,6 +11,7 @@
 <script>
 import Sidebar from '../../components/layout/Sidebar';
 import CommandBar from './commands/commandbar.vue';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   components: {
@@ -50,11 +51,10 @@ export default {
     this.$store.dispatch('setCurrentAccountId', this.$route.params.accountId);
     window.addEventListener('resize', this.handleResize);
     this.handleResize();
-    bus.$on('sidemenu_icon_click', () => {
-      this.isSidebarOpen = !this.isSidebarOpen;
-    });
+    bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
   beforeDestroy() {
+    bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
     window.removeEventListener('resize', this.handleResize);
   },
   methods: {
@@ -65,6 +65,9 @@ export default {
         this.isOnDesktop = false;
       }
     },
+    toggleSidebar() {
+      this.isSidebarOpen = !this.isSidebarOpen;
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index f66ef9587..e81b29c1c 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -23,6 +23,7 @@ import ChatList from '../../../components/ChatList';
 import ConversationBox from '../../../components/widgets/conversation/ConversationBox';
 import PopOverSearch from './search/PopOverSearch';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 export default {
   components: {
@@ -108,7 +109,7 @@ export default {
           return;
         }
         this.$store.dispatch('setActiveChat', chat).then(() => {
-          bus.$emit('scrollToMessage');
+          bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
         });
       } else {
         this.$store.dispatch('clearSelectedState');
diff --git a/app/javascript/shared/constants/busEvents.js b/app/javascript/shared/constants/busEvents.js
index 0c496818f..380fcbe5a 100644
--- a/app/javascript/shared/constants/busEvents.js
+++ b/app/javascript/shared/constants/busEvents.js
@@ -3,4 +3,6 @@ export const BUS_EVENTS = {
   SHOW_ALERT: 'SHOW_ALERT',
   START_NEW_CONVERSATION: 'START_NEW_CONVERSATION',
   FOCUS_CUSTOM_ATTRIBUTE: 'FOCUS_CUSTOM_ATTRIBUTE',
+  SCROLL_TO_MESSAGE: 'SCROLL_TO_MESSAGE',
+  TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
 };

From d5c30760a793e8193e8205605af6a8155dafb0db Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 30 Nov 2021 20:50:35 +0530
Subject: [PATCH 40/69] chore: Whatsapp templates fix for 360 dialog (#3479)

Fixes: #3426
---
 app/builders/contact_inbox_builder.rb         | 10 ++-
 app/models/channel/whatsapp.rb                | 75 ++++++++++++++++---
 .../whatsapp/send_on_whatsapp_service.rb      | 67 ++++++++++++++++-
 ...20040_add_templates_to_whatsapp_channel.rb | 15 ++++
 db/schema.rb                                  |  4 +-
 spec/factories/channel/channel_whatsapp.rb    | 21 ++++++
 .../whatsapp/send_on_whatsapp_service_spec.rb | 40 +++++++++-
 7 files changed, 215 insertions(+), 17 deletions(-)
 create mode 100644 db/migrate/20211129120040_add_templates_to_whatsapp_channel.rb

diff --git a/app/builders/contact_inbox_builder.rb b/app/builders/contact_inbox_builder.rb
index 73380190d..8ee1b3fec 100644
--- a/app/builders/contact_inbox_builder.rb
+++ b/app/builders/contact_inbox_builder.rb
@@ -4,7 +4,7 @@ class ContactInboxBuilder
   def perform
     @contact = Contact.find(contact_id)
     @inbox = @contact.account.inboxes.find(inbox_id)
-    return unless ['Channel::TwilioSms', 'Channel::Email', 'Channel::Api'].include? @inbox.channel_type
+    return unless ['Channel::TwilioSms', 'Channel::Email', 'Channel::Api', 'Channel::Whatsapp'].include? @inbox.channel_type
 
     source_id = @source_id || generate_source_id
     create_contact_inbox(source_id) if source_id.present?
@@ -14,12 +14,20 @@ class ContactInboxBuilder
 
   def generate_source_id
     return twilio_source_id if @inbox.channel_type == 'Channel::TwilioSms'
+    return wa_source_id if @inbox.channel_type == 'Channel::Whatsapp'
     return @contact.email if @inbox.channel_type == 'Channel::Email'
     return SecureRandom.uuid if @inbox.channel_type == 'Channel::Api'
 
     nil
   end
 
+  def wa_source_id
+    return unless @contact.phone_number
+
+    # whatsapp doesn't want the + in e164 format
+    "#{@contact.phone_number}.delete('+')"
+  end
+
   def twilio_source_id
     return unless @contact.phone_number
 
diff --git a/app/models/channel/whatsapp.rb b/app/models/channel/whatsapp.rb
index ab76e3ce1..3642fac16 100644
--- a/app/models/channel/whatsapp.rb
+++ b/app/models/channel/whatsapp.rb
@@ -2,13 +2,15 @@
 #
 # Table name: channel_whatsapp
 #
-#  id              :bigint           not null, primary key
-#  phone_number    :string           not null
-#  provider        :string           default("default")
-#  provider_config :jsonb
-#  created_at      :datetime         not null
-#  updated_at      :datetime         not null
-#  account_id      :integer          not null
+#  id                             :bigint           not null, primary key
+#  message_templates              :jsonb
+#  message_templates_last_updated :datetime
+#  phone_number                   :string           not null
+#  provider                       :string           default("default")
+#  provider_config                :jsonb
+#  created_at                     :datetime         not null
+#  updated_at                     :datetime         not null
+#  account_id                     :integer          not null
 #
 # Indexes
 #
@@ -43,6 +45,10 @@ class Channel::Whatsapp < ApplicationRecord
     end
   end
 
+  def send_template(phone_number, template_info)
+    send_template_message(phone_number, template_info)
+  end
+
   def media_url(media_id)
     "#{api_base_path}/media/#{media_id}"
   end
@@ -55,27 +61,34 @@ class Channel::Whatsapp < ApplicationRecord
     true
   end
 
+  def message_templates
+    sync_templates
+    super
+  end
+
   private
 
   def send_text_message(phone_number, message)
-    HTTParty.post(
+    response = HTTParty.post(
       "#{api_base_path}/messages",
-      headers: { 'D360-API-KEY': provider_config['api_key'], 'Content-Type': 'application/json' },
+      headers: api_headers,
       body: {
         to: phone_number,
         text: { body: message.content },
         type: 'text'
       }.to_json
     )
+
+    response.success? ? response['messages'].first['id'] : nil
   end
 
   def send_attachment_message(phone_number, message)
     attachment = message.attachments.first
     type = %w[image audio video].include?(attachment.file_type) ? attachment.file_type : 'document'
     attachment_url = attachment.file_url
-    HTTParty.post(
+    response = HTTParty.post(
       "#{api_base_path}/messages",
-      headers: { 'D360-API-KEY': provider_config['api_key'], 'Content-Type': 'application/json' },
+      headers: api_headers,
       body: {
         'to' => phone_number,
         'type' => type,
@@ -85,6 +98,46 @@ class Channel::Whatsapp < ApplicationRecord
         }
       }.to_json
     )
+
+    response.success? ? response['messages'].first['id'] : nil
+  end
+
+  def send_template_message(phone_number, template_info)
+    response = HTTParty.post(
+      "#{api_base_path}/messages",
+      headers: api_headers,
+      body: {
+        to: phone_number,
+        template: template_body_parameters(template_info),
+        type: 'template'
+      }.to_json
+    )
+
+    response.success? ? response['messages'].first['id'] : nil
+  end
+
+  def template_body_parameters(template_info)
+    {
+      name: template_info[:name],
+      namespace: template_info[:namespace],
+      language: {
+        policy: 'deterministic',
+        code: template_info[:lang_code]
+      },
+      components: [{
+        type: 'body',
+        parameters: template_info[:parameters]
+      }]
+    }
+  end
+
+  def sync_templates
+    # to prevent too many api calls
+    last_updated = message_templates_last_updated || 1.day.ago
+    return if Time.current < (last_updated + 12.hours)
+
+    response = HTTParty.get("#{api_base_path}/configs/templates", headers: api_headers)
+    update(message_templates: response['waba_templates'], message_templates_last_updated: Time.now.utc) if response.success?
   end
 
   # Extract later into provider Service
diff --git a/app/services/whatsapp/send_on_whatsapp_service.rb b/app/services/whatsapp/send_on_whatsapp_service.rb
index 7b511cf83..4fbaa1312 100644
--- a/app/services/whatsapp/send_on_whatsapp_service.rb
+++ b/app/services/whatsapp/send_on_whatsapp_service.rb
@@ -6,6 +6,71 @@ class Whatsapp::SendOnWhatsappService < Base::SendOnChannelService
   end
 
   def perform_reply
-    channel.send_message(message.conversation.contact_inbox.source_id, message)
+    # can reply checks if 24 hour limit has passed.
+    if message.conversation.can_reply?
+      send_on_whatsapp
+    else
+      send_template_message
+    end
+  end
+
+  def send_template_message
+    name, namespace, lang_code, processed_parameters = processable_channel_message_template
+    return if name.blank?
+
+    message_id = channel.send_template(message.conversation.contact_inbox.source_id, {
+                                         name: name,
+                                         namespace: namespace,
+                                         lang_code: lang_code,
+                                         parameters: processed_parameters
+                                       })
+    message.update!(source_id: message_id) if message_id.present?
+  end
+
+  def processable_channel_message_template
+    # see if we can match the message content to a template
+    # An example template may look like "Your package has been shipped. It will be delivered in {{1}} business days.
+    # We want to iterate over these templates with our message body and see if we can fit it to any of the templates
+    # Then we use regex to parse the template varibles and convert them into the proper payload
+    channel.message_templates.each do |template|
+      match_obj = template_match_object(template)
+      next if match_obj.blank?
+
+      # we have a match, now we need to parse the template variables and convert them into the wa recommended format
+      processed_parameters = match_obj.captures.map { |x| { type: 'text', text: x } }
+
+      # no need to look up further end the search
+      return [template['name'], template['namespace'], template['language'], processed_parameters]
+    end
+    [nil, nil, nil, nil]
+  end
+
+  def template_match_object(template)
+    body_object = validated_body_object(template)
+    return if body_object.blank?
+
+    template_match_regex = build_template_match_regex(body_object['text'])
+    message.content.match(template_match_regex)
+  end
+
+  def build_template_match_regex(template_text)
+    # Converts the whatsapp template to a comparable regex string to check against the message content
+    # the variables are of the format {{num}} ex:{{1}}
+    template_match_string = "^#{template_text.gsub(/{{\d}}/, '(.*)')}$"
+    Regexp.new template_match_string
+  end
+
+  def validated_body_object(template)
+    # we don't care if its not approved template
+    return if template['status'] != 'approved'
+
+    # we only care about text body object in template. if not present we discard the template
+    # we don't support other forms of templates
+    template['components'].find { |obj| obj['type'] == 'BODY' && obj.key?('text') }
+  end
+
+  def send_on_whatsapp
+    message_id = channel.send_message(message.conversation.contact_inbox.source_id, message)
+    message.update!(source_id: message_id) if message_id.present?
   end
 end
diff --git a/db/migrate/20211129120040_add_templates_to_whatsapp_channel.rb b/db/migrate/20211129120040_add_templates_to_whatsapp_channel.rb
new file mode 100644
index 000000000..247fd9095
--- /dev/null
+++ b/db/migrate/20211129120040_add_templates_to_whatsapp_channel.rb
@@ -0,0 +1,15 @@
+class AddTemplatesToWhatsappChannel < ActiveRecord::Migration[6.1]
+  def up
+    change_table :channel_whatsapp, bulk: true do |t|
+      t.column :message_templates, :jsonb, default: {}
+      t.column :message_templates_last_updated, :datetime
+    end
+  end
+
+  def down
+    change_table :channel_whatsapp, bulk: true do |t|
+      t.remove :message_templates
+      t.remove :message_templates_last_updated
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index b8ea425a8..14526629d 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2021_11_22_112607) do
+ActiveRecord::Schema.define(version: 2021_11_29_120040) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
@@ -270,6 +270,8 @@ ActiveRecord::Schema.define(version: 2021_11_22_112607) do
     t.jsonb "provider_config", default: {}
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
+    t.jsonb "message_templates", default: {}
+    t.datetime "message_templates_last_updated"
     t.index ["phone_number"], name: "index_channel_whatsapp_on_phone_number", unique: true
   end
 
diff --git a/spec/factories/channel/channel_whatsapp.rb b/spec/factories/channel/channel_whatsapp.rb
index ea8b563dc..87ded15ab 100644
--- a/spec/factories/channel/channel_whatsapp.rb
+++ b/spec/factories/channel/channel_whatsapp.rb
@@ -3,6 +3,27 @@ FactoryBot.define do
     sequence(:phone_number) { |n| "+123456789#{n}1" }
     account
     provider_config { { 'api_key' => 'test_key' } }
+    message_templates do
+      [{ 'name' => 'sample_shipping_confirmation',
+         'status' => 'approved',
+         'category' => 'SHIPPING_UPDATE',
+         'language' => 'id',
+         'namespace' => '2342384942_32423423_23423fdsdaf',
+         'components' =>
+                            [{ 'text' => 'Paket Anda sudah dikirim. Paket akan sampai dalam {{1}} hari kerja.', 'type' => 'BODY' },
+                             { 'text' => 'Pesan ini berasal dari bisnis yang tidak terverifikasi.', 'type' => 'FOOTER' }],
+         'rejected_reason' => 'NONE' },
+       { 'name' => 'sample_shipping_confirmation',
+         'status' => 'approved',
+         'category' => 'SHIPPING_UPDATE',
+         'language' => 'en_US',
+         'namespace' => '23423423_2342423_324234234_2343224',
+         'components' =>
+         [{ 'text' => 'Your package has been shipped. It will be delivered in {{1}} business days.', 'type' => 'BODY' },
+          { 'text' => 'This message is from an unverified business.', 'type' => 'FOOTER' }],
+         'rejected_reason' => 'NONE' }]
+    end
+    message_templates_last_updated { Time.now.utc }
 
     after(:create) do |channel_whatsapp|
       create(:inbox, channel: channel_whatsapp, account: channel_whatsapp.account)
diff --git a/spec/services/whatsapp/send_on_whatsapp_service_spec.rb b/spec/services/whatsapp/send_on_whatsapp_service_spec.rb
index ef2bf8e45..0dc8f6809 100644
--- a/spec/services/whatsapp/send_on_whatsapp_service_spec.rb
+++ b/spec/services/whatsapp/send_on_whatsapp_service_spec.rb
@@ -7,20 +7,54 @@ describe Whatsapp::SendOnWhatsappService do
     end
 
     context 'when a valid message' do
-      it 'calls channel.send_message' do
+      it 'calls channel.send_message when with in 24 hour limit' do
         whatsapp_request = double
         whatsapp_channel = create(:channel_whatsapp)
         contact_inbox = create(:contact_inbox, inbox: whatsapp_channel.inbox, source_id: '123456789')
         conversation = create(:conversation, contact_inbox: contact_inbox, inbox: whatsapp_channel.inbox)
+        # to handle the case of 24 hour window limit.
+        create(:message, message_type: :incoming, content: 'test',
+                         conversation: conversation)
         message = create(:message, message_type: :outgoing, content: 'test',
                                    conversation: conversation)
         allow(HTTParty).to receive(:post).and_return(whatsapp_request)
+        allow(whatsapp_request).to receive(:success?).and_return(true)
+        allow(whatsapp_request).to receive(:[]).with('messages').and_return([{ 'id' => '123456789' }])
         expect(HTTParty).to receive(:post).with(
           'https://waba.360dialog.io/v1/messages',
-          headers: { 'D360-API-KEY': 'test_key', 'Content-Type': 'application/json' },
-          body: { to: '123456789', text: { body: 'test' }, type: 'text' }.to_json
+          headers: { 'D360-API-KEY' => 'test_key', 'Content-Type' => 'application/json' },
+          body: { 'to' => '123456789', 'text' => { 'body' => 'test' }, 'type' => 'text' }.to_json
         )
         described_class.new(message: message).perform
+        expect(message.reload.source_id).to eq('123456789')
+      end
+
+      it 'calls channel.send_template when after 24 hour limit' do
+        whatsapp_request = double
+        whatsapp_channel = create(:channel_whatsapp)
+        contact_inbox = create(:contact_inbox, inbox: whatsapp_channel.inbox, source_id: '123456789')
+        conversation = create(:conversation, contact_inbox: contact_inbox, inbox: whatsapp_channel.inbox)
+        message = create(:message, message_type: :outgoing, content: 'Your package has been shipped. It will be delivered in 3 business days.',
+                                   conversation: conversation)
+        allow(HTTParty).to receive(:post).and_return(whatsapp_request)
+        allow(whatsapp_request).to receive(:success?).and_return(true)
+        allow(whatsapp_request).to receive(:[]).with('messages').and_return([{ 'id' => '123456789' }])
+        expect(HTTParty).to receive(:post).with(
+          'https://waba.360dialog.io/v1/messages',
+          headers: { 'D360-API-KEY' => 'test_key', 'Content-Type' => 'application/json' },
+          body: {
+            to: '123456789',
+            template: {
+              name: 'sample_shipping_confirmation',
+              namespace: '23423423_2342423_324234234_2343224',
+              language: { 'policy': 'deterministic', 'code': 'en_US' },
+              components: [{ 'type': 'body', 'parameters': [{ 'type': 'text', 'text': '3' }] }]
+            },
+            type: 'template'
+          }.to_json
+        )
+        described_class.new(message: message).perform
+        expect(message.reload.source_id).to eq('123456789')
       end
     end
   end

From 0115b4ddc43a546c9be5a3b495fc3dcd91d5688e Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Tue, 30 Nov 2021 21:44:30 +0530
Subject: [PATCH 41/69] chore: validation spec for schedules (#3480)

We had instances where after copy-pasting the schedule block, the dev forgets to change the schedule key,
This would break some of the scheduled jobs without explicit errors.

this PR add a spec that will prevent it from happening
---
 config/schedule.yml           |  1 +
 spec/configs/schedule_spec.rb | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 spec/configs/schedule_spec.rb

diff --git a/config/schedule.yml b/config/schedule.yml
index a462c4479..f0910ace4 100644
--- a/config/schedule.yml
+++ b/config/schedule.yml
@@ -1,5 +1,6 @@
 # https://github.com/ondrejbartas/sidekiq-cron
 # use https://crontab.guru/ to validate
+# validations for this file exist in /spec/configs/schedule_spec.rb
 
 # executed At 12:00 on every day-of-month.
 internal_check_new_versions_job:
diff --git a/spec/configs/schedule_spec.rb b/spec/configs/schedule_spec.rb
new file mode 100644
index 000000000..78d0c4e3e
--- /dev/null
+++ b/spec/configs/schedule_spec.rb
@@ -0,0 +1,24 @@
+## we had instances where after copy pasting the schedule block,
+## the dev forgets to changes the schedule key,
+## this would break some of the scheduled jobs with out explicit errors
+require 'rails_helper'
+
+RSpec.context 'with valid schedule.yml' do
+  it 'does not have duplicates' do
+    file = Rails.root.join('config/schedule.yml')
+    schedule_keys = []
+    invalid_line_starts = [' ', '#', "\n"]
+    # couldn't figure out a proper solution with yaml.parse
+    # so the rudementary solution is to read the file and parse it
+    # check for duplicates in the array
+    File.open(file).each do |f|
+      f.each_line do |line|
+        next if invalid_line_starts.include?(line[0])
+
+        schedule_keys << line.split(':')[0]
+      end
+    end
+    # ensure that no duplicates exist
+    assert_equal schedule_keys.uniq.count, schedule_keys.count
+  end
+end

From 98be3b33c13636419b071b7cc3918c95a3732f12 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 30 Nov 2021 10:57:44 -0800
Subject: [PATCH 42/69] fix: Update missing method onNewToastMessage (#3481)

---
 .../dashboard/components/SnackbarContainer.vue       | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/components/SnackbarContainer.vue b/app/javascript/dashboard/components/SnackbarContainer.vue
index 15123ca7a..3ab3d67fc 100644
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -34,11 +34,13 @@ export default {
   beforeDestroy() {
     bus.$off('newToastMessage', this.onNewToastMessage);
   },
-  onNewToastMessage(message) {
-    this.snackMessages.push({ key: new Date().getTime(), message });
-    window.setTimeout(() => {
-      this.snackMessages.splice(0, 1);
-    }, this.duration);
+  methods: {
+    onNewToastMessage(message) {
+      this.snackMessages.push({ key: new Date().getTime(), message });
+      window.setTimeout(() => {
+        this.snackMessages.splice(0, 1);
+      }, this.duration);
+    },
   },
 };
 </script>

From c792cfc0be499365917a7fa35414ebb57d4f071a Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Tue, 30 Nov 2021 21:03:18 -0800
Subject: [PATCH 43/69] feat: Use Fluent SVG icons on the dashboard (#3482)

---
 .../assets/scss/_utility-helpers.scss         |  4 +
 .../scss/widgets/_conversation-card.scss      |  5 --
 .../dashboard/assets/scss/widgets/_modal.scss |  2 +-
 .../assets/scss/widgets/_sidemenu.scss        | 14 +--
 .../components/Accordion/AccordionItem.vue    |  4 +-
 .../dashboard/components/ChatList.vue         |  2 +-
 .../dashboard/components/CustomAttribute.vue  |  8 +-
 app/javascript/dashboard/components/Modal.vue |  4 +-
 .../components/NetworkNotification.vue        |  2 +-
 .../dashboard/components/SidemenuIcon.vue     | 16 +++-
 .../dashboard/components/buttons/Button.vue   |  5 +-
 .../components/buttons/FormSubmitButton.vue   |  2 +-
 .../components/buttons/ResolveAction.vue      | 12 ++-
 .../dashboard/components/layout/Sidebar.vue   | 26 +++---
 .../components/layout/SidebarItem.vue         | 27 +++---
 .../sidebarComponents/AccountSelector.vue     |  8 +-
 .../sidebarComponents/AddAccountModal.vue     | 13 +--
 .../sidebarComponents/NotificationBell.vue    |  4 +-
 .../specs/AccountSelector.spec.js             |  4 +-
 .../__snapshots__/SidemenuIcon.spec.js.snap   |  9 +-
 .../dashboard/components/ui/Label.vue         | 25 +++++-
 .../dashboard/components/ui/Wizard.vue        |  2 +-
 .../dashboard/components/ui/WootButton.vue    |  5 ++
 .../components/widgets/AttachmentsPreview.vue |  9 +-
 .../components/widgets/BackButton.vue         |  6 +-
 .../components/widgets/InboxIconWithName.vue  | 38 ---------
 .../components/widgets/InboxListItem.vue      | 23 -----
 .../components/widgets/InboxName.vue          | 11 ++-
 .../components/widgets/SearchBox.vue          | 11 ---
 .../components/widgets/TableFooter.vue        | 20 +++--
 .../widgets/WootWriter/ReplyBottomPanel.vue   | 11 ++-
 .../widgets/WootWriter/ReplyTopPanel.vue      |  4 +-
 .../ConversationAdvancedFilter.vue            |  3 +-
 .../widgets/conversation/ConversationCard.vue | 69 +++++++++++----
 .../conversation/ConversationHeader.vue       |  6 +-
 .../widgets/conversation/Message.vue          |  6 +-
 .../widgets/conversation/MessagesView.vue     |  6 +-
 .../widgets/conversation/MoreActions.vue      |  6 +-
 .../widgets/conversation/bubble/Actions.vue   | 49 ++++++-----
 .../widgets/conversation/bubble/File.vue      |  2 +-
 .../widgets/conversation/bubble/Text.vue      |  8 +-
 .../conversation/components/FilterInput.vue   |  3 +-
 .../widgets/modal/WootKeyShortcutModal.vue    |  8 +-
 app/javascript/dashboard/helper/inbox.js      | 23 ++---
 .../dashboard/helper/specs/inbox.spec.js      | 16 ++--
 .../dashboard/i18n/locale/ar/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ca/chatlist.json    |  6 --
 .../dashboard/i18n/locale/cs/chatlist.json    |  6 --
 .../dashboard/i18n/locale/da/chatlist.json    |  6 --
 .../dashboard/i18n/locale/de/chatlist.json    |  6 --
 .../dashboard/i18n/locale/el/chatlist.json    |  6 --
 .../dashboard/i18n/locale/en/chatlist.json    |  6 --
 .../dashboard/i18n/locale/es/chatlist.json    |  6 --
 .../dashboard/i18n/locale/fa/chatlist.json    |  6 --
 .../dashboard/i18n/locale/fi/chatlist.json    |  6 --
 .../dashboard/i18n/locale/fr/chatlist.json    |  6 --
 .../dashboard/i18n/locale/he/chatlist.json    |  6 --
 .../dashboard/i18n/locale/hi/chatlist.json    |  6 --
 .../dashboard/i18n/locale/hu/chatlist.json    |  6 --
 .../dashboard/i18n/locale/id/chatlist.json    |  6 --
 .../dashboard/i18n/locale/it/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ja/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ko/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ml/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ne/chatlist.json    |  6 --
 .../dashboard/i18n/locale/nl/chatlist.json    |  6 --
 .../dashboard/i18n/locale/no/chatlist.json    |  6 --
 .../dashboard/i18n/locale/pl/chatlist.json    |  6 --
 .../dashboard/i18n/locale/pt/chatlist.json    |  6 --
 .../dashboard/i18n/locale/pt_BR/chatlist.json |  6 --
 .../dashboard/i18n/locale/ru/chatlist.json    |  6 --
 .../dashboard/i18n/locale/sk/chatlist.json    |  6 --
 .../dashboard/i18n/locale/sv/chatlist.json    |  6 --
 .../dashboard/i18n/locale/ta/chatlist.json    |  6 --
 .../dashboard/i18n/locale/th/chatlist.json    |  6 --
 .../dashboard/i18n/locale/tr/chatlist.json    |  6 --
 .../dashboard/i18n/locale/uk/chatlist.json    |  6 --
 .../dashboard/i18n/locale/vi/chatlist.json    |  6 --
 .../dashboard/i18n/locale/zh/chatlist.json    |  6 --
 .../dashboard/i18n/locale/zh_CN/chatlist.json |  6 --
 .../dashboard/i18n/locale/zh_TW/chatlist.json |  6 --
 .../dashboard/i18n/sidebarItems/campaigns.js  |  6 +-
 .../dashboard/i18n/sidebarItems/common.js     | 12 +--
 .../dashboard/i18n/sidebarItems/contacts.js   |  4 +-
 .../dashboard/i18n/sidebarItems/reports.js    | 14 +--
 .../dashboard/i18n/sidebarItems/settings.js   | 22 ++---
 .../mixins/specs/attributeFixtures.js         |  2 +-
 .../mixins/specs/attributeMixin.spec.js       |  2 +-
 .../contact/components/ContactAttribute.vue   |  2 +-
 .../components/ContactDropdownItem.vue        | 10 ++-
 .../contact/components/ContactFields.vue      | 14 +--
 .../contact/components/ContactIntro.vue       |  2 +-
 .../contact/components/MergeContact.vue       |  6 +-
 .../components/MessageContextMenu.vue         |  9 +-
 .../modules/notes/components/ContactNote.vue  |  3 +-
 .../contacts/components/ContactInfoPanel.vue  |  2 +-
 .../contacts/components/ContactsTable.vue     |  3 +-
 .../dashboard/contacts/components/Header.vue  |  6 +-
 .../contacts/components/ReminderItem.vue      |  2 +-
 .../dashboard/conversation/ContactPanel.vue   | 10 ++-
 .../conversation/ConversationAction.vue       |  3 +-
 .../conversation/contact/ContactInfo.vue      | 23 +++--
 .../conversation/contact/ContactInfoRow.vue   |  9 +-
 .../conversation/contact/SocialIcons.vue      |  6 +-
 .../CustomAttributeDropDown.vue               |  2 +-
 .../CustomAttributeSelector.vue               |  2 +-
 .../conversation/search/PopOverSearch.vue     |  2 +-
 .../conversation/search/ResultItem.vue        | 12 +--
 .../conversation/search/SearchMessageItem.vue | 11 ++-
 .../routes/dashboard/notifications/routes.js  |  2 +-
 .../dashboard/settings/SettingsHeader.vue     |  4 +-
 .../settings/account/account.routes.js        |  2 +-
 .../dashboard/settings/agents/EditAgent.vue   |  2 +-
 .../dashboard/settings/agents/Index.vue       |  6 +-
 .../dashboard/settings/agents/agent.routes.js |  2 +-
 .../settings/attributes/CustomAttribute.vue   |  4 +-
 .../dashboard/settings/attributes/Index.vue   |  2 +-
 .../settings/attributes/attributes.routes.js  |  2 +-
 .../dashboard/settings/automation/Index.vue   |  2 +-
 .../settings/automation/automation.routes.js  |  2 +-
 .../settings/campaigns/CampaignsTable.vue     | 10 +--
 .../dashboard/settings/campaigns/Index.vue    |  2 +-
 .../settings/campaigns/campaigns.routes.js    |  4 +-
 .../dashboard/settings/canned/Index.vue       |  6 +-
 .../settings/canned/canned.routes.js          |  2 +-
 .../routes/dashboard/settings/inbox/Index.vue |  4 +-
 .../settings/inbox/channels/Twitter.vue       |  2 +-
 .../settings/inbox/components/BusinessDay.vue |  2 +-
 .../dashboard/settings/inbox/inbox.routes.js  |  2 +-
 .../integrationapps/IntegrationHooks.vue      |  2 +-
 .../integrationapps/IntegrationItem.vue       |  2 +-
 .../MultipleIntegrationHooks.vue              |  2 +-
 .../integrationapps/integrations.routes.js    |  2 +-
 .../settings/integrations/Integration.vue     |  2 +-
 .../settings/integrations/Webhook.vue         |  6 +-
 .../integrations/integrations.routes.js       |  2 +-
 .../dashboard/settings/labels/Index.vue       |  6 +-
 .../settings/labels/labels.routes.js          |  2 +-
 .../settings/profile/profile.routes.js        |  2 +-
 .../dashboard/settings/reports/Index.vue      |  7 +-
 .../reports/components/CsatMetricCard.vue     |  9 +-
 .../reports/components/WootReports.vue        |  2 +-
 .../settings/reports/reports.routes.js        | 12 +--
 .../routes/dashboard/settings/teams/Index.vue |  4 +-
 .../dashboard/settings/teams/teams.routes.js  |  2 +-
 app/javascript/packs/application.js           |  2 +
 .../shared/components/EmojiOrIcon.vue         | 12 ++-
 .../components/FluentIcon/DashboardIcon.vue   | 35 ++++++++
 .../FluentIcon/dashboard-icons.json           | 85 +++++++++++++++++++
 .../ui/MultiselectDropdownItems.vue           |  8 +-
 .../components/ui/dropdown/AddLabel.vue       |  2 +-
 151 files changed, 613 insertions(+), 617 deletions(-)
 delete mode 100644 app/javascript/dashboard/components/widgets/InboxIconWithName.vue
 delete mode 100644 app/javascript/dashboard/components/widgets/InboxListItem.vue
 delete mode 100644 app/javascript/dashboard/components/widgets/SearchBox.vue
 create mode 100644 app/javascript/shared/components/FluentIcon/DashboardIcon.vue
 create mode 100644 app/javascript/shared/components/FluentIcon/dashboard-icons.json

diff --git a/app/javascript/dashboard/assets/scss/_utility-helpers.scss b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
index 1072a0878..7b528d1c2 100644
--- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss
+++ b/app/javascript/dashboard/assets/scss/_utility-helpers.scss
@@ -6,6 +6,10 @@
   margin-right: var(--space-smaller);
 }
 
+.margin-left-minus-slab {
+  margin-left: var(--space-minus-slab);
+}
+
 .fs-small {
   font-size: var(--font-size-small);
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
index a7a256b4d..0ad6dff38 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
@@ -85,11 +85,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 27rem;
-
-    .small-icon {
-      font-size: $font-size-mini;
-      vertical-align: top;
-    }
   }
 
   .conversation--meta {
diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
index 7a9a83845..cf48bcd6e 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
@@ -19,7 +19,7 @@
   cursor: pointer;
   font-size: $font-size-big;
   line-height: $space-normal;
-  padding: $space-normal $space-two;
+  padding: $space-normal;
   position: absolute;
   right: $space-micro;
   top: $space-micro;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
index aafff16ff..70cad65e8 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
@@ -31,6 +31,8 @@
 
       .wrap,
       .child-icon {
+        color: $color-gray;
+
         &:hover {
           color: $color-woot;
         }
@@ -62,7 +64,7 @@
 .bottom-nav {
   @include flex;
   @include space-between-column;
-  @include padding($space-one $space-normal $space-one $space-one);
+  @include padding($space-one);
   @include border-normal-top;
   flex-direction: column;
   position: relative;
@@ -111,16 +113,6 @@
   line-height: $global-lineheight;
 }
 
-.hamburger--menu {
-  cursor: pointer;
-  display: none;
-  margin-right: $space-normal;
-
-  @media screen and (max-width: 1200px) {
-    display: block;
-  }
-}
-
 .header--icon {
   display: block;
   margin-right: $space-normal;
diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index bfe817285..2bcfaffb7 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -10,8 +10,8 @@
       <div class="button-icon--wrap">
         <slot name="button" />
         <div class="chevron-icon__wrap">
-          <i v-if="isOpen" class="ion-minus chevron-icon"></i>
-          <i v-else class="ion-plus chevron-icon"></i>
+          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
+          <fluent-icon v-else size="24" icon="add" type="solid" />
         </div>
       </div>
     </button>
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 4a614cf3f..b5053a292 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -27,7 +27,7 @@ l<template>
           class="btn-filter"
           @click="onToggleAdvanceFiltersModal"
         >
-          <i class="icon ion-ios-settings-strong" />
+          <fluent-icon icon="filter" />
         </woot-button>
       </div>
     </div>
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index a1dad74c4..6182a00cd 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -23,7 +23,7 @@
             variant="link"
             size="medium"
             color-scheme="secondary"
-            icon="ion-trash-a"
+            icon="delete"
             class-names="delete-button"
             @click="onDelete"
           />
@@ -44,7 +44,7 @@
             @keyup.enter="onUpdate"
           />
           <div class="input-group-button">
-            <woot-button size="small" icon="ion-checkmark" @click="onUpdate" />
+            <woot-button size="small" icon="checkmark" @click="onUpdate" />
           </div>
         </div>
         <span v-if="shouldShowErrorMessage" class="error-message">
@@ -75,7 +75,7 @@
             variant="link"
             size="small"
             color-scheme="secondary"
-            icon="ion-clipboard"
+            icon="clipboard"
             class-names="edit-button"
             @click="onCopy"
           />
@@ -85,7 +85,7 @@
             variant="link"
             size="small"
             color-scheme="secondary"
-            icon="ion-compose"
+            icon="edit"
             class-names="edit-button"
             @click="onEdit"
           />
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 463a2aeea..f86935959 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -7,7 +7,9 @@
       @click="onBackDropClick"
     >
       <div :class="modalContainerClassName" @click.stop>
-        <i class="ion-android-close modal--close" @click="close"></i>
+        <button class="modal--close" @click="close">
+          <fluent-icon icon="dismiss" />
+        </button>
         <slot />
       </div>
     </div>
diff --git a/app/javascript/dashboard/components/NetworkNotification.vue b/app/javascript/dashboard/components/NetworkNotification.vue
index efd6b273e..980e5ee02 100644
--- a/app/javascript/dashboard/components/NetworkNotification.vue
+++ b/app/javascript/dashboard/components/NetworkNotification.vue
@@ -23,7 +23,7 @@
           {{ $t('NETWORK.BUTTON.REFRESH') }}
         </button>
         <button class="ui-close-button" @click="closeNotification">
-          <i class="ui-close-icon icon ion-ios-close-outline" />
+          <fluent-icon icon="dismiss-circle" class="ui-close-icon " />
         </button>
       </div>
     </div>
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
index 89668449a..fc565b718 100644
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,5 +1,7 @@
 <template>
-  <i class="ion-android-menu hamburger--menu" @click="onMenuItemClick" />
+  <button @click="onMenuItemClick">
+    <fluent-icon class="hamburger--menu" icon="list" />
+  </button>
 </template>
 
 <script>
@@ -13,8 +15,14 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.ion-android-menu {
-  font-size: var(--font-size-big);
+<style scoped lang="scss">
+.hamburger--menu {
+  cursor: pointer;
+  display: none;
+  margin-right: var(--space-normal);
+
+  @media screen and (max-width: 1200px) {
+    display: block;
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/components/buttons/Button.vue b/app/javascript/dashboard/components/buttons/Button.vue
index ecd43f39f..69dbc3658 100644
--- a/app/javascript/dashboard/components/buttons/Button.vue
+++ b/app/javascript/dashboard/components/buttons/Button.vue
@@ -1,9 +1,10 @@
 <template>
   <button :type="type" class="button nice" :class="variant" @click="onClick">
-    <i
+    <fluent-icon
       v-if="!isLoading && icon"
       class="icon"
-      :class="buttonIconClass + ' ' + icon"
+      :class="buttonIconClass"
+      :icon="icon"
     />
     <spinner v-if="isLoading" />
     <slot></slot>
diff --git a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
index 9223ebcef..cc65c68b0 100644
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -6,7 +6,7 @@
     :class="computedClass"
     @click="onClick"
   >
-    <i v-if="!!iconClass" :class="iconClass" class="icon" />
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
     <span>{{ buttonText }}</span>
     <spinner v-if="loading" />
   </button>
diff --git a/app/javascript/dashboard/components/buttons/ResolveAction.vue b/app/javascript/dashboard/components/buttons/ResolveAction.vue
index 74e78c9cf..6635033d4 100644
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -5,8 +5,9 @@
         v-if="isOpen"
         class-names="resolve"
         color-scheme="success"
-        icon="ion-checkmark"
+        icon="checkmark"
         emoji="✅"
+        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdResolveConversation"
       >
@@ -16,8 +17,9 @@
         v-else-if="isResolved"
         class-names="resolve"
         color-scheme="warning"
-        icon="ion-refresh"
+        icon="arrow-redo"
         emoji="👀"
+        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
@@ -27,7 +29,8 @@
         v-else-if="showOpenButton"
         class-names="resolve"
         color-scheme="primary"
-        icon="ion-person"
+        icon="person"
+        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
@@ -38,7 +41,8 @@
         ref="arrowDownButton"
         :color-scheme="buttonClass"
         :disabled="isLoading"
-        icon="ion-arrow-down-b"
+        icon="chevron-down"
+        icon-size="16"
         emoji="🔽"
         @click="openDropdown"
       />
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index effe6bca3..8d9cd548e 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -45,7 +45,7 @@
     <div class="bottom-nav app-context-menu" @click="toggleOptions">
       <agent-details @show-options="toggleOptions" />
       <notification-bell />
-      <span class="current-user--options icon ion-android-more-vertical" />
+      <fluent-icon class="current-user--options" icon="more-vertical" />
       <options-menu
         :show="showOptionsMenu"
         @toggle-accounts="toggleAccountModal"
@@ -107,14 +107,14 @@ import router from '../../routes';
 
 export default {
   components: {
-    AgentDetails,
-    SidebarItem,
-    AvailabilityStatus,
-    NotificationBell,
-    OptionsMenu,
     AccountSelector,
     AddAccountModal,
     AddLabelModal,
+    AgentDetails,
+    AvailabilityStatus,
+    NotificationBell,
+    OptionsMenu,
+    SidebarItem,
     WootKeyShortcutModal,
   },
   mixins: [adminMixin, alertMixin, eventListenerMixins],
@@ -173,7 +173,7 @@ export default {
     },
     inboxSection() {
       return {
-        icon: 'ion-folder',
+        icon: 'folder',
         label: 'INBOXES',
         hasSubMenu: true,
         newLink: true,
@@ -193,7 +193,7 @@ export default {
     },
     labelSection() {
       return {
-        icon: 'ion-pound',
+        icon: 'number-symbol',
         label: 'LABELS',
         hasSubMenu: true,
         newLink: true,
@@ -216,7 +216,7 @@ export default {
     },
     contactLabelSection() {
       return {
-        icon: 'ion-pound',
+        icon: 'number-symbol',
         label: 'TAGGED_WITH',
         hasSubMenu: true,
         key: 'label',
@@ -239,7 +239,7 @@ export default {
     },
     teamSection() {
       return {
-        icon: 'ion-ios-people',
+        icon: 'people-team',
         label: 'TEAMS',
         hasSubMenu: true,
         newLink: true,
@@ -354,11 +354,11 @@ export default {
   cursor: pointer;
   padding: $space-small $space-large;
 
-  .ion-ios-checkmark {
-    font-size: $font-size-big;
+  .selected--account {
+    margin-top: -$space-smaller;
 
     & + .account--details {
-      padding-left: $space-normal;
+      padding-left: $space-normal - $space-micro;
     }
   }
 
diff --git a/app/javascript/dashboard/components/layout/SidebarItem.vue b/app/javascript/dashboard/components/layout/SidebarItem.vue
index 462853e6a..be04330ad 100644
--- a/app/javascript/dashboard/components/layout/SidebarItem.vue
+++ b/app/javascript/dashboard/components/layout/SidebarItem.vue
@@ -13,14 +13,20 @@
       :title="menuItem.toolTip"
     >
       <div class="wrap">
-        <i :class="menuItem.icon" />
+        <fluent-icon
+          size="18"
+          :icon="menuItem.icon"
+          class="margin-right-small"
+        />
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </div>
-      <span
+      <button
         v-if="showItem(menuItem)"
-        class="child-icon ion-android-add-circle"
+        class="child-icon"
         @click.prevent="newLinkClick(menuItem)"
-      />
+      >
+        <fluent-icon icon="add-circle" size="16" />
+      </button>
     </a>
     <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
       <router-link
@@ -32,10 +38,11 @@
       >
         <a href="#" :class="computedChildClass(child)">
           <div class="wrap">
-            <i
+            <fluent-icon
               v-if="menuItem.key === 'inbox'"
               class="inbox-icon"
-              :class="computedInboxClass(child)"
+              size="14"
+              :icon="computedInboxClass(child)"
             />
             <span
               v-if="child.color"
@@ -143,12 +150,4 @@ export default {
   min-width: $space-normal;
   width: $space-normal;
 }
-
-.inbox-icon {
-  position: relative;
-  top: -1px;
-  &.ion-ios-email {
-    font-size: var(--font-size-medium);
-  }
-}
 </style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
index 9860d7a09..e6e7df48e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
@@ -14,7 +14,13 @@
       class="account-selector"
     >
       <a :href="`/app/accounts/${account.id}/dashboard`">
-        <i v-if="account.id === accountId" class="ion ion-ios-checkmark" />
+        <fluent-icon
+          v-if="account.id === accountId"
+          class="selected--account"
+          icon="checkmark-circle"
+          type="solid"
+          size="24"
+        />
         <label :for="account.name" class="account--details">
           <div class="account--name">{{ account.name }}</div>
           <div class="account--role">{{ account.role }}</div>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
index 429164d7c..756aa665e 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -12,7 +12,7 @@
       <div v-if="!hasAccounts" class="alert-wrap">
         <div class="callout alert">
           <div class="icon-wrap">
-            <i class="ion-alert-circled"></i>
+            <fluent-icon icon="warning" />
           </div>
           {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
         </div>
@@ -102,18 +102,19 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .alert-wrap {
-  margin: var(--space-zero) var(--space-large);
-  margin-top: var(--space-medium);
+  font-size: var(--font-size-small);
+  margin: var(--space-medium) var(--space-large) var(--space-zero);
+
   .callout {
+    align-items: center;
+    border-radius: var(--border-radius-normal);
     display: flex;
-    justify-content: center;
   }
 }
 
 .icon-wrap {
-  font-size: var(--font-size-big);
   margin-left: var(--space-smaller);
   margin-right: var(--space-slab);
 }
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
index e5f05aed1..cf3521a54 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -1,10 +1,12 @@
 <template>
-  <span class="notifications icon ion-ios-bell" @click.stop="showNotification">
+  <span class="notifications" @click.stop="showNotification">
+    <fluent-icon icon="alert" />
     <span v-if="unreadCount" class="unread-badge">{{ unreadCount }}</span>
   </span>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+
 export default {
   computed: {
     ...mapGetters({
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
index 09bd6f120..ce1d5fe73 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js
@@ -7,10 +7,12 @@ import i18n from 'dashboard/i18n';
 
 import WootModal from 'dashboard/components/Modal';
 import WootModalHeader from 'dashboard/components/ModalHeader';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 const localVue = createLocalVue();
 localVue.component('woot-modal', WootModal);
 localVue.component('woot-modal-header', WootModalHeader);
+localVue.component('fluent-icon', FluentIcon);
 
 localVue.use(Vuex);
 localVue.use(VueI18n);
@@ -84,7 +86,7 @@ describe('accountSelctor', () => {
   });
 
   it('first account item is checked', () => {
-    const accountFirstItem = accountSelector.find('.account-selector .ion');
+    const accountFirstItem = accountSelector.find('.account-selector svg');
     expect(accountFirstItem.exists()).toBe(true);
   });
 });
diff --git a/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap b/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
index aeef353fb..58e820fc2 100644
--- a/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
+++ b/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SidemenuIcon matches snapshot 1`] = `
-<i
-  class="ion-android-menu hamburger--menu"
-/>
+<button>
+  <fluent-icon
+    class="hamburger--menu"
+    icon="list"
+  />
+</button>
 `;
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index 5415444d2..83e55b040 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -1,13 +1,23 @@
 <template>
   <div :class="labelClass" :style="labelStyle" :title="description">
-    <i v-if="icon" class="label--icon" :class="icon" @click="onClick" />
+    <button v-if="icon" class="label-action--button" @click="onClick">
+      <fluent-icon :icon="icon" size="12" class="label--icon" />
+    </button>
     <span v-if="!href">{{ title }}</span>
     <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
-    <i v-if="showClose" class="close--icon ion-close" @click="onClick" />
+    <button
+      v-if="showClose"
+      class="label-action--button"
+      :style="{ color: textColor }"
+      @click="onClick"
+    >
+      <fluent-icon icon="dismiss" size="12" class="close--icon" />
+    </button>
   </div>
 </template>
 <script>
 import { getContrastingTextColor } from '@chatwoot/utils';
+
 export default {
   props: {
     title: {
@@ -79,6 +89,8 @@ export default {
 @import '~dashboard/assets/scss/variables';
 
 .label {
+  display: inline-flex;
+  align-items: center;
   font-weight: var(--font-weight-medium);
   margin-right: var(--space-smaller);
   margin-bottom: var(--space-smaller);
@@ -89,11 +101,12 @@ export default {
 
   .label--icon {
     cursor: pointer;
+    margin-right: var(--space-smaller);
   }
-  .label--icon,
+
   .close--icon {
-    font-size: var(--font-size-micro);
     cursor: pointer;
+    margin-left: var(--space-smaller);
   }
 
   &.small .label--icon,
@@ -150,4 +163,8 @@ export default {
     }
   }
 }
+
+.label-action--button {
+  margin-bottom: var(--space-minus-micro);
+}
 </style>
diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue
index 71848ecb0..370d3812a 100644
--- a/app/javascript/dashboard/components/ui/Wizard.vue
+++ b/app/javascript/dashboard/components/ui/Wizard.vue
@@ -14,7 +14,7 @@
       <h3>
         {{ item.title }}
         <span v-if="isOver(item)" class="completed">
-          <i class="ion-checkmark"></i>
+          <fluent-icon icon="checkmark" />
         </span>
       </h3>
       <span class="step">
diff --git a/app/javascript/dashboard/components/ui/WootButton.vue b/app/javascript/dashboard/components/ui/WootButton.vue
index fab786238..42ce80c5d 100644
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -11,6 +11,7 @@
       class="icon"
       :emoji="emoji"
       :icon="icon"
+      :icon-size="iconSize"
     />
     <span v-if="$slots.default" class="button__content"><slot></slot></span>
   </button>
@@ -35,6 +36,10 @@ export default {
       type: String,
       default: '',
     },
+    iconSize: {
+      type: [Number, String],
+      default: 20,
+    },
     emoji: {
       type: String,
       default: '',
diff --git a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
index 2c4f48895..d484cbb4f 100644
--- a/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
+++ b/app/javascript/dashboard/components/widgets/AttachmentsPreview.vue
@@ -24,12 +24,11 @@
         </span>
       </div>
       <div class="remove-file-wrap">
-        <button
-          class="remove--attachment"
+        <woot-button
+          class="remove--attachment clear secondary"
+          icon="dismiss"
           @click="() => onRemoveAttachment(index)"
-        >
-          <i class="ion-android-close"></i>
-        </button>
+        />
       </div>
     </div>
   </div>
diff --git a/app/javascript/dashboard/components/widgets/BackButton.vue b/app/javascript/dashboard/components/widgets/BackButton.vue
index 758fd7ae2..017c3f7e4 100644
--- a/app/javascript/dashboard/components/widgets/BackButton.vue
+++ b/app/javascript/dashboard/components/widgets/BackButton.vue
@@ -1,7 +1,8 @@
 <template>
-  <span class="back-button ion-ios-arrow-left" @click.capture="goBack">
+  <button class="back-button" @click.capture="goBack">
+    <fluent-icon icon="chevron-left" />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
-  </span>
+  </button>
 </template>
 <script>
 import router from '../../routes/index';
@@ -28,3 +29,4 @@ export default {
   },
 };
 </script>
+<style scoped></style>
diff --git a/app/javascript/dashboard/components/widgets/InboxIconWithName.vue b/app/javascript/dashboard/components/widgets/InboxIconWithName.vue
deleted file mode 100644
index 5c8163589..000000000
--- a/app/javascript/dashboard/components/widgets/InboxIconWithName.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <div class="inbox">
-    <i :class="icon" />
-    <span>{{ inbox.name }}</span>
-  </div>
-</template>
-<script>
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
-export default {
-  props: {
-    inbox: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    icon() {
-      if (this.inbox.channel_type === INBOX_TYPES.WEB) {
-        return 'icon ion-earth';
-      }
-      return 'icon ion-android-textsms';
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.inbox {
-  display: flex;
-  align-items: center;
-  .icon {
-    margin-right: var(--space-micro);
-    min-width: var(--space-normal);
-    position: relative;
-    top: -1px;
-  }
-}
-</style>
diff --git a/app/javascript/dashboard/components/widgets/InboxListItem.vue b/app/javascript/dashboard/components/widgets/InboxListItem.vue
deleted file mode 100644
index 5bfdacdda..000000000
--- a/app/javascript/dashboard/components/widgets/InboxListItem.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div class="inbox-item">
-    <img src="~dashboard/assets/images/no_page_image.png" alt="No Page Image" />
-    <div class="item--details columns">
-      <h4 class="item--name">
-        {{ inbox.label }}
-      </h4>
-      <p class="item--sub">
-        Facebook
-      </p>
-    </div>
-    <!-- <span class="ion-chevron-right arrow"></span> -->
-  </div>
-</template>
-<script>
-/* eslint no-console: 0 */
-// import WootSwitch from '../ui/Switch';
-
-export default {
-  props: ['inbox'],
-  created() {},
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/InboxName.vue b/app/javascript/dashboard/components/widgets/InboxName.vue
index cafbabad3..cb0b9fb06 100644
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -1,8 +1,8 @@
 <template>
-  <span class="inbox--name">
-    <i :class="computedInboxClass" />
+  <div class="inbox--name">
+    <fluent-icon class="inbox--icon" :icon="computedInboxClass" size="12" />
     {{ inbox.name }}
-  </span>
+  </div>
 </template>
 <script>
 import { getInboxClassByType } from 'dashboard/helper/inbox';
@@ -25,6 +25,7 @@ export default {
 </script>
 <style scoped>
 .inbox--name {
+  display: inline-flex;
   padding: var(--space-micro) 0;
   line-height: var(--space-slab);
   font-weight: var(--font-weight-medium);
@@ -32,4 +33,8 @@ export default {
   color: var(--s-500);
   font-size: var(--font-size-mini);
 }
+
+.inbox--icon {
+  margin-right: var(--space-micro);
+}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/SearchBox.vue b/app/javascript/dashboard/components/widgets/SearchBox.vue
deleted file mode 100644
index 21e16e0bd..000000000
--- a/app/javascript/dashboard/components/widgets/SearchBox.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="search">
-    <i class="icon ion-ios-search-strong" />
-    <input class="input" type="email" :placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
-  </div>
-</template>
-<script>
-export default {
-
-};
-</script>
diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue
index b9faa2f6e..de78256c4 100644
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -20,8 +20,12 @@
           :is-disabled="hasFirstPage"
           @click="onFirstPage"
         >
-          <i class="ion-chevron-left" />
-          <i class="ion-chevron-left" />
+          <fluent-icon icon="chevron-left" size="18" />
+          <fluent-icon
+            icon="chevron-left"
+            size="18"
+            class="margin-left-minus-slab"
+          />
         </woot-button>
         <woot-button
           size="small"
@@ -30,7 +34,7 @@
           :is-disabled="hasPrevPage"
           @click="onPrevPage"
         >
-          <i class="ion-chevron-left" />
+          <fluent-icon icon="chevron-left" size="18" />
         </woot-button>
         <woot-button
           size="small"
@@ -47,7 +51,7 @@
           :is-disabled="hasNextPage"
           @click="onNextPage"
         >
-          <i class="ion-chevron-right" />
+          <fluent-icon icon="chevron-right" size="18" />
         </woot-button>
         <woot-button
           size="small"
@@ -57,8 +61,12 @@
           :is-disabled="hasLastPage"
           @click="onLastPage"
         >
-          <i class="ion-chevron-right" />
-          <i class="ion-chevron-right" />
+          <fluent-icon icon="chevron-right" size="18" />
+          <fluent-icon
+            icon="chevron-right"
+            size="18"
+            class="margin-left-minus-slab"
+          />
         </woot-button>
       </div>
     </div>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 1ffc9be65..679c9fc27 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -3,11 +3,12 @@
     <div class="left-wrap">
       <woot-button
         :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
-        icon="ion-happy-outline"
+        icon="emoji"
         emoji="😊"
         color-scheme="secondary"
         variant="smooth"
         size="small"
+        :icon-size="14"
         @click="toggleEmojiPicker"
       />
 
@@ -24,8 +25,9 @@
           v-if="showAttachButton"
           class-names="button--upload"
           :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-          icon="ion-android-attach"
+          icon="attach"
           emoji="📎"
+          :icon-size="14"
           color-scheme="secondary"
           variant="smooth"
           size="small"
@@ -33,8 +35,9 @@
       </file-upload>
       <woot-button
         v-if="enableRichEditor && !isOnPrivateNote"
-        icon="ion-quote"
+        icon="quote"
         emoji="🖊️"
+        :icon-size="16"
         color-scheme="secondary"
         variant="smooth"
         size="small"
@@ -46,7 +49,7 @@
           v-show="$refs.upload && $refs.upload.dropActive"
           class="modal-mask"
         >
-          <i class="ion-ios-cloud-upload-outline icon"></i>
+          <fluent-icon icon="cloud-backup" />
           <h4 class="page-sub-title">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 27f4cc76c..51a6852b1 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -30,7 +30,7 @@
       v-if="popoutReplyBox"
       variant="clear"
       size="large"
-      icon="ion-android-close"
+      icon="dismiss"
       color-scheme="secondary"
       class-names="popout-button"
       @click="$emit('click')"
@@ -39,7 +39,7 @@
       v-else
       variant="clear"
       size="large"
-      icon="ion-arrow-resize"
+      icon="resize-large"
       color-scheme="secondary"
       class-names="popout-button"
       @click="$emit('click')"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 4d2c39814..487e55901 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -21,7 +21,8 @@
         />
         <div class="filter-actions">
           <woot-button
-            icon="ion-plus"
+            icon="add"
+            icon-size="16"
             color-scheme="success"
             variant="smooth"
             size="small"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 67f78b86e..f99c18e0f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -24,7 +24,7 @@
           v-if="showAssignee && assignee.name"
           class="label assignee-label text-truncate"
         >
-          <i class="ion-person" />
+          <fluent-icon icon="person" size="12" />
           {{ assignee.name }}
         </span>
       </div>
@@ -32,25 +32,41 @@
         {{ currentContact.name }}
       </h4>
       <p v-if="lastMessageInChat" class="conversation--message">
-        <i v-if="isMessagePrivate" class="ion-locked last-message-icon" />
-        <i v-else-if="messageByAgent" class="ion-ios-undo last-message-icon" />
-        <i
+        <fluent-icon
+          v-if="isMessagePrivate"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="lock-closed"
+        />
+        <fluent-icon
+          v-else-if="messageByAgent"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="arrow-reply"
+        />
+        <fluent-icon
           v-else-if="isMessageAnActivity"
-          class="ion-information-circled last-message-icon"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="info"
         />
         <span v-if="lastMessageInChat.content">
           {{ parsedLastMessage }}
         </span>
         <span v-else-if="lastMessageInChat.attachments">
-          <i :class="`small-icon ${this.$t(`${attachmentIconKey}.ICON`)}`"></i>
-          {{ this.$t(`${attachmentIconKey}.CONTENT`) }}
+          <fluent-icon
+            size="16"
+            class="message--attachment-icon"
+            :icon="attachmentIcon"
+          />
+          {{ this.$t(`${attachmentMessageContent}`) }}
         </span>
         <span v-else>
           {{ $t('CHAT_LIST.NO_CONTENT') }}
         </span>
       </p>
       <p v-else class="conversation--message">
-        <i class="ion-android-alert"></i>
+        <fluent-icon size="16" class="message--attachment-icon" icon="info" />
         <span>
           {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
@@ -76,6 +92,15 @@ import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName';
 import inboxMixin from 'shared/mixins/inboxMixin';
 
+const ATTACHMENT_ICONS = {
+  image: 'image',
+  audio: 'headphones-sound-wave',
+  video: 'video',
+  file: 'document',
+  location: 'location',
+  fallback: 'link',
+};
+
 export default {
   components: {
     InboxName,
@@ -133,10 +158,18 @@ export default {
       );
     },
 
-    attachmentIconKey() {
+    lastMessageFileType() {
       const lastMessage = this.lastMessageInChat;
       const [{ file_type: fileType } = {}] = lastMessage.attachments;
-      return `CHAT_LIST.ATTACHMENTS.${fileType}`;
+      return fileType;
+    },
+
+    attachmentIcon() {
+      return ATTACHMENT_ICONS[this.lastMessageFileType];
+    },
+
+    attachmentMessageContent() {
+      return `CHAT_LIST.ATTACHMENTS.${this.lastMessageFileType}.CONTENT`;
     },
 
     isActiveChat() {
@@ -243,14 +276,10 @@ export default {
     white-space: nowrap;
     width: 60%;
   }
-  .ion-earth {
-    font-size: var(--font-size-mini);
-  }
 }
 
 .last-message-icon {
   color: var(--s-600);
-  font-size: var(--font-size-mini);
 }
 
 .conversation--metadata {
@@ -259,16 +288,22 @@ export default {
   padding-right: var(--space-normal);
 
   .label {
-    padding: var(--space-micro) 0 var(--space-micro) 0;
-    line-height: var(--space-slab);
-    font-weight: var(--font-weight-medium);
     background: none;
     color: var(--s-500);
     font-size: var(--font-size-mini);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--space-slab);
+    padding: var(--space-micro) 0 var(--space-micro) 0;
   }
 
   .assignee-label {
+    display: inline-flex;
     max-width: 50%;
   }
 }
+
+.message--attachment-icon {
+  margin-top: var(--space-minus-micro);
+  vertical-align: middle;
+}
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
index 22989f36f..89431eca3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -11,10 +11,12 @@
       <div class="user--profile__meta">
         <h3 class="user--name text-truncate">
           <span class="margin-right-smaller">{{ currentContact.name }}</span>
-          <i
+          <fluent-icon
             v-if="!isHMACVerified"
             v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-            class="ion-android-alert text-y-800 fs-default"
+            class="text-y-800"
+            size="14"
+            icon="warning"
           />
         </h3>
         <div class="conversation--header--actions">
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index bd832f4ba..5d04199e1 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -234,8 +234,8 @@ export default {
       return {
         email: this.contentAttributes.email,
         cc: this.contentAttributes.cc_emails,
-        bcc: this.contentAttributes.bcc_emails
-      }
+        bcc: this.contentAttributes.bcc_emails,
+      };
     },
     hasAttachments() {
       return !!(this.data.attachments && this.data.attachments.length > 0);
@@ -354,7 +354,7 @@ export default {
     }
 
     &.is-private .file.message-text__wrap {
-      .ion-document-text {
+      .file--icon {
         color: var(--w-400);
       }
       .text-block-title {
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index db13011ca..b9f3557f6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -44,7 +44,11 @@
         class="banner-close-button"
         @click="removeTweetSelection"
       >
-        <i v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')" class="ion-close" />
+        <fluent-icon
+          v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')"
+          size="16"
+          icon="dismiss"
+        />
       </button>
     </div>
     <ul class="conversation-panel">
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index 502819b05..f5db4bff7 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -4,20 +4,20 @@
       v-if="!currentChat.muted"
       v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
       class="hollow secondary actions--button"
-      icon="ion-volume-mute"
+      icon="speaker-mute"
       @click="mute"
     />
     <woot-button
       v-else
       v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
       class="hollow secondary actions--button"
-      icon="ion-volume-medium"
+      icon="speaker-1"
       @click="unmute"
     />
     <woot-button
       v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
       class="hollow secondary actions--button"
-      icon="ion-share"
+      icon="share"
       @click="toggleEmailActionsModal"
     />
     <resolve-action
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index 0413ab8a9..556ec6ae4 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -2,38 +2,48 @@
   <div class="message-text--metadata">
     <span class="time">{{ readableTime }}</span>
     <span v-if="showSentIndicator" class="time">
-      <i
+      <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.SENT')"
-        class="icon ion-checkmark"
+        icon="checkmark"
+        size="16"
       />
     </span>
-    <i
+    <fluent-icon
       v-if="isEmail"
       v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
-      class="ion ion-android-mail"
+      icon="mail"
+      class="action--icon"
+      size="16"
     />
-    <i
+    <fluent-icon
       v-if="isPrivate"
       v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
-      class="icon ion-android-lock"
+      icon="lock-closed"
+      class="action--icon"
+      size="16"
       @mouseenter="isHovered = true"
       @mouseleave="isHovered = false"
     />
-    <i
-      v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
-      v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
-      class="icon ion-reply cursor-pointer"
-      @click="onTweetReply"
-    />
+    <button @click="onTweetReply">
+      <fluent-icon
+        v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
+        v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
+        icon="arrow-reply"
+        class="action--icon cursor-pointer"
+        size="16"
+      />
+    </button>
     <a
       v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
       :href="linkToTweet"
       target="_blank"
       rel="noopener noreferrer nofollow"
     >
-      <i
+      <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
-        class="icon ion-android-open cursor-pointer"
+        icon="open"
+        class="action--icon cursor-pointer"
+        size="16"
       />
     </a>
   </div>
@@ -129,7 +139,7 @@ export default {
     }
   }
 
-  .icon {
+  .action--icon {
     color: var(--white);
   }
 }
@@ -143,7 +153,7 @@ export default {
 }
 
 .message-text--metadata {
-  align-items: flex-end;
+  align-items: flex-start;
   display: flex;
 
   .time {
@@ -153,10 +163,9 @@ export default {
     line-height: 1.8;
   }
 
-  i {
-    line-height: 1.4;
-    padding-right: var(--space-small);
-    padding-left: var(--space-small);
+  .action--icon {
+    margin-right: var(--space-small);
+    margin-left: var(--space-small);
     color: var(--s-900);
   }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
index fb761742f..89783f2cb 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="file message-text__wrap">
     <div class="icon-wrap">
-      <i class="ion-document-text"></i>
+      <fluent-icon icon="document" class="file--icon" />
     </div>
     <div class="meta">
       <h5 class="text-block-title">
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index 281ca630c..1bd16d9d5 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -13,11 +13,11 @@
       @click="toggleQuotedContent"
     >
       <span v-if="showQuotedContent">
-        <i class="ion-chevron-up" />
+        <fluent-icon icon="chevron-up" class="fluent-icon" size="16" />
         {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
       </span>
       <span v-else>
-        <i class="ion-chevron-down" />
+        <fluent-icon icon="chevron-down" class="fluent-icon" size="16" />
         {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
       </span>
     </button>
@@ -104,5 +104,9 @@ export default {
   font-size: var(--font-size-mini);
   padding-bottom: var(--space-small);
   padding-top: var(--space-small);
+
+  .fluent-icon {
+    margin-bottom: var(--space-minus-smaller);
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
index 8ef570dca..45592bed1 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
@@ -72,7 +72,8 @@
           />
         </div>
         <woot-button
-          icon="ion-close"
+          icon="dismiss"
+          icon-size="16"
           variant="clear"
           color-scheme="secondary"
           @click="removeFilter"
diff --git a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
index adcb85161..f92819870 100644
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -16,7 +16,9 @@
               </p>
             </div>
           </div>
-          <i class="ion-android-close modal--close" @click="$emit('close')"></i>
+          <button class="cursor-pointer" @click="$emit('close')">
+            <fluent-icon icon="dismiss" />
+          </button>
         </div>
 
         <div class="shortcut__wrap">
@@ -111,14 +113,14 @@ export default {
 }
 
 .header-wrap {
+  align-items: flex-start;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  margin-bottom: var(--space-slab);
 }
 
 .title-shortcut-key__wrap {
   display: flex;
-  margin-bottom: var(--space-small);
 }
 
 .page-title {
diff --git a/app/javascript/dashboard/helper/inbox.js b/app/javascript/dashboard/helper/inbox.js
index 9355b9aa8..179550086 100644
--- a/app/javascript/dashboard/helper/inbox.js
+++ b/app/javascript/dashboard/helper/inbox.js
@@ -3,32 +3,35 @@ import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 export const getInboxClassByType = (type, phoneNumber) => {
   switch (type) {
     case INBOX_TYPES.WEB:
-      return 'ion-earth';
+      return 'globe-desktop';
 
     case INBOX_TYPES.FB:
-      return 'ion-social-facebook';
+      return 'brand-facebook';
 
     case INBOX_TYPES.TWITTER:
-      return 'ion-social-twitter';
+      return 'brand-twitter';
 
     case INBOX_TYPES.TWILIO:
       return phoneNumber.startsWith('whatsapp')
-        ? 'ion-social-whatsapp-outline'
-        : 'ion-android-textsms';
+        ? 'brand-whatsapp'
+        : 'brand-sms';
 
     case INBOX_TYPES.WHATSAPP:
-      return 'ion-social-whatsapp-outline';
+      return 'brand-whatsapp';
 
     case INBOX_TYPES.API:
-      return 'ion-cloud';
+      return 'cloud';
 
     case INBOX_TYPES.EMAIL:
-      return 'ion-ios-email';
+      return 'mail';
 
     case INBOX_TYPES.TELEGRAM:
-      return 'ion-ios-navigate';
+      return 'brand-telegram';
+
+    case INBOX_TYPES.LINE:
+      return 'brand-line';
 
     default:
-      return 'ion-ios-chatbubble';
+      return 'chat';
   }
 };
diff --git a/app/javascript/dashboard/helper/specs/inbox.spec.js b/app/javascript/dashboard/helper/specs/inbox.spec.js
index 54c3cefad..f6d6aa9f0 100644
--- a/app/javascript/dashboard/helper/specs/inbox.spec.js
+++ b/app/javascript/dashboard/helper/specs/inbox.spec.js
@@ -3,33 +3,35 @@ import { getInboxClassByType } from '../inbox';
 describe('#Inbox Helpers', () => {
   describe('getInboxClassByType', () => {
     it('should return correct class for web widget', () => {
-      expect(getInboxClassByType('Channel::WebWidget')).toEqual('ion-earth');
+      expect(getInboxClassByType('Channel::WebWidget')).toEqual(
+        'globe-desktop'
+      );
     });
     it('should return correct class for fb page', () => {
       expect(getInboxClassByType('Channel::FacebookPage')).toEqual(
-        'ion-social-facebook'
+        'brand-facebook'
       );
     });
     it('should return correct class for  twitter profile', () => {
       expect(getInboxClassByType('Channel::TwitterProfile')).toEqual(
-        'ion-social-twitter'
+        'brand-twitter'
       );
     });
     it('should return correct class for twilio sms', () => {
       expect(getInboxClassByType('Channel::TwilioSms', '')).toEqual(
-        'ion-android-textsms'
+        'brand-sms'
       );
     });
     it('should return correct class for whatsapp', () => {
       expect(getInboxClassByType('Channel::TwilioSms', 'whatsapp')).toEqual(
-        'ion-social-whatsapp-outline'
+        'brand-whatsapp'
       );
     });
     it('should return correct class for Api', () => {
-      expect(getInboxClassByType('Channel::Api')).toEqual('ion-cloud');
+      expect(getInboxClassByType('Channel::Api')).toEqual('cloud');
     });
     it('should return correct class for Email', () => {
-      expect(getInboxClassByType('Channel::Email')).toEqual('ion-ios-email');
+      expect(getInboxClassByType('Channel::Email')).toEqual('mail');
     });
   });
 });
diff --git a/app/javascript/dashboard/i18n/locale/ar/chatlist.json b/app/javascript/dashboard/i18n/locale/ar/chatlist.json
index fed68be9b..f64c6bce5 100644
--- a/app/javascript/dashboard/i18n/locale/ar/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ar/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "رسالة صورة"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "رسالة صوتية"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "رسالة فيديو"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "مرفقات"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "الموقع الجغرافي"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "قام بمشاركة رابط"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ca/chatlist.json b/app/javascript/dashboard/i18n/locale/ca/chatlist.json
index 99b32381f..689e5f949 100644
--- a/app/javascript/dashboard/i18n/locale/ca/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ca/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Missatge d'imatge"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Missatge d'àudio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Missatge de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Fitxer adjunt"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Ubicació"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ha compartit una URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/cs/chatlist.json b/app/javascript/dashboard/i18n/locale/cs/chatlist.json
index 203b04040..8ca38a3d8 100644
--- a/app/javascript/dashboard/i18n/locale/cs/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/cs/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Zpráva obrázku"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Zvuková zpráva"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video zpráva"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Přílohu souboru"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Poloha"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "sdílel URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/da/chatlist.json b/app/javascript/dashboard/i18n/locale/da/chatlist.json
index 7ec2bddaa..4c9b04935 100644
--- a/app/javascript/dashboard/i18n/locale/da/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/da/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Billedbesked"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Lydbesked"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video besked"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Fil Vedhæftning"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Lokation"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "har delt en URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/de/chatlist.json b/app/javascript/dashboard/i18n/locale/de/chatlist.json
index 16304316f..4975dec44 100644
--- a/app/javascript/dashboard/i18n/locale/de/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/de/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bildnachricht"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio-Nachricht"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videonachricht"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Dateianhang"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Ort"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "hat eine URL geteilt"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/el/chatlist.json b/app/javascript/dashboard/i18n/locale/el/chatlist.json
index 093ced9da..4d731b260 100644
--- a/app/javascript/dashboard/i18n/locale/el/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/el/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Μήνυμα εικόνας"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Μήνυμα ήχου"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Μήνυμα βίντεο"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Επισυναπτόμενο αρχείο"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Θέση"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "έχει μοιράσει ένα σύνδεσμο"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/en/chatlist.json b/app/javascript/dashboard/i18n/locale/en/chatlist.json
index 1be18cad9..ae9d81ba3 100644
--- a/app/javascript/dashboard/i18n/locale/en/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/es/chatlist.json b/app/javascript/dashboard/i18n/locale/es/chatlist.json
index 31b01a691..bdc95d1e5 100644
--- a/app/javascript/dashboard/i18n/locale/es/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/es/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Mensaje de imagen"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Mensaje de audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Mensaje de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Archivo adjunto"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Ubicación"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ha compartido una url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/fa/chatlist.json b/app/javascript/dashboard/i18n/locale/fa/chatlist.json
index d7e320776..d39027601 100644
--- a/app/javascript/dashboard/i18n/locale/fa/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/fa/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "پیام تصویری"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "پیام صوتی"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "پیام ویدیویی"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "فایل الصاقی"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "مکان"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "یک آدرس URL به اشتراک گذاشته شده"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/fi/chatlist.json b/app/javascript/dashboard/i18n/locale/fi/chatlist.json
index aba8e7053..609752f67 100644
--- a/app/javascript/dashboard/i18n/locale/fi/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/fi/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Kuvaviesti"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Ääniviesti"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videoviesti"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Liite"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Sijainti"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "on jakanut URL-osoitteen"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/fr/chatlist.json b/app/javascript/dashboard/i18n/locale/fr/chatlist.json
index 7552ea48b..5aec4e068 100644
--- a/app/javascript/dashboard/i18n/locale/fr/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/fr/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Message image"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Message audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Message vidéo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Pièce jointe"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Localisation"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "a partagé une URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/he/chatlist.json b/app/javascript/dashboard/i18n/locale/he/chatlist.json
index 78334b7f8..e5972c1bd 100644
--- a/app/javascript/dashboard/i18n/locale/he/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/he/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "הודעת תמונה"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "הודעות קוליות"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "הודעות וידאו"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "קובץ מצורף"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "מיקום"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "שיתף קישור"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/hi/chatlist.json b/app/javascript/dashboard/i18n/locale/hi/chatlist.json
index 1be18cad9..ae9d81ba3 100644
--- a/app/javascript/dashboard/i18n/locale/hi/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/hi/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/hu/chatlist.json b/app/javascript/dashboard/i18n/locale/hu/chatlist.json
index ec0adb383..5b410decd 100644
--- a/app/javascript/dashboard/i18n/locale/hu/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/hu/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Képüzenet"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Hangüzenet"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videoüzenet"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Csatolt file"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Hely"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "megosztott URL-t tartalmaz"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/id/chatlist.json b/app/javascript/dashboard/i18n/locale/id/chatlist.json
index 3ce926a77..338a2214f 100644
--- a/app/javascript/dashboard/i18n/locale/id/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/id/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Pesan gambar"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Pesan audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Pesan video"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Lampiran File"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Lokasi"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "telah membagikan url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/it/chatlist.json b/app/javascript/dashboard/i18n/locale/it/chatlist.json
index 9b054a4e1..abc69999e 100644
--- a/app/javascript/dashboard/i18n/locale/it/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/it/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Messaggio immagine"
       },
       "audio": {
-        "ICON": "-quantità-alto",
         "CONTENT": "Messaggio audio"
       },
       "video": {
-        "ICON": "videocam",
         "CONTENT": "Messaggio video"
       },
       "file": {
-        "ICON": "e-documento",
         "CONTENT": "File Allegato"
       },
       "location": {
-        "ICON": "Posizione-ios",
         "CONTENT": "Localizzazione"
       },
       "fallback": {
-        "ICON": "e-link",
         "CONTENT": "ha condiviso un url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ja/chatlist.json b/app/javascript/dashboard/i18n/locale/ja/chatlist.json
index d4ff266f5..909dfbf4c 100644
--- a/app/javascript/dashboard/i18n/locale/ja/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ja/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "画像メッセージ"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "音声メッセージ"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "ビデオ メッセージ"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "添付ファイル"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "場所"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "URLを共有しています"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ko/chatlist.json b/app/javascript/dashboard/i18n/locale/ko/chatlist.json
index aab37eaa8..a9d4660ca 100644
--- a/app/javascript/dashboard/i18n/locale/ko/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ko/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "사진 메시지"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "음성 메시지"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "영상 메시지"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "파일 첨부"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "장소"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "URL을 공유함"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ml/chatlist.json b/app/javascript/dashboard/i18n/locale/ml/chatlist.json
index 8aa9f9fd6..fa6eacd73 100644
--- a/app/javascript/dashboard/i18n/locale/ml/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ml/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "ചിത്ര സന്ദേശം"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "ഓഡിയോ സന്ദേശം"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "വീഡിയോ സന്ദേശം"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "ഫയൽ അറ്റാച്ചുമെന്റ്"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "സ്ഥാനം"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ഒരു യു. ആർ. എൽ പങ്കിട്ടു"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ne/chatlist.json b/app/javascript/dashboard/i18n/locale/ne/chatlist.json
index 1be18cad9..ae9d81ba3 100644
--- a/app/javascript/dashboard/i18n/locale/ne/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ne/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/nl/chatlist.json b/app/javascript/dashboard/i18n/locale/nl/chatlist.json
index 752959d0b..ee1912319 100644
--- a/app/javascript/dashboard/i18n/locale/nl/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/nl/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bericht met foto"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audiobericht"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videobericht"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Bestandsbijlage"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Locatie"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "heeft een url gedeeld"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/no/chatlist.json b/app/javascript/dashboard/i18n/locale/no/chatlist.json
index f9c973507..059d6544a 100644
--- a/app/javascript/dashboard/i18n/locale/no/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/no/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bildemelding"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Lydmelding"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video beskjed"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Vedlegg"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Plassering"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "har delt en URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/pl/chatlist.json b/app/javascript/dashboard/i18n/locale/pl/chatlist.json
index d83324f0c..60b217344 100644
--- a/app/javascript/dashboard/i18n/locale/pl/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/pl/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Wiadomość obrazkowa"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Wiadomość audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Wiadomość wideo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Załącznik pliku"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Lokalizacja"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "udostępnił adres url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/pt/chatlist.json b/app/javascript/dashboard/i18n/locale/pt/chatlist.json
index dcf62496a..f440f3cae 100644
--- a/app/javascript/dashboard/i18n/locale/pt/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/pt/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Mensagem de imagem"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Mensagem de áudio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Mensagem de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Arquivo anexo"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Local:"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "compartilhou uma url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json b/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json
index ec403b296..8def2d390 100644
--- a/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Mensagem de imagem"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Mensagem de áudio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Mensagem de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Arquivo anexo"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Localização"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "compartilhou uma URL"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ru/chatlist.json b/app/javascript/dashboard/i18n/locale/ru/chatlist.json
index 761b664d0..4378b853e 100644
--- a/app/javascript/dashboard/i18n/locale/ru/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ru/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Изображение"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Аудиосообщение"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Видео"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Прикрепленный файл"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Местоположение"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "поделился ссылкой"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/sk/chatlist.json b/app/javascript/dashboard/i18n/locale/sk/chatlist.json
index 1be18cad9..ae9d81ba3 100644
--- a/app/javascript/dashboard/i18n/locale/sk/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/sk/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/sv/chatlist.json b/app/javascript/dashboard/i18n/locale/sv/chatlist.json
index f74e4473c..52fbbfd89 100644
--- a/app/javascript/dashboard/i18n/locale/sv/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/sv/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bildmeddelande"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Ljudmeddelande"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videomeddelande"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Bifogad fil"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Plats"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "har delat en webbadress"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/ta/chatlist.json b/app/javascript/dashboard/i18n/locale/ta/chatlist.json
index 3c208d637..f2415bfde 100644
--- a/app/javascript/dashboard/i18n/locale/ta/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/ta/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "பட செய்தி"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "ஆடியோ செய்தி"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "வீடியோ செய்தி"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "பைல் இணைப்புகள்"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "இருப்பிடம்"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ஒரு URL ஐப் பகிர்ந்துள்ளார்"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/th/chatlist.json b/app/javascript/dashboard/i18n/locale/th/chatlist.json
index 1b565589c..01dcd33a6 100644
--- a/app/javascript/dashboard/i18n/locale/th/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/th/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "ข้อความภาพ"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "ข้อความเสียง"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "ข้อความวิดิโอ"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "เเนบไฟล์"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "สถานที่"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ได้เเชร์ลิ้ง"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/tr/chatlist.json b/app/javascript/dashboard/i18n/locale/tr/chatlist.json
index fec2cf3a5..9703692ad 100644
--- a/app/javascript/dashboard/i18n/locale/tr/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/tr/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Görsel mesaj"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Sesli mesaj"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video mesajı"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Dosya eklentisi"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Yer"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "bir url paylaştı"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/uk/chatlist.json b/app/javascript/dashboard/i18n/locale/uk/chatlist.json
index a4dae75ae..273ee26c6 100644
--- a/app/javascript/dashboard/i18n/locale/uk/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/uk/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Повідомлення з картинкою"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Аудіо-повідомлення"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Відеоповідомлення"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Повідомлення з файлом"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Місцезнаходження"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "поділився посиланням"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/vi/chatlist.json b/app/javascript/dashboard/i18n/locale/vi/chatlist.json
index 8b90c49c5..1f8fa73fd 100644
--- a/app/javascript/dashboard/i18n/locale/vi/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/vi/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Tin nhắn hình ảnh"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Tin nhắn thoại"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Tin nhắn video"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Tập tin đính kèm"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Địa điểm"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "có một đường dẫn chia sẻ"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/zh/chatlist.json b/app/javascript/dashboard/i18n/locale/zh/chatlist.json
index 3a9557a2a..1de627a15 100644
--- a/app/javascript/dashboard/i18n/locale/zh/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/zh/chatlist.json
@@ -53,27 +53,21 @@
     ],
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "图片消息"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "音频消息"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "视频消息"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "附件"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "位置"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "分享了一个网址"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/zh_CN/chatlist.json b/app/javascript/dashboard/i18n/locale/zh_CN/chatlist.json
index 4da85b374..12da4fe82 100644
--- a/app/javascript/dashboard/i18n/locale/zh_CN/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/zh_CN/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "图片消息"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "音频消息"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "视频消息"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "附件"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "位置"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "分享了一个网址"
       }
     },
diff --git a/app/javascript/dashboard/i18n/locale/zh_TW/chatlist.json b/app/javascript/dashboard/i18n/locale/zh_TW/chatlist.json
index d06313dfe..d8f085107 100644
--- a/app/javascript/dashboard/i18n/locale/zh_TW/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/zh_TW/chatlist.json
@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "圖片訊息"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "聲音訊息"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "影片訊息"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "附件"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "位置"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "分享了一個網址"
       }
     },
diff --git a/app/javascript/dashboard/i18n/sidebarItems/campaigns.js b/app/javascript/dashboard/i18n/sidebarItems/campaigns.js
index 54c359e8e..18aad271c 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/campaigns.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/campaigns.js
@@ -4,21 +4,21 @@ const campaigns = accountId => ({
   routes: ['settings_account_campaigns', 'one_off'],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     ongoingCampaigns: {
-      icon: 'ion-arrow-swap',
+      icon: 'arrow-swap',
       label: 'ONGOING',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
       toStateName: 'settings_account_campaigns',
     },
     onOffCampaigns: {
-      icon: 'ion-radio-waves',
+      icon: 'sound-source',
       label: 'ONE_OFF',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),
diff --git a/app/javascript/dashboard/i18n/sidebarItems/common.js b/app/javascript/dashboard/i18n/sidebarItems/common.js
index 665b813e5..6f52ed54f 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/common.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/common.js
@@ -17,7 +17,7 @@ const common = accountId => ({
   ],
   menuItems: {
     assignedToMe: {
-      icon: 'ion-chatbox-working',
+      icon: 'chat',
       label: 'CONVERSATIONS',
       hasSubMenu: false,
       key: '',
@@ -26,35 +26,35 @@ const common = accountId => ({
       toStateName: 'home',
     },
     contacts: {
-      icon: 'ion-person',
+      icon: 'book-contacts',
       label: 'CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),
       toStateName: 'contacts_dashboard',
     },
     notifications: {
-      icon: 'ion-ios-bell',
+      icon: 'alert',
       label: 'NOTIFICATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/notifications`),
       toStateName: 'notifications_dashboard',
     },
     report: {
-      icon: 'ion-arrow-graph-up-right',
+      icon: 'arrow-trending-lines',
       label: 'REPORTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports`),
       toStateName: 'settings_account_reports',
     },
     campaigns: {
-      icon: 'ion-speakerphone',
+      icon: 'megaphone',
       label: 'CAMPAIGNS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns`),
       toStateName: 'settings_account_campaigns',
     },
     settings: {
-      icon: 'ion-settings',
+      icon: 'settings',
       label: 'SETTINGS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings`),
diff --git a/app/javascript/dashboard/i18n/sidebarItems/contacts.js b/app/javascript/dashboard/i18n/sidebarItems/contacts.js
index a1ecf4a7a..1446be274 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/contacts.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/contacts.js
@@ -8,14 +8,14 @@ const contacts = accountId => ({
   ],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     contacts: {
-      icon: 'ion-person',
+      icon: 'contact-card-group',
       label: 'ALL_CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),
diff --git a/app/javascript/dashboard/i18n/sidebarItems/reports.js b/app/javascript/dashboard/i18n/sidebarItems/reports.js
index 66595d691..3b6c94972 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/reports.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/reports.js
@@ -11,49 +11,49 @@ const reports = accountId => ({
   ],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     reportOverview: {
-      icon: 'ion-arrow-graph-up-right',
+      icon: 'arrow-trending-lines',
       label: 'REPORTS_OVERVIEW',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/overview`),
       toStateName: 'settings_account_reports',
     },
     csatReports: {
-      icon: 'ion-happy',
+      icon: 'emoji',
       label: 'CSAT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/csat`),
       toStateName: 'csat_reports',
     },
     agentReports: {
-      icon: 'ion-person-stalker',
+      icon: 'people',
       label: 'REPORTS_AGENT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/agent`),
       toStateName: 'agent_reports',
     },
     labelReports: {
-      icon: 'ion-pricetags',
+      icon: 'tag',
       label: 'REPORTS_LABEL',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/label`),
       toStateName: 'label_reports',
     },
     inboxReports: {
-      icon: 'ion-archive',
+      icon: 'mail-inbox-all',
       label: 'REPORTS_INBOX',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/inboxes`),
       toStateName: 'inbox_reports',
     },
     teamReports: {
-      icon: 'ion-ios-people',
+      icon: 'people-team',
       label: 'REPORTS_TEAM',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
diff --git a/app/javascript/dashboard/i18n/sidebarItems/settings.js b/app/javascript/dashboard/i18n/sidebarItems/settings.js
index 23f59bd7b..fa3660320 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/settings.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/settings.js
@@ -32,42 +32,42 @@ const settings = accountId => ({
   ],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     agents: {
-      icon: 'ion-person-stalker',
+      icon: 'people',
       label: 'AGENTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
       toStateName: 'agent_list',
     },
     teams: {
-      icon: 'ion-ios-people',
+      icon: 'people-team',
       label: 'TEAMS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
       toStateName: 'settings_teams_list',
     },
     inboxes: {
-      icon: 'ion-archive',
+      icon: 'mail-inbox-all',
       label: 'INBOXES',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
       toStateName: 'settings_inbox_list',
     },
     labels: {
-      icon: 'ion-pricetags',
+      icon: 'tag',
       label: 'LABELS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
       toStateName: 'labels_list',
     },
     attributes: {
-      icon: 'ion-code',
+      icon: 'code',
       label: 'CUSTOM_ATTRIBUTES',
       hasSubMenu: false,
       toState: frontendURL(
@@ -76,14 +76,14 @@ const settings = accountId => ({
       toStateName: 'attributes_list',
     },
     automation: {
-      icon: 'ion-wrench',
+      icon: 'autocorrect',
       label: 'AUTOMATION',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
       toStateName: 'automation_list',
     },
     cannedResponses: {
-      icon: 'ion-chatbox-working',
+      icon: 'chat-multiple',
       label: 'CANNED_RESPONSES',
       hasSubMenu: false,
       toState: frontendURL(
@@ -92,21 +92,21 @@ const settings = accountId => ({
       toStateName: 'canned_list',
     },
     settings_integrations: {
-      icon: 'ion-flash',
+      icon: 'flash-on',
       label: 'INTEGRATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/integrations`),
       toStateName: 'settings_integrations',
     },
     settings_applications: {
-      icon: 'ion-asterisk',
+      icon: 'star-emphasis',
       label: 'APPLICATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
     },
     general_settings_index: {
-      icon: 'ion-gear-a',
+      icon: 'settings',
       label: 'ACCOUNT_SETTINGS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/general`),
diff --git a/app/javascript/dashboard/mixins/specs/attributeFixtures.js b/app/javascript/dashboard/mixins/specs/attributeFixtures.js
index 9b0cc0fc1..4ade79cde 100644
--- a/app/javascript/dashboard/mixins/specs/attributeFixtures.js
+++ b/app/javascript/dashboard/mixins/specs/attributeFixtures.js
@@ -18,7 +18,7 @@ export default [
     attribute_model: 'conversation_attribute',
     created_at: '2021-09-16T13:06:47.329Z',
     default_value: null,
-    icon: 'ion-calculator',
+    icon: 'fluent-calculator',
     id: 10,
     updated_at: '2021-09-22T10:42:25.873Z',
     value: 2021,
diff --git a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js b/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
index 222b35838..0c98f45c8 100644
--- a/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
+++ b/app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
@@ -70,7 +70,7 @@ describe('attributeMixin', () => {
         attribute_model: 'conversation_attribute',
         created_at: '2021-09-16T13:06:47.329Z',
         default_value: null,
-        icon: 'ion-calculator',
+        icon: 'fluent-calculator',
         id: 10,
         updated_at: '2021-09-22T10:42:25.873Z',
         value: 2021,
diff --git a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
index 74b92ba32..d828ee412 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
@@ -36,7 +36,7 @@
         variant="clear link"
         size="small"
         color-scheme="secondary"
-        icon="ion-compose"
+        icon="edit"
         class-names="edit-button"
         @click="onEdit"
       />
diff --git a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
index 97e6f4f66..abe67471b 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
@@ -10,10 +10,11 @@
       </h5>
       <p class="option__body">
         <span v-if="email" class="email-icon-wrap">
-          <i class="icon ion-email" />{{ email }}
+          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
+          {{ email }}
         </span>
         <span v-if="phoneNumber" class="phone-icon-wrap">
-          <i class="icon ion-ios-telephone" />
+          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
           {{ phoneNumber }}
         </span>
         <span v-if="!phoneNumber && !email">{{ '---' }}</span>
@@ -102,4 +103,9 @@ export default {
     width: auto;
   }
 }
+
+.merge-contact--icon {
+  margin-bottom: var(--space-minus-micro);
+  margin-right: var(--space-micro);
+}
 </style>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
index cf58b9a32..d7de3ea09 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="contact-fields">
-    <h3 class="block-title title">{{ $t('CONTACTS_PAGE.FIELDS') }}</h3>
+    <h3 class="block-title title">
+      {{ $t('CONTACTS_PAGE.FIELDS') }}
+    </h3>
     <attribute
       :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-      icon="ion-email"
+      icon="mail"
       emoji=""
       :value="contact.email"
       :show-edit="true"
@@ -11,7 +13,7 @@
     />
     <attribute
       :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
-      icon="ion-ios-telephone"
+      icon="call"
       emoji=""
       :value="contact.phone_number"
       :show-edit="true"
@@ -20,7 +22,7 @@
     <attribute
       v-if="additionalAttributes.location"
       :label="$t('CONTACT_PANEL.LOCATION')"
-      icon="ion-map"
+      icon="map"
       emoji="🌍"
       :value="additionalAttributes.location"
       :show-edit="true"
@@ -33,7 +35,7 @@
     >
       <attribute
         :label="attribute"
-        icon="ion-arrow-right-c"
+        icon="chevron-right"
         :value="customAttributes[attribute]"
         :show-edit="true"
         @update="value => onCustomAttributeUpdate(attribute, value)"
@@ -42,7 +44,7 @@
     <woot-button
       size="small"
       variant="link"
-      icon="ion-plus"
+      icon="add"
       @click="handleCustomCreate"
     >
       {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}
diff --git a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
index 42bc7849d..777508b61 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
@@ -33,7 +33,7 @@
       <woot-button
         variant="hollow"
         size="small expanded"
-        icon="ion-compose"
+        icon="edit"
         @click="onEditClick"
       >
         {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index 5d0418dae..2c886ac64 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -33,7 +33,7 @@
 
       <div class="child-contact-wrap">
         <div class="child-arrow">
-          <i class="ion-ios-arrow-up up" />
+          <fluent-icon icon="arrow-up" class="up" size="17" />
         </div>
         <div
           class="child-contact multiselect-wrap--medium"
@@ -213,8 +213,8 @@ export default {
 
 .up {
   position: absolute;
-  top: -11px;
-  left: var(--space-normal);
+  top: var(--space-minus-smaller);
+  left: var(--space-slab);
 }
 
 .footer {
diff --git a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
index d887ecf7c..8ddd1b227 100644
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="context-menu">
     <woot-button
-      icon="ion-more"
-      size="large"
+      icon="more-vertical"
       class="button--delete-message"
       color-scheme="secondary"
       variant="link"
@@ -19,7 +18,8 @@
           <woot-button
             variant="clear"
             size="small"
-            icon="ion-ios-copy-outline"
+            icon="clipboard"
+            icon-size="16"
             @click="handleCopy"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.COPY') }}
@@ -30,7 +30,8 @@
             variant="clear"
             color-scheme="alert"
             size="small"
-            icon="ion-trash-a"
+            icon="delete"
+            icon-size="16"
             @click="handleDelete"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.DELETE') }}
diff --git a/app/javascript/dashboard/modules/notes/components/ContactNote.vue b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
index 93c9c656b..b208347c0 100644
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -19,7 +19,8 @@
           v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
           variant="smooth"
           size="tiny"
-          icon="ion-trash-b"
+          icon="delete"
+          icon-size="16"
           color-scheme="secondary"
           @click="onDelete"
         />
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
index 647baf65a..7f3c449a8 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -4,7 +4,7 @@
     :class="{ 'border-left': showAvatar }"
   >
     <span v-if="showAvatar" class="close-button" @click="onClose">
-      <i class="ion-android-close close-icon" />
+      <fluent-icon icon="dismiss" class="close-icon" />
     </span>
     <contact-info
       :show-avatar="showAvatar"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index 412b3f2fc..4b4b71c10 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -34,6 +34,7 @@ import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import timeMixin from 'dashboard/mixins/time';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 export default {
   components: {
@@ -228,7 +229,7 @@ export default {
                         rel="noopener noreferrer nofollow"
                         href={`https://${profile}.com/${profiles[profile]}`}
                       >
-                        <i class={`ion-social-${profile}`} />
+                        <FluentIcon icon={`brand-${profile}`} />
                       </a>
                     )
                 )}
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index f0118e17d..87d2e5177 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -8,7 +8,7 @@
       </div>
       <div class="right-aligned-wrap">
         <div class="search-wrap">
-          <i class="ion-ios-search-strong search-icon" />
+          <fluent-icon icon="search" class="search-icon" />
           <input
             type="text"
             :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
@@ -28,7 +28,7 @@
 
         <woot-button
           color-scheme="success"
-          icon="ion-android-add-circle"
+          icon="add-circle"
           class="margin-right-small"
           data-testid="create-new-contact"
           @click="onToggleCreate"
@@ -38,7 +38,7 @@
 
         <woot-button
           color-scheme="info"
-          icon="ion-android-upload"
+          icon="cloud-backup"
           @click="onToggleImport"
         >
           {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
index 49755d1d2..531e9141e 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue
@@ -25,7 +25,7 @@
           <woot-button
             variant="smooth"
             size="small"
-            icon="ion-compose"
+            icon="edit"
             color-scheme="secondary"
             class="action-button"
             @click="onEdit"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index b5bfa487a..70071999a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="medium-3 bg-white contact--panel">
-    <span class="close-button" @click="onPanelToggle">
-      <i class="ion-chevron-right" />
-    </span>
+    <woot-button
+      icon="chevron-right"
+      class="close-button clear secondary"
+      @click="onPanelToggle"
+    />
     <contact-info :contact="contact" :channel-type="channelType" />
     <draggable
       :list="conversationSidebarItems"
@@ -254,7 +256,7 @@ export default {
 .close-button {
   position: absolute;
   right: $space-two;
-  top: $space-slab + $space-two;
+  top: $space-slab;
   font-size: $font-size-default;
   color: $color-heading;
   z-index: 9989;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
index 550a155f0..d7ea2aa86 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue
@@ -8,7 +8,8 @@
         <template v-slot:button>
           <woot-button
             v-if="showSelfAssign"
-            icon="ion-arrow-right-c"
+            icon="arrow-right"
+            icon-size="14"
             variant="link"
             size="small"
             @click="onSelfAssign"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index eece99e32..f9402f359 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -18,7 +18,7 @@
             rel="noopener nofollow noreferrer"
           >
             {{ contact.name }}
-            <i class="ion-android-open open-link--icon" />
+            <fluent-icon size="16" icon="open" class="open-link--icon" />
           </a>
         </h3>
         <p v-if="additionalAttributes.description" class="contact--bio">
@@ -29,7 +29,7 @@
           <contact-info-row
             :href="contact.email ? `mailto:${contact.email}` : ''"
             :value="contact.email"
-            icon="ion-email"
+            icon="mail"
             emoji="✉️"
             :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
             show-copy
@@ -37,20 +37,20 @@
           <contact-info-row
             :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
             :value="contact.phone_number"
-            icon="ion-ios-telephone"
+            icon="call"
             emoji="📞"
             :title="$t('CONTACT_PANEL.PHONE_NUMBER')"
           />
           <contact-info-row
             :value="additionalAttributes.company_name"
-            icon="ion-briefcase"
+            icon="building-bank"
             emoji="🏢"
             :title="$t('CONTACT_PANEL.COMPANY')"
           />
           <contact-info-row
             v-if="location || additionalAttributes.location"
             :value="location || additionalAttributes.location"
-            icon="ion-map"
+            icon="map"
             emoji="🌍"
             :title="$t('CONTACT_PANEL.LOCATION')"
           />
@@ -62,7 +62,8 @@
           v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
           title="$t('CONTACT_PANEL.NEW_MESSAGE')"
           class="new-message"
-          icon="ion-chatboxes"
+          icon="chat"
+          icon-size="14"
           size="small expanded"
           @click="toggleConversationModal"
         />
@@ -70,7 +71,8 @@
           v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
           title="$t('EDIT_CONTACT.BUTTON_LABEL')"
           class="edit-contact"
-          icon="ion-edit"
+          icon="edit"
+          icon-size="14"
           variant="smooth"
           size="small expanded"
           @click="toggleEditModal"
@@ -80,7 +82,8 @@
           v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
           title="$t('CONTACT_PANEL.MERGE_CONTACT')"
           class="merge-contact"
-          icon="ion-merge"
+          icon="merge"
+          icon-size="14"
           variant="smooth"
           size="small expanded"
           color-scheme="secondary"
@@ -92,7 +95,8 @@
           v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
           title="$t('DELETE_CONTACT.BUTTON_LABEL')"
           class="delete-contact"
-          icon="ion-trash-a"
+          icon="delete"
+          icon-size="14"
           variant="smooth"
           size="small expanded"
           color-scheme="alert"
@@ -139,6 +143,7 @@ import { mixin as clickaway } from 'vue-clickaway';
 import ContactInfoRow from './ContactInfoRow';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from './SocialIcons';
+
 import EditContact from './EditContact';
 import NewConversation from './NewConversation';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal';
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
index 269ab1293..4711133e4 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="contact-info--row">
     <a v-if="href" :href="href" class="contact-info--details">
-      <emoji-or-icon :icon="icon" :emoji="emoji" />
+      <emoji-or-icon :icon="icon" :emoji="emoji" icon-size="14" />
       <span v-if="value" class="text-truncate" :title="value">{{ value }}</span>
       <span v-else class="text-muted">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
@@ -12,14 +12,15 @@
         type="submit"
         variant="link"
         color-scheme="secondary"
-        icon="ion-clipboard"
+        icon="clipboard"
+        icon-size="14"
         class-names="icon copy-icon"
         @click="onCopy"
       />
     </a>
 
     <div v-else class="contact-info--details">
-      <emoji-or-icon :icon="icon" :emoji="emoji" />
+      <emoji-or-icon :icon="icon" :emoji="emoji" icon-size="14" />
       <span v-if="value" class="text-truncate">{{ value }}</span>
       <span v-else class="text-muted">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
@@ -70,6 +71,8 @@ export default {
 </script>
 <style scoped lang="scss">
 .contact-info--row {
+  margin-left: var(--space-minus-smaller);
+
   .contact-info--icon {
     font-size: var(--font-size-default);
     min-width: var(--space-medium);
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
index ef309499c..644d1cbfb 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
@@ -8,7 +8,7 @@
       rel="noopener noreferrer nofollow"
       class="contact--social-icon"
     >
-      <i :class="`ion-social-${profile.icon}`" />
+      <fluent-icon :icon="`brand-${profile.key}`" size="16" />
     </a>
   </div>
 </template>
@@ -43,10 +43,10 @@ export default {
 
 <style scoped lang="scss">
 .social--icons {
-  margin-bottom: var(--space-small);
+  margin: var(--space-small) 0 var(--space-smaller);
 }
+
 .contact--social-icon {
-  font-size: var(--font-size-medium);
   padding-right: var(--space-slab);
   color: var(--color-body);
 }
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
index 365f45bfa..19a17c15f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue
@@ -28,7 +28,7 @@
         </div>
         <woot-button
           class="add"
-          icon="ion-plus-round"
+          icon="add"
           size="tiny"
           @click="addNewAttribute"
         >
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue
index c662df307..a0b11cabd 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue
@@ -8,7 +8,7 @@
       <woot-button
         size="small"
         variant="link"
-        icon="ion-plus"
+        icon="add"
         @click="toggleAttributeDropDown"
       >
         {{ $t('CUSTOM_ATTRIBUTES.ADD_BUTTON_TEXT') }}
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
index 566d4d74b..5ab0e9708 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue
@@ -3,7 +3,7 @@
     <div class="search" :class="{ 'is-active': showSearchBox }">
       <woot-sidemenu-icon />
       <div class="icon">
-        <i class="ion-ios-search-strong search--icon" />
+        <fluent-icon icon="search" class="search--icon" size="28" />
       </div>
       <input
         v-model="searchTerm"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue
index 30b95ed88..72a83cce6 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="search-result" @click="onClick">
     <div class="result-header">
-      <div class="message">
-        <i class="ion-ios-chatboxes-outline" />
+      <div class="conversation--block">
+        <fluent-icon icon="chat" class="icon--conversation-search-item" />
         <div class="conversation">
           <div class="user-wrap">
             <div class="name-wrap">
@@ -128,20 +128,20 @@ export default {
     .timestamp {
       color: var(--white);
     }
-    .ion-ios-chatboxes-outline {
+    .icon--conversation-search-item {
       color: var(--white);
     }
   }
 }
 
-.message {
+.conversation--block {
+  align-items: center;
   display: flex;
 }
 
-.ion-ios-chatboxes-outline {
+.icon--conversation-search-item {
   align-items: center;
   display: flex;
-  font-size: var(--font-size-large);
   color: var(--w-500);
 }
 
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue
index 09a3c6d00..3dd5d5cc0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue
@@ -5,7 +5,11 @@
         <div class="name-wrap">
           <span class="text-block-title">{{ userName }}</span>
           <div>
-            <i v-if="isOutgoingMessage" class="ion-headphone" />
+            <fluent-icon
+              v-if="isOutgoingMessage"
+              icon="arrow-reply"
+              class="icon-outgoing"
+            />
           </div>
         </div>
         <span class="timestamp">{{ readableTime }} </span>
@@ -84,7 +88,7 @@ export default {
       color: var(--white);
       text-decoration: underline;
     }
-    .ion-headphone {
+    .icon-outgoing {
       color: var(--white);
     }
   }
@@ -119,9 +123,8 @@ export default {
   }
 }
 
-.ion-headphone {
+.icon-outgoing {
   color: var(--w-500);
-  font-size: var(--font-size-mini);
   padding: var(--space-micro);
   padding-right: var(--space-smaller);
 }
diff --git a/app/javascript/dashboard/routes/dashboard/notifications/routes.js b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
index c4c3ea1ca..2c9a195ac 100644
--- a/app/javascript/dashboard/routes/dashboard/notifications/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/notifications/routes.js
@@ -9,7 +9,7 @@ export const routes = [
     component: SettingsWrapper,
     props: {
       headerTitle: 'NOTIFICATIONS_PAGE.HEADER',
-      icon: 'ion-ios-bell',
+      icon: 'alert',
       showNewButton: false,
     },
     children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 2f91e7087..064bf1191 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
@@ -7,7 +7,7 @@
         :button-label="backButtonLabel"
         :back-url="backUrl"
       />
-      <i v-if="icon" :class="iconClass"></i>
+      <fluent-icon v-if="icon" :icon="icon" :class="iconClass" />
       <slot></slot>
       <span>{{ headerTitle }}</span>
     </h1>
@@ -16,7 +16,7 @@
       :to="buttonRoute"
       class="button success button--fixed-right-top"
     >
-      <i class="icon ion-android-add-circle"></i>
+      <fluent-icon icon="add-circle" />
       <span class="button__content">
         {{ buttonText }}
       </span>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
index 70aff7c36..c2ef17129 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js
@@ -10,7 +10,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'GENERAL_SETTINGS.TITLE',
-        icon: 'ion-gear-a',
+        icon: 'settings',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
index f0b88bc4e..e01d33b5e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
@@ -45,7 +45,7 @@
           </div>
           <div class="medium-6 columns text-right">
             <woot-button
-              icon="ion-locked"
+              icon="lock-closed"
               variant="clear"
               @click.prevent="resetPassword"
             >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
index 38f07ea3f..307fe9c7d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
@@ -59,7 +59,7 @@
                       v-if="showEditAction(agent)"
                       variant="link"
                       color-scheme="secondary"
-                      icon="ion-edit"
+                      icon="edit"
                       class-names="grey-btn"
                       @click="openEditPopup(agent)"
                     >
@@ -69,7 +69,7 @@
                       v-if="showDeleteAction(agent)"
                       variant="link"
                       color-scheme="secondary"
-                      icon="ion-close-circled"
+                      icon="dismiss-circle"
                       class-names="grey-btn"
                       :is-loading="loading[agent.id]"
                       @click="openDeletePopup(agent, index)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
index ab1fde521..3bf4b6d2e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'AGENT_MGMT.HEADER',
-        icon: 'ion-person-stalker',
+        icon: 'people',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
index 648597012..62e79a2c1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
@@ -53,7 +53,7 @@
                   variant="link"
                   color-scheme="secondary"
                   class-names="grey-btn"
-                  icon="ion-edit"
+                  icon="edit"
                   @click="openEditPopup(attribute)"
                 >
                   {{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT') }}
@@ -61,7 +61,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   class-names="grey-btn"
                   @click="openDelete(attribute)"
                 >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index 1db0b15f1..fc7b6b6b5 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
index 87e47d8cd..a4430ff1e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'ATTRIBUTES_MGMT.HEADER',
-        icon: 'ion-code',
+        icon: 'code',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index dfade7e42..36d7d6be6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
     >
       {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
     </woot-button>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
index e5ca2c868..6d751c45a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'AUTOMATION.HEADER',
-        icon: 'ion-wrench',
+        icon: 'autocorrect',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
index b5efee44e..6dd24bd42 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue
@@ -24,9 +24,9 @@ import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import WootButton from 'dashboard/components/ui/WootButton.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
-import InboxIconWithName from 'dashboard/components/widgets/InboxIconWithName';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import timeMixin from 'dashboard/mixins/time';
+import InboxName from 'dashboard/components/widgets/InboxName';
 
 export default {
   components: {
@@ -131,7 +131,7 @@ export default {
           title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.INBOX'),
           align: 'left',
           renderBodyCell: ({ row }) => {
-            return <InboxIconWithName inbox={row.inbox} />;
+            return <InboxName inbox={row.inbox} />;
           },
         },
       ];
@@ -195,7 +195,7 @@ export default {
               <div class="button-wrapper">
                 <WootButton
                   variant="clear"
-                  icon="ion-edit"
+                  icon="edit"
                   color-scheme="secondary"
                   classNames="grey-btn"
                   onClick={() => this.$emit('on-edit-click', row)}
@@ -204,7 +204,7 @@ export default {
                 </WootButton>
                 <WootButton
                   variant="link"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   color-scheme="secondary"
                   onClick={() => this.$emit('on-delete-click', row)}
                 >
@@ -247,7 +247,7 @@ export default {
             <div class="button-wrapper">
               <WootButton
                 variant="link"
-                icon="ion-close-circled"
+                icon="dismiss-circle"
                 color-scheme="secondary"
                 onClick={() => this.$emit('on-delete-click', row)}
               >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
index 8719142fb..822c9cb88 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup"
     >
       {{ buttonText }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js b/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
index fce5b215b..4de15b068 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CAMPAIGN.ONGOING.HEADER',
-        icon: 'ion-arrow-swap',
+        icon: 'arrow-swap',
       },
       children: [
         {
@@ -29,7 +29,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CAMPAIGN.ONE_OFF.HEADER',
-        icon: 'ion-radio-waves',
+        icon: 'sound-source',
       },
       children: [
         {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
index 45841cb12..83adcd099 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
@@ -52,7 +52,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-edit"
+                  icon="edit"
                   class-names="grey-btn"
                   @click="openEditPopup(cannedItem)"
                 >
@@ -61,7 +61,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   class-names="grey-btn"
                   :is-loading="loading[cannedItem.id]"
                   @click="openDeletePopup(cannedItem, index)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
index 9e761f8f1..3b68de1db 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CANNED_MGMT.HEADER',
-        icon: 'ion-chatbox-working',
+        icon: 'chat-multiple',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
index 87e274956..c53f69701 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
@@ -68,7 +68,7 @@
                   >
                     <woot-button
                       v-if="isAdmin"
-                      icon="ion-gear-b"
+                      icon="settings"
                       variant="link"
                       color-scheme="secondary"
                       class-names="grey-btn"
@@ -83,7 +83,7 @@
                     color-scheme="secondary"
                     class-names="grey-btn"
                     :is-loading="loading[item.id]"
-                    icon="ion-close-circled"
+                    icon="dismiss-circle"
                     @click="openDelete(item)"
                   >
                     {{ $t('INBOX_MGMT.DELETE.BUTTON_TEXT') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
index 095657d54..50fc32fdb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
@@ -3,7 +3,7 @@
     <div class="login-init full-height text-center">
       <form @submit.prevent="requestAuthorization">
         <woot-submit-button
-          icon-class="ion-social-twitter"
+          icon="brand-twitter"
           button-text="Sign in with Twitter"
           type="submit"
           :loading="isRequestingAuthorization"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
index 9e6338605..a0701e2cb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
@@ -24,7 +24,7 @@
           :allow-empty="false"
         />
         <div class="separator-icon">
-          <i class="ion-minus-round" />
+          <fluent-icon icon="subtract" type="solid" size="16" />
         </div>
         <multiselect
           v-model="toTime"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
index 1766271f8..9423a915d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
@@ -19,7 +19,7 @@ export default {
         return {
           headerTitle: 'INBOX_MGMT.HEADER',
           headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
-          icon: 'ion-archive',
+          icon: 'mail-inbox-all',
           newButtonRoutes: ['settings_inbox_list'],
           showBackButton,
         };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
index 6d9c4395c..2c1b8579c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue
@@ -4,7 +4,7 @@
       v-if="showAddButton"
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddHookModal"
     >
       {{ $t('INTEGRATION_APPS.ADD_BUTTON') }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
index 10cd3586a..198f070ce 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
@@ -27,7 +27,7 @@
           )
         "
       >
-        <woot-button icon="ion-gear-b">
+        <woot-button icon="settings">
           {{ $t('INTEGRATION_APPS.CONFIGURE') }}
         </woot-button>
       </router-link>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
index 1f0d35daf..085ce63eb 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
@@ -26,7 +26,7 @@
               <woot-button
                 variant="link"
                 color-scheme="secondary"
-                icon="ion-close-circled"
+                icon="dismiss-circle"
                 class-names="grey-btn"
                 @click="$emit('delete', hook)"
               >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js
index c05982551..67f5a5f07 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js
@@ -16,7 +16,7 @@ export default {
             : '';
         return {
           headerTitle: 'INTEGRATION_APPS.HEADER',
-          icon: 'ion-asterisk',
+          icon: 'star-emphasis',
           showBackButton,
           backUrl,
         };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
index cabdc1b8b..99d172e4e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
@@ -31,7 +31,7 @@
                 :button-text="
                   $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
                 "
-                icon-class="ion-close-circled"
+                icon-class="dismiss-circle"
                 button-class="nice alert"
               />
             </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
index 04fb325f0..38e198cee 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
@@ -45,14 +45,14 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-edit"
+                  icon="edit"
                   @click="openEditPopup(webHookItem)"
                 >
                   {{ $t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT') }}
                 </woot-button>
                 <woot-button
                   variant="link"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   color-scheme="secondary"
                   @click="openDeletePopup(webHookItem, index)"
                 >
diff --git a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
index 0439033be..36596ad0e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js
@@ -17,7 +17,7 @@ export default {
             : '';
         return {
           headerTitle: 'INTEGRATION_SETTINGS.HEADER',
-          icon: 'ion-flash',
+          icon: 'flash-on',
           showBackButton,
           backUrl,
         };
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
index 67f416ffa..712d801e7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup"
     >
       {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
@@ -48,7 +48,7 @@
                   color-scheme="secondary"
                   class-names="grey-btn"
                   :is-loading="loading[label.id]"
-                  icon="ion-edit"
+                  icon="edit"
                   @click="openEditPopup(label)"
                 >
                   {{ $t('LABEL_MGMT.FORM.EDIT') }}
@@ -56,7 +56,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   class-names="grey-btn"
                   :is-loading="loading[label.id]"
                   @click="openDeletePopup(label, index)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
index eef8d301d..6424aaea4 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js
@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'LABEL_MGMT.HEADER',
-        icon: 'ion-pricetags',
+        icon: 'tag',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
index 55a33e2cc..032b13d6e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js
@@ -11,7 +11,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'GENERAL_SETTINGS.TITLE',
-        icon: 'ion-compose',
+        icon: 'edit',
         showNewButton: false,
       },
       children: [
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 236909ce3..e55259c2c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-download"
+      icon="arrow-download"
       @click="downloadAgentReports"
     >
       {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
@@ -116,7 +116,10 @@ export default {
     },
     downloadAgentReports() {
       const { from, to } = this;
-      const fileName = `agent-report-${format(fromUnixTime(to), 'dd-MM-yyyy')}.csv`;
+      const fileName = `agent-report-${format(
+        fromUnixTime(to),
+        'dd-MM-yyyy'
+      )}.csv`;
       this.$store.dispatch('downloadAgentReports', { from, to, fileName });
     },
     changeSelection(index) {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
index ed4b90b68..d24e95216 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
@@ -2,7 +2,12 @@
   <div class="medium-2 small-6 csat--metric-card">
     <h3 class="heading">
       <span>{{ label }}</span>
-      <i v-tooltip="infoText" class="csat--icon ion-ios-information" />
+      <fluent-icon
+        v-tooltip="infoText"
+        size="14"
+        icon="info"
+        class="csat--icon"
+      />
     </h3>
     <h4 class="metric">
       {{ value }}
@@ -34,7 +39,9 @@ export default {
     var(--space-two);
 
   .heading {
+    align-items: center;
     color: var(--color-heading);
+    display: flex;
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-bold);
     margin: 0;
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
index b5d4f889d..6b26f94b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-download"
+      icon="arrow-download"
       @click="downloadReports"
     >
       {{ downloadButtonLabel }}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index 4cb837af5..27f9a67ad 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -14,7 +14,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'REPORT.HEADER',
-        icon: 'ion-arrow-graph-up-right',
+        icon: 'arrow-trending-lines',
         keepAlive: false,
       },
       children: [
@@ -35,7 +35,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CSAT_REPORTS.HEADER',
-        icon: 'ion-happy-outline',
+        icon: 'emoji',
         keepAlive: false,
       },
       children: [
@@ -52,7 +52,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'AGENT_REPORTS.HEADER',
-        icon: 'ion-ios-people',
+        icon: 'people',
         keepAlive: false,
       },
       children: [
@@ -69,7 +69,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'LABEL_REPORTS.HEADER',
-        icon: 'ion-pricetags',
+        icon: 'tag',
         keepAlive: false,
       },
       children: [
@@ -86,7 +86,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'INBOX_REPORTS.HEADER',
-        icon: 'ion-archive',
+        icon: 'mail-inbox-all',
         keepAlive: false,
       },
       children: [
@@ -103,7 +103,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'TEAM_REPORTS.HEADER',
-        icon: 'ion-ios-people',
+        icon: 'people-team',
       },
       children: [
         {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
index 53b766021..f55169672 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
@@ -30,7 +30,7 @@
                       variant="link"
                       color-scheme="secondary"
                       class-names="grey-btn"
-                      icon="ion-gear-b"
+                      icon="settings"
                     >
                       {{ $t('TEAMS_SETTINGS.LIST.EDIT_TEAM') }}
                     </woot-button>
@@ -39,7 +39,7 @@
                     v-if="isAdmin"
                     variant="link"
                     color-scheme="secondary"
-                    icon="ion-close-circled"
+                    icon="dismiss-circle"
                     class-names="grey-btn"
                     :is-loading="loading[item.id]"
                     @click="openDelete(item)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
index 95429bd46..a04c60882 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js
@@ -20,7 +20,7 @@ export default {
         return {
           headerTitle: 'TEAMS_SETTINGS.HEADER',
           headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
-          icon: 'ion-ios-people',
+          icon: 'people-team',
           newButtonRoutes: ['settings_teams_new'],
           showBackButton,
         };
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 200e40c74..9b3875856 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -39,6 +39,7 @@ import {
   initializeAnalyticsEvents,
   initializeChatwootEvents,
 } from '../dashboard/helper/scriptHelpers';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 Vue.config.env = process.env;
 
@@ -73,6 +74,7 @@ Vue.use(hljs.vuePlugin);
 Vue.component('multiselect', Multiselect);
 Vue.component('woot-switch', WootSwitch);
 Vue.component('woot-wizard', WootWizard);
+Vue.component('fluent-icon', FluentIcon);
 
 const i18nConfig = new VueI18n({
   locale: 'en',
diff --git a/app/javascript/shared/components/EmojiOrIcon.vue b/app/javascript/shared/components/EmojiOrIcon.vue
index 0e9667912..be06100e0 100644
--- a/app/javascript/shared/components/EmojiOrIcon.vue
+++ b/app/javascript/shared/components/EmojiOrIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <i v-if="showWrap" :class="className">{{ iconContent }}</i>
+  <i v-if="showEmoji" :class="className">{{ iconContent }}</i>
+  <fluent-icon
+    v-else-if="showIcon"
+    :size="iconSize"
+    :icon="icon"
+    :class="className"
+  />
 </template>
 
 <script>
@@ -9,6 +15,7 @@ import { mapGetters } from 'vuex';
 export default {
   props: {
     icon: { type: String, default: '' },
+    iconSize: { type: [Number, String], default: 20 },
     emoji: { type: String, default: '' },
   },
   computed: {
@@ -23,9 +30,6 @@ export default {
     showIcon() {
       return !this.showEmoji && this.icon;
     },
-    showWrap() {
-      return this.showEmoji || this.showIcon;
-    },
     iconContent() {
       return this.showEmoji ? this.emoji : '';
     },
diff --git a/app/javascript/shared/components/FluentIcon/DashboardIcon.vue b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
new file mode 100644
index 000000000..c07b9a180
--- /dev/null
+++ b/app/javascript/shared/components/FluentIcon/DashboardIcon.vue
@@ -0,0 +1,35 @@
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path :d="icons[`${icon}-${type}`]" fill="currentColor" />
+  </svg>
+</template>
+<script>
+import icons from './dashboard-icons.json';
+
+export default {
+  name: 'FluentIcon',
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    size: {
+      type: [String, Number],
+      default: '20',
+    },
+    type: {
+      type: String,
+      default: 'outline',
+    },
+  },
+  data() {
+    return { icons };
+  },
+};
+</script>
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
new file mode 100644
index 000000000..e5e61793e
--- /dev/null
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -0,0 +1,85 @@
+{
+  "add-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 12 7Z",
+  "add-outline": "M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z",
+  "alert-outline": "M12 1.996a7.49 7.49 0 0 1 7.496 7.25l.004.25v4.097l1.38 3.156a1.25 1.25 0 0 1-1.145 1.75L15 18.502a3 3 0 0 1-5.995.177L9 18.499H4.275a1.251 1.251 0 0 1-1.147-1.747L4.5 13.594V9.496c0-4.155 3.352-7.5 7.5-7.5ZM13.5 18.5l-3 .002a1.5 1.5 0 0 0 2.993.145l.006-.147ZM12 3.496c-3.32 0-6 2.674-6 6v4.41L4.656 17h14.697L18 13.907V9.509l-.004-.225A5.988 5.988 0 0 0 12 3.496Z",
+  "arrow-download-outline": "M18.25 20.5a.75.75 0 1 1 0 1.5l-13 .004a.75.75 0 1 1 0-1.5l13-.004ZM11.648 2.012l.102-.007a.75.75 0 0 1 .743.648l.007.102-.001 13.685 3.722-3.72a.75.75 0 0 1 .976-.073l.085.073a.75.75 0 0 1 .072.976l-.073.084-4.997 4.997a.75.75 0 0 1-.976.073l-.085-.073-5.003-4.996a.75.75 0 0 1 .976-1.134l.084.072 3.719 3.714L11 2.755a.75.75 0 0 1 .648-.743l.102-.007-.102.007Z",
+  "arrow-redo-outline": "M19.25 2a.75.75 0 0 0-.743.648l-.007.102v5.69l-4.574-4.56a6.41 6.41 0 0 0-8.878-.179l-.186.18a6.41 6.41 0 0 0 0 9.063l8.845 8.84a.75.75 0 0 0 1.06-1.062l-8.845-8.838a4.91 4.91 0 0 1 6.766-7.112l.178.17L17.438 9.5H11.75a.75.75 0 0 0-.743.648L11 10.25c0 .38.282.694.648.743l.102.007h7.5a.75.75 0 0 0 .743-.648L20 10.25v-7.5a.75.75 0 0 0-.75-.75Z",
+  "arrow-reply-outline": "M9.277 16.221a.75.75 0 0 1-1.061 1.06l-4.997-5.003a.75.75 0 0 1 0-1.06L8.217 6.22a.75.75 0 0 1 1.061 1.06L5.557 11h7.842c1.595 0 2.81.242 3.889.764l.246.126a6.203 6.203 0 0 1 2.576 2.576c.61 1.14.89 2.418.89 4.135a.75.75 0 0 1-1.5 0c0-1.484-.228-2.52-.713-3.428a4.702 4.702 0 0 0-1.96-1.96c-.838-.448-1.786-.676-3.094-.709L13.4 12.5H5.562l3.715 3.721Z",
+  "arrow-right-outline": "M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z",
+  "arrow-swap-outline": "m14.783 2.22 4.495 4.494a.75.75 0 0 1 .073.976l-.072.085-4.495 4.504a.75.75 0 0 1-1.135-.975l.073-.084 3.217-3.223H5.243A.75.75 0 0 1 4.5 7.35l-.007-.101a.75.75 0 0 1 .648-.743l.102-.007 11.697-.001-3.218-3.217a.75.75 0 0 1-.072-.976l.072-.084a.75.75 0 0 1 .977-.073l.084.073 4.495 4.494-4.495-4.494ZM19.5 16.65l.006.1a.75.75 0 0 1-.648.744l-.102.007L7.063 17.5l3.22 3.22a.75.75 0 0 1 .074.976l-.073.084a.75.75 0 0 1-.976.073l-.085-.072-4.5-4.497a.75.75 0 0 1-.073-.976l.073-.084 4.5-4.504a.75.75 0 0 1 1.134.976l-.073.084L7.066 16h11.692a.75.75 0 0 1 .743.65l.006.1-.006-.1Z",
+  "arrow-trending-lines-outline": "M16.749 2h4.554l.1.014.099.028.06.026c.08.034.153.085.219.15l.04.044.044.057.054.09.039.09.019.064.014.064.009.095v4.532a.75.75 0 0 1-1.493.102l-.007-.102V4.559l-6.44 6.44a.75.75 0 0 1-.976.073L13 11 9.97 8.09l-5.69 5.689a.75.75 0 0 1-1.133-.977l.073-.084 6.22-6.22a.75.75 0 0 1 .976-.072l.084.072 3.03 2.91L19.438 3.5h-2.69a.75.75 0 0 1-.742-.648l-.007-.102a.75.75 0 0 1 .648-.743L16.75 2ZM3.75 17a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75Zm5.75-3.25a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0v-7.5ZM13.75 15a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5a.75.75 0 0 1 .75-.75Zm5.75-4.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Z",
+  "arrow-up-outline":"M4.21 10.733a.75.75 0 0 0 1.086 1.034l5.954-6.251V20.25a.75.75 0 0 0 1.5 0V5.516l5.955 6.251a.75.75 0 0 0 1.086-1.034l-7.067-7.42a.995.995 0 0 0-.58-.3.754.754 0 0 0-.29.001.995.995 0 0 0-.578.3L4.21 10.733Z",
+  "attach-outline": "M11.772 3.743a6 6 0 0 1 8.66 8.302l-.19.197-8.8 8.798-.036.03a3.723 3.723 0 0 1-5.489-4.973.764.764 0 0 1 .085-.13l.054-.06.086-.088.142-.148.002.003 7.436-7.454a.75.75 0 0 1 .977-.074l.084.073a.75.75 0 0 1 .074.976l-.073.084-7.594 7.613a2.23 2.23 0 0 0 3.174 3.106l8.832-8.83A4.502 4.502 0 0 0 13 4.644l-.168.16-.013.014-9.536 9.536a.75.75 0 0 1-1.133-.977l.072-.084 9.549-9.55h.002Z",
+  "autocorrect-outline": "M13.461 4.934c.293.184.548.42.752.698l.117.171 2.945 4.696H21.5a.75.75 0 0 1 .743.649l.007.102a.75.75 0 0 1-.75.75l-3.284-.001.006.009-.009-.01a4.75 4.75 0 1 1-3.463-1.5h.756L13.059 6.6a1.25 1.25 0 0 0-2.04-.112l-.078.112-7.556 12.048a.75.75 0 0 1-1.322-.699l.052-.098L9.67 5.803a2.75 2.75 0 0 1 3.791-.869ZM14.751 12a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z",
+  "book-contacts-outline": "M15.5 12.25a.75.75 0 0 0-.75-.75h-5a.75.75 0 0 0-.75.75v.5c0 1 1.383 1.75 3.25 1.75s3.25-.75 3.25-1.75v-.5ZM14 8.745C14 7.78 13.217 7 12.25 7s-1.75.779-1.75 1.745a1.75 1.75 0 1 0 3.5 0ZM4 4.5A2.5 2.5 0 0 1 6.5 2H18a2.5 2.5 0 0 1 2.5 2.5v14.25a.75.75 0 0 1-.75.75H5.5a1 1 0 0 0 1 1h13.25a.75.75 0 0 1 0 1.5H6.5A2.5 2.5 0 0 1 4 19.5v-15Zm1.5 0V18H19V4.5a1 1 0 0 0-1-1H6.5a1 1 0 0 0-1 1Z",
+  "building-bank-outline": "M13.032 2.325a1.75 1.75 0 0 0-2.064 0L3.547 7.74c-.978.713-.473 2.26.736 2.26H4.5v5.8A2.75 2.75 0 0 0 3 18.25v1.5c0 .413.336.75.75.75h16.5a.75.75 0 0 0 .75-.75v-1.5a2.75 2.75 0 0 0-1.5-2.45V10h.217c1.21 0 1.713-1.547.736-2.26l-7.421-5.416Zm-1.18 1.211a.25.25 0 0 1 .295 0L18.95 8.5H5.05l6.803-4.964ZM18 10v5.5h-2V10h2Zm-3.5 0v5.5h-1.75V10h1.75Zm-3.25 0v5.5H9.5V10h1.75Zm-5.5 7h12.5c.69 0 1.25.56 1.25 1.25V19h-15v-.75c0-.69.56-1.25 1.25-1.25ZM6 15.5V10h2v5.5H6Z",
+  "call-outline": "m7.056 2.418 1.167-.351a2.75 2.75 0 0 1 3.302 1.505l.902 2.006a2.75 2.75 0 0 1-.633 3.139L10.3 10.11a.25.25 0 0 0-.078.155c-.044.397.225 1.17.845 2.245.451.781.86 1.33 1.207 1.637.242.215.375.261.432.245l2.01-.615a2.75 2.75 0 0 1 3.034 1.02l1.281 1.776a2.75 2.75 0 0 1-.339 3.605l-.886.84a3.75 3.75 0 0 1-3.587.889c-2.754-.769-5.223-3.093-7.435-6.924-2.215-3.836-2.992-7.14-2.276-9.913a3.75 3.75 0 0 1 2.548-2.652Zm.433 1.437a2.25 2.25 0 0 0-1.529 1.59c-.602 2.332.087 5.261 2.123 8.788 2.033 3.522 4.222 5.582 6.54 6.23a2.25 2.25 0 0 0 2.151-.534l.887-.84a1.25 1.25 0 0 0 .154-1.639l-1.28-1.775a1.25 1.25 0 0 0-1.38-.464l-2.015.617c-1.17.348-2.232-.593-3.372-2.568C9 11.93 8.642 10.9 8.731 10.099c.047-.416.24-.8.546-1.086l1.494-1.393a1.25 1.25 0 0 0 .288-1.427l-.902-2.006a1.25 1.25 0 0 0-1.5-.684l-1.168.352Z",
+  "chat-multiple-outline": "M9.562 3a7.5 7.5 0 0 0-6.798 10.673l-.724 2.842a1.25 1.25 0 0 0 1.504 1.524c.75-.18 1.903-.457 2.93-.702A7.5 7.5 0 1 0 9.561 3Zm-6 7.5a6 6 0 1 1 3.33 5.375l-.244-.121-.264.063c-.923.22-1.99.475-2.788.667l.69-2.708.07-.276-.13-.253a5.971 5.971 0 0 1-.664-2.747Zm11 10.5c-1.97 0-3.762-.759-5.1-2h.1c.718 0 1.415-.089 2.08-.257.865.482 1.86.757 2.92.757.96 0 1.866-.225 2.67-.625l.243-.121.264.063c.922.22 1.966.445 2.74.61-.175-.751-.414-1.756-.642-2.651l-.07-.276.13-.253a5.971 5.971 0 0 0 .665-2.747 5.995 5.995 0 0 0-2.747-5.042 8.44 8.44 0 0 0-.8-2.047 7.503 7.503 0 0 1 4.344 10.263c.253 1.008.509 2.1.671 2.803a1.244 1.244 0 0 1-1.467 1.5 132.62 132.62 0 0 1-2.913-.64 7.476 7.476 0 0 1-3.088.663Z",
+  "chat-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.587-1.112l-3.826 1.067a1.25 1.25 0 0 1-1.54-1.54l1.068-3.823A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5A8.5 8.5 0 0 0 3.5 12c0 1.47.373 2.883 1.073 4.137l.15.27-1.112 3.984 3.987-1.112.27.15A8.5 8.5 0 1 0 12 3.5ZM8.75 13h4.498a.75.75 0 0 1 .102 1.493l-.102.007H8.75a.75.75 0 0 1-.102-1.493L8.75 13h4.498H8.75Zm0-3.5h6.505a.75.75 0 0 1 .101 1.493l-.101.007H8.75a.75.75 0 0 1-.102-1.493L8.75 9.5h6.505H8.75Z",
+  "checkmark-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-1.25 9.94 4.47-4.47a.75.75 0 0 1 1.133.976l-.073.084-5 5a.75.75 0 0 1-.976.073l-.084-.073-2.5-2.5a.75.75 0 0 1 .976-1.133l.084.073 1.97 1.97 4.47-4.47-4.47 4.47Z",
+  "checkmark-outline": "M4.53 12.97a.75.75 0 0 0-1.06 1.06l4.5 4.5a.75.75 0 0 0 1.06 0l11-11a.75.75 0 0 0-1.06-1.06L8.5 16.94l-3.97-3.97Z",
+  "chevron-down-outline": "M4.22 8.47a.75.75 0 0 1 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z",
+  "chevron-left-outline": "M15.53 4.22a.75.75 0 0 1 0 1.06L8.81 12l6.72 6.72a.75.75 0 1 1-1.06 1.06l-7.25-7.25a.75.75 0 0 1 0-1.06l7.25-7.25a.75.75 0 0 1 1.06 0Z",
+  "chevron-right-outline": "M8.293 4.293a1 1 0 0 0 0 1.414L14.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414l7-7a1 1 0 0 0 0-1.414l-7-7a1 1 0 0 0-1.414 0Z",
+  "chevron-up-outline": "M4.22 15.53a.75.75 0 0 0 1.06 0L12 8.81l6.72 6.72a.75.75 0 1 0 1.06-1.06l-7.25-7.25a.75.75 0 0 0-1.06 0l-7.25 7.25a.75.75 0 0 0 0 1.06Z",
+  "clipboard-outline": "M13.75 2a2.25 2.25 0 0 1 2.245 2.096L16 4.25c0-.085-.005-.168-.014-.25h1.764A2.25 2.25 0 0 1 20 6.25v13.5A2.25 2.25 0 0 1 17.75 22H6.25A2.25 2.25 0 0 1 4 19.75V6.25A2.25 2.25 0 0 1 6.25 4h1.764c-.007.058-.01.117-.013.176L8 4.25A2.25 2.25 0 0 1 10.25 2h3.5Zm0 4.5h-3.5a2.248 2.248 0 0 1-1.892-1.033l.021.033H6.25a.75.75 0 0 0-.75.75v13.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75V6.25a.75.75 0 0 0-.75-.75h-2.129l.021-.033A2.248 2.248 0 0 1 13.75 6.5Zm0-3h-3.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5Z",
+  "cloud-backup-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-6-1.793V19.5a.5.5 0 0 0 1 0v-4.793l1.646 1.647a.5.5 0 0 0 .708-.708l-2.5-2.5a.5.5 0 0 0-.708 0l-2.5 2.5a.5.5 0 0 0 .708.708L16 14.707Z",
+  "cloud-outline": "M6.087 9.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 0 8H6a4 4 0 0 1 0-8h.087ZM11.75 6.5a4.25 4.25 0 0 0-4.245 4.037.75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h11.5a2.5 2.5 0 0 0 0-5h-.756a.75.75 0 0 1-.75-.713A4.25 4.25 0 0 0 11.75 6.5Z",
+  "code-outline": "m8.066 18.943 6.5-14.5a.75.75 0 0 1 1.404.518l-.036.096-6.5 14.5a.75.75 0 0 1-1.404-.518l.036-.096 6.5-14.5-6.5 14.5ZM2.22 11.47l4.25-4.25a.75.75 0 0 1 1.133.976l-.073.085L3.81 12l3.72 3.719a.75.75 0 0 1-.976 1.133l-.084-.073-4.25-4.25a.75.75 0 0 1-.073-.976l.073-.084 4.25-4.25-4.25 4.25Zm14.25-4.25a.75.75 0 0 1 .976-.073l.084.073 4.25 4.25a.75.75 0 0 1 .073.976l-.073.085-4.25 4.25a.75.75 0 0 1-1.133-.977l.073-.084L20.19 12l-3.72-3.72a.75.75 0 0 1 0-1.06Z",
+  "contact-card-group-outline": "M18.75 4A3.25 3.25 0 0 1 22 7.25v9.505a3.25 3.25 0 0 1-3.25 3.25H5.25A3.25 3.25 0 0 1 2 16.755V7.25a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5Zm0 1.5H5.25l-.144.006A1.75 1.75 0 0 0 3.5 7.25v9.505c0 .966.784 1.75 1.75 1.75h13.5a1.75 1.75 0 0 0 1.75-1.75V7.25a1.75 1.75 0 0 0-1.75-1.75Zm-9.497 7a.75.75 0 0 1 .75.75v.582c0 1.272-.969 1.918-2.502 1.918S5 15.104 5 13.831v-.581a.75.75 0 0 1 .75-.75h3.503Zm1.58-.001 1.417.001a.75.75 0 0 1 .75.75v.333c0 .963-.765 1.417-1.875 1.417-.116 0-.229-.005-.337-.015a2.85 2.85 0 0 0 .206-.9l.009-.253v-.582c0-.269-.061-.524-.17-.751Zm4.417.001h3a.75.75 0 0 1 .102 1.493L18.25 14h-3a.75.75 0 0 1-.102-1.493l.102-.007h3-3Zm-7.75-4a1.5 1.5 0 1 1 0 3.001 1.5 1.5 0 0 1 0-3.001Zm3.87.502a1.248 1.248 0 1 1 0 2.496 1.248 1.248 0 0 1 0-2.496Zm3.88.498h3a.75.75 0 0 1 .102 1.493L18.25 11h-3a.75.75 0 0 1-.102-1.493l.102-.007h3-3Z",
+  "delete-outline": "M12 1.75a3.25 3.25 0 0 1 3.245 3.066L15.25 5h5.25a.75.75 0 0 1 .102 1.493L20.5 6.5h-.796l-1.28 13.02a2.75 2.75 0 0 1-2.561 2.474l-.176.006H8.313a2.75 2.75 0 0 1-2.714-2.307l-.023-.174L4.295 6.5H3.5a.75.75 0 0 1-.743-.648L2.75 5.75a.75.75 0 0 1 .648-.743L3.5 5h5.25A3.25 3.25 0 0 1 12 1.75Zm6.197 4.75H5.802l1.267 12.872a1.25 1.25 0 0 0 1.117 1.122l.127.006h7.374c.6 0 1.109-.425 1.225-1.002l.02-.126L18.196 6.5ZM13.75 9.25a.75.75 0 0 1 .743.648L14.5 10v7a.75.75 0 0 1-1.493.102L13 17v-7a.75.75 0 0 1 .75-.75Zm-3.5 0a.75.75 0 0 1 .743.648L11 10v7a.75.75 0 0 1-1.493.102L9.5 17v-7a.75.75 0 0 1 .75-.75Zm1.75-6a1.75 1.75 0 0 0-1.744 1.606L10.25 5h3.5A1.75 1.75 0 0 0 12 3.25Z",
+  "dismiss-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm3.446 4.897.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 12l2.47 2.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-2.47 2.47a.75.75 0 0 1-.976.072l-.084-.073a.75.75 0 0 1-.073-.976l.073-.084L10.939 12l-2.47-2.47a.75.75 0 0 1-.072-.976l.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l2.47-2.47a.75.75 0 0 1 .976-.072Z",
+  "dismiss-outline": "m4.397 4.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 10.939l6.47-6.47a.75.75 0 1 1 1.06 1.061L13.061 12l6.47 6.47a.75.75 0 0 1 .072.976l-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 13.061l-6.47 6.47a.75.75 0 0 1-1.06-1.061L10.939 12l-6.47-6.47a.75.75 0 0 1-.072-.976l.073-.084-.073.084Z",
+  "document-outline": "M18.5 20a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10Zm-5-15.379L17.378 8.5H14a.5.5 0 0 1-.5-.5V4.621Zm5.914 3.793-5.829-5.828c-.026-.026-.058-.046-.085-.07a2.072 2.072 0 0 0-.219-.18c-.04-.027-.086-.045-.128-.068-.071-.04-.141-.084-.216-.116a1.977 1.977 0 0 0-.624-.138C12.266 2.011 12.22 2 12.172 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414Z",
+  "edit-outline": "M21.03 2.97a3.578 3.578 0 0 1 0 5.06L9.062 20a2.25 2.25 0 0 1-.999.58l-5.116 1.395a.75.75 0 0 1-.92-.921l1.395-5.116a2.25 2.25 0 0 1 .58-.999L15.97 2.97a3.578 3.578 0 0 1 5.06 0ZM15 6.06 5.062 16a.75.75 0 0 0-.193.333l-1.05 3.85 3.85-1.05A.75.75 0 0 0 8 18.938L17.94 9 15 6.06Zm2.03-2.03-.97.97L19 7.94l.97-.97a2.079 2.079 0 0 0-2.94-2.94Z",
+  "emoji-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5ZM8.462 14.784A4.491 4.491 0 0 0 12 16.502a4.492 4.492 0 0 0 3.535-1.714.75.75 0 1 1 1.177.93A5.991 5.991 0 0 1 12 18.002a5.991 5.991 0 0 1-4.716-2.29.75.75 0 0 1 1.178-.928ZM9 8.75a1.25 1.25 0 1 1 0 2.499A1.25 1.25 0 0 1 9 8.75Zm6 0a1.25 1.25 0 1 1 0 2.499 1.25 1.25 0 0 1 0-2.499Z",
+  "error-circle-outline": "M12 2c5.523 0 10 4.478 10 10s-4.477 10-10 10S2 17.522 2 12 6.477 2 12 2Zm0 1.667c-4.595 0-8.333 3.738-8.333 8.333 0 4.595 3.738 8.333 8.333 8.333 4.595 0 8.333-3.738 8.333-8.333 0-4.595-3.738-8.333-8.333-8.333Zm-.001 10.835a.999.999 0 1 1 0 1.998.999.999 0 0 1 0-1.998ZM11.994 7a.75.75 0 0 1 .744.648l.007.101.004 4.502a.75.75 0 0 1-1.493.103l-.007-.102-.004-4.501a.75.75 0 0 1 .75-.751Z",
+  "filter-outline": "M13.5 16a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h3Zm3-5a.75.75 0 0 1 0 1.5h-9a.75.75 0 0 1 0-1.5h9Zm3-5a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1 0-1.5h15Z",
+  "flash-on-outline": "m8.294 14-1.767 7.068c-.187.746.736 1.256 1.269.701L19.79 9.27A.75.75 0 0 0 19.25 8h-4.46l1.672-5.013A.75.75 0 0 0 15.75 2h-7a.75.75 0 0 0-.721.544l-3 10.5A.75.75 0 0 0 5.75 14h2.544Zm4.745-5.487a.75.75 0 0 0 .711.987h3.74l-8.824 9.196 1.316-5.264a.75.75 0 0 0-.727-.932h-2.51l2.57-9h5.394l-1.67 5.013Z",
+  "folder-outline": "M8.207 4c.46 0 .908.141 1.284.402l.156.12L12.022 6.5h7.728a2.25 2.25 0 0 1 2.229 1.938l.016.158.005.154v9a2.25 2.25 0 0 1-2.096 2.245L19.75 20H4.25a2.25 2.25 0 0 1-2.245-2.096L2 17.75V6.25a2.25 2.25 0 0 1 2.096-2.245L4.25 4h3.957Zm1.44 5.979a2.25 2.25 0 0 1-1.244.512l-.196.009-4.707-.001v7.251c0 .38.282.694.648.743l.102.007h15.5a.75.75 0 0 0 .743-.648l.007-.102v-9a.75.75 0 0 0-.648-.743L19.75 8h-7.729L9.647 9.979ZM8.207 5.5H4.25a.75.75 0 0 0-.743.648L3.5 6.25v2.749L8.207 9a.75.75 0 0 0 .395-.113l.085-.06 1.891-1.578-1.89-1.575a.75.75 0 0 0-.377-.167L8.207 5.5Z",
+  "globe-desktop-outline": "M22.002 12C22.002 6.477 17.524 2 12 2 6.476 1.999 2 6.477 2 12.001c0 5.186 3.947 9.45 9.001 9.952V20.11c-.778-.612-1.478-1.905-1.939-3.61h1.94V15H8.737a18.969 18.969 0 0 1-.135-5h6.794c.068.64.105 1.31.105 2h1.5c0-.684-.033-1.353-.095-2h3.358c.154.64.237 1.31.237 2h1.5ZM4.786 16.5h2.722l.102.396c.317 1.17.748 2.195 1.27 3.015a8.532 8.532 0 0 1-4.094-3.41ZM3.736 10h3.358a20.847 20.847 0 0 0-.095 2c0 1.043.075 2.051.217 3H4.043a8.483 8.483 0 0 1-.544-3c0-.682.08-1.347.232-1.983L3.736 10Zm5.122-5.902.023-.008C8.16 5.222 7.611 6.748 7.298 8.5H4.25c.905-2 2.56-3.587 4.608-4.402Zm3.026-.594L12 3.5l.126.006c1.262.126 2.48 2.125 3.045 4.995H8.83c.568-2.878 1.79-4.88 3.055-4.996Zm3.343.76-.107-.174.291.121a8.533 8.533 0 0 1 4.339 4.29h-3.048c-.298-1.665-.806-3.125-1.475-4.237Z M12 19a1 1 0 0 0 1 1h3v2h-.5a.5.5 0 1 0 0 1h4a.5.5 0 0 0 0-1H19v-2h3a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1h-9a1 1 0 0 0-1 1v5Z",
+  "headphones-sound-wave-outline": "M3.5 12a8.5 8.5 0 0 1 17 0v2h-2.25a.75.75 0 0 0-.75.75v6.5c0 .414.336.75.75.75H19a3 3 0 0 0 3-3v-7c0-5.523-4.477-10-10-10S2 6.477 2 12v7a3 3 0 0 0 3 3h.75a.75.75 0 0 0 .75-.75v-6.5a.75.75 0 0 0-.75-.75H3.5v-2Zm17 3.5V19a1.5 1.5 0 0 1-1.5 1.5v-5h1.5ZM3.5 19v-3.5H5v5A1.5 1.5 0 0 1 3.5 19Zm9.25-7.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Zm-4 2.25a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5a.75.75 0 0 1 .75-.75Zm7.25.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z",
+  "image-outline": "M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z",
+  "info-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5Zm-.004 7a.75.75 0 0 1 .744.648l.007.102.003 5.502a.75.75 0 0 1-1.493.102l-.007-.101-.003-5.502a.75.75 0 0 1 .75-.75ZM12 7.003a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997Z",
+  "link-outline": "M9.25 7a.75.75 0 0 1 .11 1.492l-.11.008H7a3.5 3.5 0 0 0-.206 6.994L7 15.5h2.25a.75.75 0 0 1 .11 1.492L9.25 17H7a5 5 0 0 1-.25-9.994L7 7h2.25ZM17 7a5 5 0 0 1 .25 9.994L17 17h-2.25a.75.75 0 0 1-.11-1.492l.11-.008H17a3.5 3.5 0 0 0 .206-6.994L17 8.5h-2.25a.75.75 0 0 1-.11-1.492L14.75 7H17ZM7 11.25h10a.75.75 0 0 1 .102 1.493L17 12.75H7a.75.75 0 0 1-.102-1.493L7 11.25h10H7Z",
+  "list-outline": "M2.75 18h12.5a.75.75 0 0 1 .102 1.493l-.102.007H2.75a.75.75 0 0 1-.102-1.494L2.75 18h12.5-12.5Zm0-6.5h18.5a.75.75 0 0 1 .102 1.493L21.25 13H2.75a.75.75 0 0 1-.102-1.493l.102-.007h18.5-18.5Zm0-6.497h15.5a.75.75 0 0 1 .102 1.493l-.102.007H2.75a.75.75 0 0 1-.102-1.493l.102-.007h15.5-15.5Z",
+  "location-outline": "M5.843 4.568a8.707 8.707 0 1 1 12.314 12.314l-1.187 1.174c-.875.858-2.01 1.962-3.406 3.312a2.25 2.25 0 0 1-3.128 0l-3.491-3.396c-.439-.431-.806-.794-1.102-1.09a8.707 8.707 0 0 1 0-12.314Zm11.253 1.06A7.207 7.207 0 1 0 6.904 15.822L8.39 17.29a753.98 753.98 0 0 0 3.088 3 .75.75 0 0 0 1.043 0l3.394-3.3c.47-.461.863-.85 1.18-1.168a7.207 7.207 0 0 0 0-10.192ZM12 7.999a3.002 3.002 0 1 1 0 6.004 3.002 3.002 0 0 1 0-6.003Zm0 1.5a1.501 1.501 0 1 0 0 3.004 1.501 1.501 0 0 0 0-3.003Z",
+  "lock-closed-outline": "M12 2a4 4 0 0 1 4 4v2h1.75A2.25 2.25 0 0 1 20 10.25v9.5A2.25 2.25 0 0 1 17.75 22H6.25A2.25 2.25 0 0 1 4 19.75v-9.5A2.25 2.25 0 0 1 6.25 8H8V6a4 4 0 0 1 4-4Zm5.75 7.5H6.25a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75Zm-5.75 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-10A2.5 2.5 0 0 0 9.5 6v2h5V6A2.5 2.5 0 0 0 12 3.5Z",
+  "mail-inbox-all-outline": "M6.25 3h11.5a3.25 3.25 0 0 1 3.245 3.066L21 6.25v11.5a3.25 3.25 0 0 1-3.066 3.245L17.75 21H6.25a3.25 3.25 0 0 1-3.245-3.066L3 17.75V6.25a3.25 3.25 0 0 1 3.066-3.245L6.25 3Zm2.075 11.5H4.5v3.25a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V14.5h-3.825a3.752 3.752 0 0 1-3.475 2.995l-.2.005a3.752 3.752 0 0 1-3.632-2.812l-.043-.188Zm9.425-10H6.25a1.75 1.75 0 0 0-1.744 1.606L4.5 6.25V13H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.495.154l.005-.154a.75.75 0 0 1 .648-.743L15 13h4.5V6.25a1.75 1.75 0 0 0-1.607-1.744L17.75 4.5Zm-11 5h10.5a.75.75 0 0 1 .102 1.493L17.25 11H6.75a.75.75 0 0 1-.102-1.493L6.75 9.5h10.5-10.5Zm0-3h10.5a.75.75 0 0 1 .102 1.493L17.25 8H6.75a.75.75 0 0 1-.102-1.493L6.75 6.5h10.5-10.5Z",
+  "mail-outline":"M5.25 4h13.5a3.25 3.25 0 0 1 3.245 3.066L22 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5-13.5ZM20.5 9.373l-8.15 4.29a.75.75 0 0 1-.603.043l-.096-.042L3.5 9.374v7.376a1.75 1.75 0 0 0 1.606 1.744l.144.006h13.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.373ZM18.75 5.5H5.25a1.75 1.75 0 0 0-1.744 1.606L3.5 7.25v.429l8.5 4.473 8.5-4.474V7.25a1.75 1.75 0 0 0-1.607-1.744L18.75 5.5Z",
+  "map-outline": "m9.203 4 .047-.002.046.001a.73.73 0 0 1 .067.007l.016.004c.086.014.17.044.252.092l.051.034 5.07 3.565L19.82 4.14a.75.75 0 0 1 1.174.51l.007.104v10.632a.75.75 0 0 1-.238.548l-.08.066-5.5 3.866a.744.744 0 0 1-.828.023L9.25 16.297l-5.07 3.565a.75.75 0 0 1-1.174-.51l-.007-.104V8.616a.75.75 0 0 1 .238-.548l.08-.066 5.5-3.866a.762.762 0 0 1 .2-.101l.122-.028.064-.008Zm10.298 2.197-4 2.812v8.799l4-2.812v-8.8ZM8.5 6.193l-4 2.812v8.8l4-2.813V6.193Zm1.502 0v8.8l4 2.811V9.005l-4-2.812Z",
+  "megaphone-outline":"M21.907 5.622c.062.208.093.424.093.641V17.74a2.25 2.25 0 0 1-2.891 2.156l-5.514-1.64a4.002 4.002 0 0 1-7.59-1.556L6 16.5l-.001-.5-2.39-.711A2.25 2.25 0 0 1 2 13.131V10.87a2.25 2.25 0 0 1 1.61-2.156l15.5-4.606a2.25 2.25 0 0 1 2.797 1.515ZM7.499 16.445l.001.054a2.5 2.5 0 0 0 4.624 1.321l-4.625-1.375Zm12.037-10.9-15.5 4.605a.75.75 0 0 0-.536.72v2.261a.75.75 0 0 0 .536.72l15.5 4.607a.75.75 0 0 0 .964-.72V6.264a.75.75 0 0 0-.964-.719Z",
+  "merge-outline": "M3 6.75A.75.75 0 0 1 3.75 6h4.5a.75.75 0 0 1 .53.22L13.56 11h5.878L15.72 7.28a.75.75 0 1 1 1.06-1.06l4.998 5a.75.75 0 0 1 0 1.06l-4.998 5a.75.75 0 1 1-1.06-1.06l3.718-3.72H13.56l-4.78 4.78a.75.75 0 0 1-.531.22h-4.5a.75.75 0 0 1 0-1.5h4.19l4.25-4.25L7.94 7.5H3.75A.75.75 0 0 1 3 6.75Z",
+  "more-horizontal-outline": "M7.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM13.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM18 13.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z",
+  "more-vertical-outline": "M12 7.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5ZM12 13.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5ZM10.25 18a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Z",
+  "number-symbol-outline": "M10.987 2.89a.75.75 0 1 0-1.474-.28L8.494 7.999 3.75 8a.75.75 0 1 0 0 1.5l4.46-.002-.946 5-4.514.002a.75.75 0 0 0 0 1.5l4.23-.002-.967 5.116a.75.75 0 1 0 1.474.278l1.02-5.395 5.474-.002-.968 5.119a.75.75 0 1 0 1.474.278l1.021-5.398 4.742-.002a.75.75 0 1 0 0-1.5l-4.458.002.946-5 4.512-.002a.75.75 0 1 0 0-1.5l-4.229.002.966-5.104a.75.75 0 0 0-1.474-.28l-1.018 5.385-5.474.002.966-5.107Zm-1.25 6.608 5.474-.003-.946 5-5.474.002.946-5Z",
+  "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
+  "people-outline": "M4 13.999 13 14a2 2 0 0 1 1.995 1.85L15 16v1.5C14.999 21 11.284 22 8.5 22c-2.722 0-6.335-.956-6.495-4.27L2 17.5v-1.501c0-1.054.816-1.918 1.85-1.995L4 14ZM15.22 14H20c1.054 0 1.918.816 1.994 1.85L22 16v1c-.001 3.062-2.858 4-5 4a7.16 7.16 0 0 1-2.14-.322c.336-.386.607-.827.802-1.327A6.19 6.19 0 0 0 17 19.5l.267-.006c.985-.043 3.086-.363 3.226-2.289L20.5 17v-1a.501.501 0 0 0-.41-.492L20 15.5h-4.051a2.957 2.957 0 0 0-.595-1.34L15.22 14H20h-4.78ZM4 15.499l-.1.01a.51.51 0 0 0-.254.136.506.506 0 0 0-.136.253l-.01.101V17.5c0 1.009.45 1.722 1.417 2.242.826.445 2.003.714 3.266.753l.317.005.317-.005c1.263-.039 2.439-.308 3.266-.753.906-.488 1.359-1.145 1.412-2.057l.005-.186V16a.501.501 0 0 0-.41-.492L13 15.5l-9-.001ZM8.5 3a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm9 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm-9-.5c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3Zm9 2c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2Z",
+  "people-team-outline": "M14.754 10c.966 0 1.75.784 1.75 1.75v4.749a4.501 4.501 0 0 1-9.002 0V11.75c0-.966.783-1.75 1.75-1.75h5.502Zm0 1.5H9.252a.25.25 0 0 0-.25.25v4.749a3.001 3.001 0 0 0 6.002 0V11.75a.25.25 0 0 0-.25-.25ZM3.75 10h3.381a2.738 2.738 0 0 0-.618 1.5H3.75a.25.25 0 0 0-.25.25v3.249a2.501 2.501 0 0 0 3.082 2.433c.085.504.24.985.453 1.432A4.001 4.001 0 0 1 2 14.999V11.75c0-.966.784-1.75 1.75-1.75Zm13.125 0h3.375c.966 0 1.75.784 1.75 1.75V15a4 4 0 0 1-5.03 3.866c.214-.448.369-.929.455-1.433A2.5 2.5 0 0 0 20.5 15v-3.25a.25.25 0 0 0-.25-.25h-2.757a2.738 2.738 0 0 0-.618-1.5ZM12 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm6.5 1a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-13 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm6.5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6.5 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-13 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
+  "person-outline": "M17.754 14a2.249 2.249 0 0 1 2.25 2.249v.575c0 .894-.32 1.76-.902 2.438-1.57 1.834-3.957 2.739-7.102 2.739-3.146 0-5.532-.905-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.577a2.249 2.249 0 0 1 2.249-2.25h11.501Zm0 1.5H6.253a.749.749 0 0 0-.75.749v.577c0 .536.192 1.054.54 1.461 1.253 1.468 3.219 2.214 5.957 2.214s4.706-.746 5.962-2.214a2.25 2.25 0 0 0 .541-1.463v-.575a.749.749 0 0 0-.749-.75ZM12 2.004a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z",
+  "quote-outline": "M7.5 6a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.555-1.24 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.64-1.737 2.66-3.674 3.077-5.859A2.5 2.5 0 1 1 7.5 6Zm9 0a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.56-1.238 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.643-1.738 2.662-3.672 3.078-5.859A2.5 2.5 0 1 1 16.5 6Zm-9 1.5a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Zm9 0a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Z",
+  "resize-large-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5A3.25 3.25 0 0 1 6.25 3h1.5a.75.75 0 0 1 0 1.5h-1.5ZM19.5 6.25a1.75 1.75 0 0 0-1.75-1.75h-1.5a.75.75 0 0 1 0-1.5h1.5A3.25 3.25 0 0 1 21 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5ZM19.5 17.75a1.75 1.75 0 0 1-1.75 1.75h-1.5a.75.75 0 0 0 0 1.5h1.5A3.25 3.25 0 0 0 21 17.75v-1.5a.75.75 0 0 0-1.5 0v1.5ZM4.5 17.75c0 .966.784 1.75 1.75 1.75h1.5a.75.75 0 0 1 0 1.5h-1.5A3.25 3.25 0 0 1 3 17.75v-1.5a.75.75 0 0 1 1.5 0v1.5ZM8.25 6A2.25 2.25 0 0 0 6 8.25v7.5A2.25 2.25 0 0 0 8.25 18h7.5A2.25 2.25 0 0 0 18 15.75v-7.5A2.25 2.25 0 0 0 15.75 6h-7.5ZM7.5 8.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75v-7.5Z",
+  "search-outline": "M10 2.75a7.25 7.25 0 0 1 5.63 11.819l4.9 4.9a.75.75 0 0 1-.976 1.134l-.084-.073-4.901-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Z",
+  "send-outline": "M5.694 12 2.299 3.272c-.236-.607.356-1.188.942-.982l.093.04 18 9a.75.75 0 0 1 .097 1.283l-.097.058-18 9c-.583.291-1.217-.244-1.065-.847l.03-.096L5.694 12 2.299 3.272 5.694 12ZM4.402 4.54l2.61 6.71h6.627a.75.75 0 0 1 .743.648l.007.102a.75.75 0 0 1-.649.743l-.101.007H7.01l-2.609 6.71L19.322 12 4.401 4.54Z",
+  "settings-outline": "M12.012 2.25c.734.008 1.465.093 2.182.253a.75.75 0 0 1 .582.649l.17 1.527a1.384 1.384 0 0 0 1.927 1.116l1.401-.615a.75.75 0 0 1 .85.174 9.792 9.792 0 0 1 2.204 3.792.75.75 0 0 1-.271.825l-1.242.916a1.381 1.381 0 0 0 0 2.226l1.243.915a.75.75 0 0 1 .272.826 9.797 9.797 0 0 1-2.204 3.792.75.75 0 0 1-.848.175l-1.407-.617a1.38 1.38 0 0 0-1.926 1.114l-.169 1.526a.75.75 0 0 1-.572.647 9.518 9.518 0 0 1-4.406 0 .75.75 0 0 1-.572-.647l-.168-1.524a1.382 1.382 0 0 0-1.926-1.11l-1.406.616a.75.75 0 0 1-.849-.175 9.798 9.798 0 0 1-2.204-3.796.75.75 0 0 1 .272-.826l1.243-.916a1.38 1.38 0 0 0 0-2.226l-1.243-.914a.75.75 0 0 1-.271-.826 9.793 9.793 0 0 1 2.204-3.792.75.75 0 0 1 .85-.174l1.4.615a1.387 1.387 0 0 0 1.93-1.118l.17-1.526a.75.75 0 0 1 .583-.65c.717-.159 1.45-.243 2.201-.252Zm0 1.5a9.135 9.135 0 0 0-1.354.117l-.109.977A2.886 2.886 0 0 1 6.525 7.17l-.898-.394a8.293 8.293 0 0 0-1.348 2.317l.798.587a2.881 2.881 0 0 1 0 4.643l-.799.588c.32.842.776 1.626 1.348 2.322l.905-.397a2.882 2.882 0 0 1 4.017 2.318l.11.984c.889.15 1.798.15 2.687 0l.11-.984a2.881 2.881 0 0 1 4.018-2.322l.905.396a8.296 8.296 0 0 0 1.347-2.318l-.798-.588a2.881 2.881 0 0 1 0-4.643l.796-.587a8.293 8.293 0 0 0-1.348-2.317l-.896.393a2.884 2.884 0 0 1-4.023-2.324l-.11-.976a8.988 8.988 0 0 0-1.333-.117ZM12 8.25a3.75 3.75 0 1 1 0 7.5 3.75 3.75 0 0 1 0-7.5Zm0 1.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z",
+  "share-outline": "M6.747 4h3.464a.75.75 0 0 1 .102 1.493l-.102.007H6.747a2.25 2.25 0 0 0-2.245 2.096l-.005.154v9.5a2.25 2.25 0 0 0 2.096 2.245l.154.005h9.5a2.25 2.25 0 0 0 2.245-2.096l.005-.154v-.498a.75.75 0 0 1 1.494-.101l.006.101v.498a3.75 3.75 0 0 1-3.55 3.745l-.2.005h-9.5a3.75 3.75 0 0 1-3.745-3.55l-.005-.2v-9.5a3.75 3.75 0 0 1 3.55-3.745l.2-.005h3.464-3.464ZM14.5 6.52V3.75a.75.75 0 0 1 1.187-.61l.082.069 5.994 5.75c.28.268.306.7.077.997l-.077.085-5.994 5.752a.75.75 0 0 1-1.262-.434l-.007-.107v-2.725l-.344.03c-2.4.25-4.7 1.33-6.914 3.26-.52.453-1.323.025-1.237-.658.664-5.32 3.446-8.252 8.195-8.62l.3-.02V3.75v2.77ZM16 5.509V7.25a.75.75 0 0 1-.75.75c-3.874 0-6.274 1.676-7.312 5.157l-.079.279.352-.237C10.45 11.737 12.798 11 15.251 11a.75.75 0 0 1 .743.648l.007.102v1.743L20.16 9.5l-4.16-3.991Z",
+  "sound-source-outline": "M3.5 12a8.5 8.5 0 1 1 14.762 5.748l.992 1.135A9.966 9.966 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12a9.966 9.966 0 0 0 2.746 6.883l.993-1.134A8.47 8.47 0 0 1 3.5 12Z M19.25 12.125a7.098 7.098 0 0 1-1.783 4.715l-.998-1.14a5.625 5.625 0 1 0-8.806-.15l-1.004 1.146a7.125 7.125 0 1 1 12.59-4.571Z M16.25 12a4.23 4.23 0 0 1-.821 2.511l-1.026-1.172a2.75 2.75 0 1 0-4.806 0L8.571 14.51A4.25 4.25 0 1 1 16.25 12Z M12.564 12.756a.75.75 0 0 0-1.128 0l-7 8A.75.75 0 0 0 5 22h14a.75.75 0 0 0 .564-1.244l-7-8Zm4.783 7.744H6.653L12 14.389l5.347 6.111Z",
+  "speaker-1-outline": "M14.704 3.442c.191.226.296.512.296.808v15.502a1.25 1.25 0 0 1-2.058.954L7.975 16.5H4.25A2.25 2.25 0 0 1 2 14.25v-4.5A2.25 2.25 0 0 1 4.25 7.5h3.725l4.968-4.204a1.25 1.25 0 0 1 1.761.147ZM13.5 4.79 8.525 9H4.25a.75.75 0 0 0-.75.75v4.5c0 .415.336.75.75.75h4.275l4.975 4.213V4.79Zm3.604 3.851a.75.75 0 0 1 1.03.25c.574.94.862 1.992.862 3.14 0 1.149-.288 2.201-.862 3.141a.75.75 0 1 1-1.28-.781c.428-.702.642-1.483.642-2.36 0-.876-.214-1.657-.642-2.359a.75.75 0 0 1 .25-1.03Z",
+  "speaker-mute-outline" :"M12.92 3.316c.806-.717 2.08-.145 2.08.934v15.496c0 1.078-1.274 1.65-2.08.934l-4.492-3.994a.75.75 0 0 0-.498-.19H4.25A2.25 2.25 0 0 1 2 14.247V9.75a2.25 2.25 0 0 1 2.25-2.25h3.68a.75.75 0 0 0 .498-.19l4.491-3.993Zm.58 1.49L9.425 8.43A2.25 2.25 0 0 1 7.93 9H4.25a.75.75 0 0 0-.75.75v4.497c0 .415.336.75.75.75h3.68a2.25 2.25 0 0 1 1.495.57l4.075 3.623V4.807ZM16.22 9.22a.75.75 0 0 1 1.06 0L19 10.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L20.06 12l1.72 1.72a.75.75 0 1 1-1.06 1.06L19 13.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L17.94 12l-1.72-1.72a.75.75 0 0 1 0-1.06Z",
+  "star-emphasis-outline": "M13.209 3.103c-.495-1.004-1.926-1.004-2.421 0L8.43 7.88l-5.273.766c-1.107.161-1.55 1.522-.748 2.303l3.815 3.72-.9 5.25c-.19 1.103.968 1.944 1.959 1.424l4.715-2.48 4.716 2.48c.99.52 2.148-.32 1.96-1.424l-.902-5.25 3.816-3.72c.8-.78.359-2.142-.748-2.303l-5.273-.766-2.358-4.777ZM9.74 8.615l2.258-4.576 2.259 4.576a1.35 1.35 0 0 0 1.016.738l5.05.734-3.654 3.562a1.35 1.35 0 0 0-.388 1.195l.862 5.03-4.516-2.375a1.35 1.35 0 0 0-1.257 0l-4.516 2.374.862-5.029a1.35 1.35 0 0 0-.388-1.195l-3.654-3.562 5.05-.734c.44-.063.82-.34 1.016-.738ZM1.164 3.782a.75.75 0 0 0 .118 1.054l2.5 2a.75.75 0 1 0 .937-1.172l-2.5-2a.75.75 0 0 0-1.055.118Z M22.836 18.218a.75.75 0 0 0-.117-1.054l-2.5-2a.75.75 0 0 0-.938 1.172l2.5 2a.75.75 0 0 0 1.055-.117ZM1.282 17.164a.75.75 0 1 0 .937 1.172l2.5-2a.75.75 0 0 0-.937-1.172l-2.5 2ZM22.836 3.782a.75.75 0 0 1-.117 1.054l-2.5 2a.75.75 0 0 1-.938-1.172l2.5-2a.75.75 0 0 1 1.055.118Z",
+  "tag-outline": "M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.003-4.596l8.5-8.51A3.25 3.25 0 0 1 14.284 2h5.465Zm0 1.5h-5.465c-.465 0-.91.185-1.239.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75ZM17 5.502a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z",
+  "video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
+  "warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",
+
+  "brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
+  "brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
+  "brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
+  "brand-line-outline": "M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314",
+  "brand-sms-outline": "M272.1 204.2v71.1c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.1 0-2.1-.6-2.6-1.3l-32.6-44v42.2c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.8 0-3.2-1.4-3.2-3.2v-71.1c0-1.8 1.4-3.2 3.2-3.2H219c1 0 2.1 .5 2.6 1.4l32.6 44v-42.2c0-1.8 1.4-3.2 3.2-3.2h11.4c1.8-.1 3.3 1.4 3.3 3.1zm-82-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 1.8 1.4 3.2 3.2 3.2h11.4c1.8 0 3.2-1.4 3.2-3.2v-71.1c0-1.7-1.4-3.2-3.2-3.2zm-27.5 59.6h-31.1v-56.4c0-1.8-1.4-3.2-3.2-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 .9 .3 1.6 .9 2.2 .6 .5 1.3 .9 2.2 .9h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.7-1.4-3.2-3.1-3.2zM332.1 201h-45.7c-1.7 0-3.2 1.4-3.2 3.2v71.1c0 1.7 1.4 3.2 3.2 3.2h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2V234c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2v-11.4c-.1-1.7-1.5-3.2-3.2-3.2zM448 113.7V399c-.1 44.8-36.8 81.1-81.7 81H81c-44.8-.1-81.1-36.9-81-81.7V113c.1-44.8 36.9-81.1 81.7-81H367c44.8 .1 81.1 36.8 81 81.7zm-61.6 122.6c0-73-73.2-132.4-163.1-132.4-89.9 0-163.1 59.4-163.1 132.4 0 65.4 58 120.2 136.4 130.6 19.1 4.1 16.9 11.1 12.6 36.8-.7 4.1-3.3 16.1 14.1 8.8 17.4-7.3 93.9-55.3 128.2-94.7 23.6-26 34.9-52.3 34.9-81.5z",
+  "brand-telegram-outline":"M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
+  "brand-linkedin-outline": "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
+
+  "add-solid": "M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z",
+  "subtract-solid": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
+  "checkmark-circle-solid": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z"
+}
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index be5fb4fa3..fbd4c91bf 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
@@ -40,10 +40,11 @@
                   >
                     {{ option.name }}
                   </span>
-                  <i
+                  <fluent-icon
                     v-if="option.id === (selectedItem && selectedItem.id)"
-                    class="icon ion-checkmark-round"
-                  />
+                    icon="checkmark"
+                  >
+                  </fluent-icon>
                 </div>
               </div>
             </woot-button>
@@ -61,6 +62,7 @@
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+
 export default {
   components: {
     WootDropdownItem,
diff --git a/app/javascript/shared/components/ui/dropdown/AddLabel.vue b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
index 9b75d2702..8d5b0785d 100644
--- a/app/javascript/shared/components/ui/dropdown/AddLabel.vue
+++ b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
@@ -3,7 +3,7 @@
     <woot-label
       color-scheme="secondary"
       :title="$t('CONTACT_PANEL.LABELS.CONVERSATION.ADD_BUTTON')"
-      icon="ion-plus-round"
+      icon="add-circle"
     />
   </woot-button>
 </template>

From b01d032d0d243690b2281ba2d18b12828c527d68 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 1 Dec 2021 12:45:39 +0530
Subject: [PATCH 44/69] feat: Updates sidebar to accomodate sub menu  (#3416)

* Enhancement: Updates sidebar to a new design (#2733)

* feat: Changes primary navbar to new design (#2598)

* feat: updates design for secondary navbar (#2612)

* Changes primary nvbar to new design

* Updates design for contexual sidebar

* Fixes issues with JSON

* Remove duplication of notificatons in Navigation

* Fixes broken tests

* Fixes broken tests

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

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

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/modules/sidebar/components/Secondary.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Chore: Update design changes to features

* Fixes menu transitions and refactors code

* Refactors sidebar routeing logic

* lint error fixes

* Fixes dropdown menu styles

* Fixes secondary new item links

* Fixes lint scss issues

* fixes linter issues

* Fixes broken test cases

* Update AvailabilityStatus.spec.js

* Review feedbacks

* Fixes add modal for label

* Add tooltip for primary menu item

* Tooltip for notifications

* Adds tooltip for primary menu items

* Review fixes

* Review fixes

* Fix merge issues

* fixes logo size for login pages

* fixes Merge breaks with styles

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../dashboard/assets/scss/_animations.scss    |  47 ++--
 .../assets/scss/_foundation-custom.scss       |   4 +
 .../assets/scss/_foundation-settings.scss     |   6 +-
 .../dashboard/assets/scss/_variables.scss     |  13 +-
 .../assets/scss/plugins/_dropdown.scss        |   1 +
 .../assets/scss/views/settings/inbox.scss     |   2 +-
 .../assets/scss/widgets/_sidemenu.scss        |  60 +----
 .../components/layout/AvailabilityStatus.vue  |  77 ++----
 .../dashboard/components/layout/Sidebar.vue   | 246 +++++-------------
 .../components/layout/SidebarItem.vue         | 140 +++++-----
 .../layout/sidebarComponents/AgentDetails.vue |  58 ++---
 .../sidebarComponents/NotificationBell.vue    |  44 ++--
 .../layout/sidebarComponents/OptionsMenu.vue  |  64 ++++-
 .../specs/AgentDetails.spec.js                |  24 +-
 .../specs/NotificationBell.spec.js            |   9 +-
 .../layout/specs/AvailabilityStatus.spec.js   |  36 +--
 .../components/widgets/Thumbnail.vue          |   9 +
 .../conversation/AvailabilityStatusBadge.vue  |   2 +-
 .../widgets/conversation/ReplyBox.vue         |   1 +
 .../widgets/conversation/bubble/File.vue      |   4 +-
 .../dashboard/i18n/default-sidebar.js         |   4 +
 .../dashboard/i18n/locale/en/settings.json    |   8 +-
 .../dashboard/i18n/sidebarItems/campaigns.js  |  17 +-
 .../dashboard/i18n/sidebarItems/common.js     |  25 +-
 .../i18n/sidebarItems/notifications.js        |   6 +
 .../dashboard/i18n/sidebarItems/reports.js    |  23 +-
 .../modules/sidebar/components/Logo.vue       |  46 ++++
 .../modules/sidebar/components/Primary.vue    | 120 +++++++++
 .../sidebar/components/PrimaryNavItem.vue     |  78 ++++++
 .../modules/sidebar/components/Secondary.vue  | 215 +++++++++++++++
 .../sidebar/components/SecondaryNavItem.vue   | 138 ++++++++++
 .../modules/sidebar/mixins/routes.mixin.js    |  35 +++
 .../dashboard/routes/dashboard/Dashboard.vue  |  11 +-
 .../shared/assets/stylesheets/colors.scss     |  51 ++--
 .../FluentIcon/dashboard-icons.json           |   2 +
 .../ui/dropdown/DropdownDivider.vue           |  17 ++
 .../components/ui/dropdown/DropdownHeader.vue |  34 +++
 .../components/ui/dropdown/DropdownItem.vue   |   4 +
 38 files changed, 1119 insertions(+), 562 deletions(-)
 create mode 100644 app/javascript/dashboard/i18n/sidebarItems/notifications.js
 create mode 100644 app/javascript/dashboard/modules/sidebar/components/Logo.vue
 create mode 100644 app/javascript/dashboard/modules/sidebar/components/Primary.vue
 create mode 100644 app/javascript/dashboard/modules/sidebar/components/PrimaryNavItem.vue
 create mode 100644 app/javascript/dashboard/modules/sidebar/components/Secondary.vue
 create mode 100644 app/javascript/dashboard/modules/sidebar/components/SecondaryNavItem.vue
 create mode 100644 app/javascript/dashboard/modules/sidebar/mixins/routes.mixin.js
 create mode 100644 app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
 create mode 100644 app/javascript/shared/components/ui/dropdown/DropdownHeader.vue

diff --git a/app/javascript/dashboard/assets/scss/_animations.scss b/app/javascript/dashboard/assets/scss/_animations.scss
index ebb20a35e..4f5a2d43f 100644
--- a/app/javascript/dashboard/assets/scss/_animations.scss
+++ b/app/javascript/dashboard/assets/scss/_animations.scss
@@ -1,4 +1,3 @@
-
 /* Enter and leave animations can use different */
 /* durations and timing functions.              */
 .slide-fade-enter-active {
@@ -9,7 +8,8 @@
   transition: all .3s $ease-out-cubic;
 }
 
-.slide-fade-enter, .slide-fade-leave-to {
+.slide-fade-enter,
+.slide-fade-leave-to {
   opacity: 0;
   transform: translateX(10px);
 }
@@ -22,22 +22,33 @@
   transform: translateX($space-medium);
 }
 
-.conversations-list-enter-active, .conversations-list-leave-active {
+.conversations-list-enter-active,
+.conversations-list-leave-active {
   transition: all .25s $ease-out-cubic;
 }
 
-.conversations-list-enter, .conversations-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
+.conversations-list-enter,
+.conversations-list-leave-to {
   opacity: 0;
   transform: translateX($space-medium);
 }
 
-.menu-list-enter-active, .menu-list-leave-active {
-  transition: all .2s $ease-out-cubic;
+.menu-list-enter-active,
+.menu-list-leave-active {
+  transition: opacity .3s $ease-out-cubic,
+    transform .2s $ease-out-cubic;
 }
 
-.menu-list-enter, .menu-list-leave-to /* .conversations-list-leave-active for <2.1.8 */ {
+
+.menu-list-leave-to {
   opacity: 0;
-  transform: translateX($space-medium);
+  position: absolute;
+  transform: translateX($space-small);
+}
+
+.menu-list-enter {
+  opacity: 0;
+  transform: translateX(-$space-small);
 }
 
 .slide-up-enter-active {
@@ -48,8 +59,8 @@
   transition: all .3s $ease-out-cubic;
 }
 
-.slide-up-enter, .slide-up-leave-to
-/* .slide-fade-leave-active for <2.1.8 */ {
+.slide-up-enter,
+.slide-up-leave-to {
   transform: translateY(-$space-medium);
   opacity: 0;
 }
@@ -60,10 +71,10 @@
   transition: transform 0.25s $ease-in-cubic, opacity 0.15s $ease-in-cubic;
 }
 
-.menu-slide-enter, .menu-slide-leave-to
-/* .slide-fade-leave-active for <2.1.8 */ {
-  transform: translateY($space-small);
+.menu-slide-enter,
+.menu-slide-leave-to {
   opacity: 0;
+  transform: translateY($space-small);
 }
 
 
@@ -75,10 +86,10 @@
   transition: all .1s $ease-out-sine;
 }
 
-.toast-fade-enter, .toast-fade-leave-to
-/* .toast-fade-leave-active for <2.1.8 */ {
-  transform: translateY(-$space-small);
+.toast-fade-enter,
+.toast-fade-leave-to {
   opacity: 0;
+  transform: translateY(-$space-small);
 }
 
 .modal-fade-enter-active {
@@ -89,8 +100,8 @@
   transition: all .1s $ease-out-sine;
 }
 
-.modal-fade-enter, .modal-fade-leave-to
-/* .slide-fade-leave-active for <2.1.8 */ {
+.modal-fade-enter,
+.modal-fade-leave-to {
   opacity: 0;
 }
 
diff --git a/app/javascript/dashboard/assets/scss/_foundation-custom.scss b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
index 83f5f9ea4..1cfd002cf 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-custom.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-custom.scss
@@ -56,6 +56,10 @@ code {
 }
 
 
+.badge {
+  border-radius: var(--border-radius-normal);
+}
+
 .padding-right-small {
   padding-right: var(--space-one);
 }
diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
index c74b9f05b..13b7dfafd 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
@@ -219,9 +219,9 @@ $badge-background: $primary-color;
 $badge-color: $white;
 $badge-color-alt: $black;
 $badge-palette: $foundation-palette;
-$badge-padding: 0.3em;
+$badge-padding: var(--space-smaller);
 $badge-minwidth: 2.1em;
-$badge-font-size: 0.6rem;
+$badge-font-size: var(--font-size-nano);
 
 // 10. Breadcrumbs
 // ---------------
@@ -400,7 +400,7 @@ $mediaobject-image-width-stacked: 100%;
 
 $menu-margin: 0;
 $menu-margin-nested: $space-medium;
-$menu-item-padding: $space-one;
+$menu-item-padding: $space-slab;
 $menu-item-color-active: $white;
 $menu-item-background-active: $color-background;
 $menu-icon-spacing: 0.25rem;
diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss
index 447e86a25..ea8334c57 100644
--- a/app/javascript/dashboard/assets/scss/_variables.scss
+++ b/app/javascript/dashboard/assets/scss/_variables.scss
@@ -44,11 +44,14 @@ $woot-logo-padding: $space-large $space-two;
 $color-woot: #1f93ff;
 $color-gray: #6e6f73;
 $color-light-gray: #999a9b;
-$color-border: #e0e6ed;
-$color-border-light: #f0f4f5;
-$color-border-dark: #cad0d4;
-$color-background: #f4f6fb;
-$color-background-light: #f9fafc;
+
+$color-border: var(--s-75);
+$color-border-light: var(--s-50);
+$color-border-dark: var(--s-100);
+
+$color-background: var(--s-50);
+$color-background-light: var(--s-25);
+
 $color-white: #fff;
 $color-body: #3c4858;
 $color-heading: #1f2d3d;
diff --git a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
index e1c0c055d..8513053b8 100644
--- a/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
@@ -2,6 +2,7 @@
   @include elegant-card;
   @include border-light;
   box-sizing: content-box;
+  padding: var(--space-small);
   width: fit-content;
   z-index: var(--z-index-very-high);
 
diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
index e3b45726f..d2b145286 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
@@ -8,7 +8,7 @@
   @include background-white;
   @include flex;
   @include flex-align($x: justify, $y: middle);
-  @include border-normal-bottom;
+  border-bottom: 1px solid var(--s-50);
   height: $header-height;
   min-height: $header-height;
 
diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
index 70cad65e8..e5e9276fd 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
@@ -6,12 +6,6 @@
 }
 
 .sidebar {
-  @include border-normal-right;
-  @include background-white;
-  @include full-height;
-  @include margin(0);
-  @include space-between-column;
-  width: $nav-bar-width;
   z-index: 1024 - 1;
 
   //logo
@@ -22,28 +16,6 @@
     }
   }
 
-  .main-nav {
-    a {
-      border-radius: $space-smaller;
-      color: $color-gray;
-      font-size: $font-size-default;
-      font-weight: $font-weight-medium;
-
-      .wrap,
-      .child-icon {
-        color: $color-gray;
-
-        &:hover {
-          color: $color-woot;
-        }
-      }
-    }
-
-    .active a .wrap {
-      color: $color-woot;
-    }
-  }
-
   .nested {
     a {
       font-size: $font-size-small;
@@ -64,7 +36,7 @@
 .bottom-nav {
   @include flex;
   @include space-between-column;
-  @include padding($space-one);
+  @include padding($space-one $space-normal $space-one $space-one);
   @include border-normal-top;
   flex-direction: column;
   position: relative;
@@ -85,32 +57,14 @@
   }
 }
 
-.main-nav {
-  @include flex-weight(1);
-  @include scroll-on-hover;
-  padding: 0 $space-medium - $space-one;
+.hamburger--menu {
+  cursor: pointer;
+  display: none;
+  margin-right: $space-normal;
 
-  a {
-    &::before {
-      margin-right: $space-slab;
-    }
+  @media screen and (max-width: 1200px) {
+    display: block;
   }
-
-  .menu-title {
-    color: $color-gray;
-    font-size: $font-size-medium;
-    margin-top: $space-medium;
-
-    >span {
-      margin-left: $space-one;
-    }
-  }
-}
-
-.menu-title+ul>li>a {
-  @include padding($space-micro null);
-  color: $medium-gray;
-  line-height: $global-lineheight;
 }
 
 .header--icon {
diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index b7194355b..1ad4a9be3 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -1,66 +1,41 @@
 <template>
-  <div class="status">
-    <div class="status-view">
-      <availability-status-badge :status="currentUserAvailability" />
-      <div class="status-view--title">
-        {{ availabilityDisplayLabel }}
-      </div>
-    </div>
-
-    <div class="status-change">
-      <transition name="menu-slide">
-        <div
-          v-if="isStatusMenuOpened"
-          v-on-clickaway="closeStatusMenu"
-          class="dropdown-pane dropdowm--top"
-        >
-          <woot-dropdown-menu>
-            <woot-dropdown-item
-              v-for="status in availabilityStatuses"
-              :key="status.value"
-              class="status-items"
-            >
-              <woot-button
-                variant="clear"
-                size="small"
-                color-scheme="secondary"
-                class-names="status-change--dropdown-button"
-                :is-disabled="status.disabled"
-                @click="
-                  changeAvailabilityStatus(status.value, currentAccountId)
-                "
-              >
-                <availability-status-badge :status="status.value" />
-                {{ status.label }}
-              </woot-button>
-            </woot-dropdown-item>
-          </woot-dropdown-menu>
-        </div>
-      </transition>
-
+  <woot-dropdown-menu>
+    <woot-dropdown-header :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
+    <woot-dropdown-item
+      v-for="status in availabilityStatuses"
+      :key="status.value"
+      class="status-items"
+    >
       <woot-button
-        variant="clear"
-        color-scheme="secondary"
-        class-names="status-change--change-button link"
-        @click="openStatusMenu"
+        size="small"
+        :color-scheme="status.disabled ? '' : 'secondary'"
+        :variant="status.disabled ? 'smooth' : 'clear'"
+        class-names="status-change--dropdown-button"
+        @click="changeAvailabilityStatus(status.value)"
       >
-        {{ $t('SIDEBAR_ITEMS.CHANGE_AVAILABILITY_STATUS') }}
+        <availability-status-badge :status="status.value" />
+        {{ status.label }}
       </woot-button>
-    </div>
-  </div>
+    </woot-dropdown-item>
+    <woot-dropdown-divider />
+  </woot-dropdown-menu>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
+import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
 import AvailabilityStatusBadge from '../widgets/conversation/AvailabilityStatusBadge';
 
 const AVAILABILITY_STATUS_KEYS = ['online', 'busy', 'offline'];
 
 export default {
   components: {
+    WootDropdownHeader,
+    WootDropdownDivider,
     WootDropdownMenu,
     WootDropdownItem,
     AvailabilityStatusBadge,
@@ -100,8 +75,7 @@ export default {
           label: statusLabel,
           value: AVAILABILITY_STATUS_KEYS[index],
           disabled:
-            this.currentUserAvailability ===
-            AVAILABILITY_STATUS_KEYS[index],
+            this.currentUserAvailability === AVAILABILITY_STATUS_KEYS[index],
         })
       );
     },
@@ -114,7 +88,8 @@ export default {
     closeStatusMenu() {
       this.isStatusMenuOpened = false;
     },
-    changeAvailabilityStatus(availability, accountId) {
+    changeAvailabilityStatus(availability) {
+      const accountId = this.currentAccountId;
       if (this.isUpdating) {
         return;
       }
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index 8d9cd548e..e393a9f7d 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -1,59 +1,23 @@
 <template>
-  <aside class="sidebar animated shrink columns">
-    <div class="logo">
-      <router-link :to="dashboardPath" replace>
-        <img :src="globalConfig.logo" :alt="globalConfig.installationName" />
-      </router-link>
-    </div>
+  <aside class="woot-sidebar" :class="{ 'only-primary': !showSecondaryMenu }">
+    <primary-sidebar
+      :logo-source="globalConfig.logo"
+      :installation-name="globalConfig.installationName"
+      :account-id="accountId"
+      :menu-items="primaryMenuItems"
+      @toggle-accounts="toggleAccountModal"
+      @key-shortcut-modal="toggleKeyShortcutModal"
+    />
 
-    <div class="main-nav">
-      <transition-group name="menu-list" tag="ul" class="menu vertical">
-        <sidebar-item
-          v-for="item in accessibleMenuItems"
-          :key="item.toState"
-          :menu-item="item"
-        />
-        <sidebar-item
-          v-if="shouldShowTeams"
-          :key="teamSection.toState"
-          :menu-item="teamSection"
-        />
-        <sidebar-item
-          v-if="shouldShowSidebarItem"
-          :key="inboxSection.toState"
-          :menu-item="inboxSection"
-        />
-        <sidebar-item
-          v-if="shouldShowSidebarItem"
-          :key="labelSection.toState"
-          :menu-item="labelSection"
-          @add-label="showAddLabelPopup"
-        />
-        <sidebar-item
-          v-if="showShowContactSideMenu"
-          :key="contactLabelSection.key"
-          :menu-item="contactLabelSection"
-          @add-label="showAddLabelPopup"
-        />
-      </transition-group>
-    </div>
-
-    <div class="bottom-nav">
-      <availability-status />
-    </div>
-
-    <div class="bottom-nav app-context-menu" @click="toggleOptions">
-      <agent-details @show-options="toggleOptions" />
-      <notification-bell />
-      <fluent-icon class="current-user--options" icon="more-vertical" />
-      <options-menu
-        :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @key-shortcut-modal="toggleKeyShortcutModal"
-        @close="toggleOptions"
-      />
-    </div>
+    <secondary-sidebar
+      v-if="showSecondaryMenu"
+      :account-id="accountId"
+      :inboxes="inboxes"
+      :account-labels="accountLabels"
+      :teams="teams"
+      :menu-items="primaryMenuItems"
+      @add-label="showAddLabelPopup"
+    />
 
     <woot-key-shortcut-modal
       v-if="showShortcutModal"
@@ -82,17 +46,14 @@
 import { mapGetters } from 'vuex';
 
 import adminMixin from '../../mixins/isAdmin';
-import SidebarItem from './SidebarItem';
-import AvailabilityStatus from './AvailabilityStatus';
-import { frontendURL } from '../../helper/URLHelper';
 import { getSidebarItems } from '../../i18n/default-sidebar';
 import alertMixin from 'shared/mixins/alertMixin';
-import NotificationBell from './sidebarComponents/NotificationBell';
-import AgentDetails from './sidebarComponents/AgentDetails.vue';
-import OptionsMenu from './sidebarComponents/OptionsMenu.vue';
+
 import AccountSelector from './sidebarComponents/AccountSelector.vue';
 import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
 import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
+import PrimarySidebar from 'dashboard/modules/sidebar/components/Primary';
+import SecondarySidebar from 'dashboard/modules/sidebar/components/Secondary';
 import WootKeyShortcutModal from 'components/widgets/modal/WootKeyShortcutModal';
 import {
   hasPressedAltAndCKey,
@@ -110,11 +71,8 @@ export default {
     AccountSelector,
     AddAccountModal,
     AddLabelModal,
-    AgentDetails,
-    AvailabilityStatus,
-    NotificationBell,
-    OptionsMenu,
-    SidebarItem,
+    PrimarySidebar,
+    SecondarySidebar,
     WootKeyShortcutModal,
   },
   mixins: [adminMixin, alertMixin, eventListenerMixins],
@@ -139,125 +97,34 @@ export default {
       teams: 'teams/getMyTeams',
     }),
 
-    sidemenuItems() {
+    sideMenuItems() {
       return getSidebarItems(this.accountId);
     },
-    accessibleMenuItems() {
-      // get all keys in menuGroup
-      const groupKey = Object.keys(this.sidemenuItems);
+    primaryMenuItems() {
+      const menuItems = Object.values(
+        getSidebarItems(this.accountId).common.menuItems
+      );
 
-      let menuItems = [];
-      // Iterate over menuGroup to find the correct group
-      for (let i = 0; i < groupKey.length; i += 1) {
-        const groupItem = this.sidemenuItems[groupKey[i]];
-        // Check if current route is included
-        const isRouteIncluded = groupItem.routes.includes(this.currentRoute);
-        if (isRouteIncluded) {
-          menuItems = Object.values(groupItem.menuItems);
-        }
-      }
-
-      return this.filterMenuItemsByRole(menuItems);
+      return menuItems;
     },
     currentRoute() {
       return this.$store.state.route.name;
     },
-    shouldShowSidebarItem() {
-      return this.sidemenuItems.common.routes.includes(this.currentRoute);
+    shouldShowNotificationsSideMenu() {
+      return this.sideMenuItems.notifications.routes.includes(
+        this.currentRoute
+      );
     },
-    showShowContactSideMenu() {
-      return this.sidemenuItems.contacts.routes.includes(this.currentRoute);
+    shouldShowProfileSideMenu() {
+      return (
+        this.currentRoute === 'profile_settings_index' ||
+        this.currentRoute === 'profile_settings'
+      );
     },
-    shouldShowTeams() {
-      return this.shouldShowSidebarItem && this.teams.length;
-    },
-    inboxSection() {
-      return {
-        icon: 'folder',
-        label: 'INBOXES',
-        hasSubMenu: true,
-        newLink: true,
-        key: 'inbox',
-        cssClass: 'menu-title align-justify',
-        toState: frontendURL(`accounts/${this.accountId}/settings/inboxes`),
-        toStateName: 'settings_inbox_list',
-        newLinkRouteName: 'settings_inbox_new',
-        children: this.inboxes.map(inbox => ({
-          id: inbox.id,
-          label: inbox.name,
-          toState: frontendURL(`accounts/${this.accountId}/inbox/${inbox.id}`),
-          type: inbox.channel_type,
-          phoneNumber: inbox.phone_number,
-        })),
-      };
-    },
-    labelSection() {
-      return {
-        icon: 'number-symbol',
-        label: 'LABELS',
-        hasSubMenu: true,
-        newLink: true,
-        key: 'label',
-        cssClass: 'menu-title align-justify',
-        toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
-        toStateName: 'labels_list',
-        showModalForNewItem: true,
-        modalName: 'AddLabel',
-        children: this.accountLabels.map(label => ({
-          id: label.id,
-          label: label.title,
-          color: label.color,
-          truncateLabel: true,
-          toState: frontendURL(
-            `accounts/${this.accountId}/label/${label.title}`
-          ),
-        })),
-      };
-    },
-    contactLabelSection() {
-      return {
-        icon: 'number-symbol',
-        label: 'TAGGED_WITH',
-        hasSubMenu: true,
-        key: 'label',
-        newLink: false,
-        cssClass: 'menu-title align-justify',
-        toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
-        toStateName: 'labels_list',
-        showModalForNewItem: true,
-        modalName: 'AddLabel',
-        children: this.accountLabels.map(label => ({
-          id: label.id,
-          label: label.title,
-          color: label.color,
-          truncateLabel: true,
-          toState: frontendURL(
-            `accounts/${this.accountId}/labels/${label.title}/contacts`
-          ),
-        })),
-      };
-    },
-    teamSection() {
-      return {
-        icon: 'people-team',
-        label: 'TEAMS',
-        hasSubMenu: true,
-        newLink: true,
-        key: 'team',
-        cssClass: 'menu-title align-justify teams-sidebar-menu',
-        toState: frontendURL(`accounts/${this.accountId}/settings/teams`),
-        toStateName: 'teams_list',
-        newLinkRouteName: 'settings_teams_new',
-        children: this.teams.map(team => ({
-          id: team.id,
-          label: team.name,
-          truncateLabel: true,
-          toState: frontendURL(`accounts/${this.accountId}/team/${team.id}`),
-        })),
-      };
-    },
-    dashboardPath() {
-      return frontendURL(`accounts/${this.accountId}/dashboard`);
+    showSecondaryMenu() {
+      if (this.shouldShowNotificationsSideMenu) return false;
+      if (this.shouldShowProfileSideMenu) return false;
+      return true;
     },
   },
   mounted() {
@@ -318,9 +185,7 @@ export default {
           ) > -1
       );
     },
-    toggleOptions() {
-      this.showOptionsMenu = !this.showOptionsMenu;
-    },
+
     toggleAccountModal() {
       this.showAccountModal = !this.showAccountModal;
     },
@@ -341,6 +206,27 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+.woot-sidebar {
+  background: white;
+  display: flex;
+
+  &.only-primary {
+    width: auto;
+  }
+}
+
+.secondary-menu {
+  background: var(--white);
+  border-right: 1px solid var(--s-50);
+  height: 100vh;
+  width: 19rem;
+  flex-shrink: 0;
+  overflow: auto;
+  padding: var(--space-small);
+}
+</style>
+
 <style lang="scss">
 @import '~dashboard/assets/scss/variables';
 
@@ -405,7 +291,7 @@ export default {
   margin-top: auto;
 }
 
-.teams-sidebar-menu + .nested.vertical.menu {
-  padding-left: calc(var(--space-medium) - var(--space-one));
+.secondary-menu .nested.vertical.menu {
+  margin-left: var(--space-small);
 }
 </style>
diff --git a/app/javascript/dashboard/components/layout/SidebarItem.vue b/app/javascript/dashboard/components/layout/SidebarItem.vue
index be04330ad..ecb5ae9a9 100644
--- a/app/javascript/dashboard/components/layout/SidebarItem.vue
+++ b/app/javascript/dashboard/components/layout/SidebarItem.vue
@@ -1,10 +1,5 @@
 <template>
-  <router-link
-    :to="menuItem.toState"
-    tag="li"
-    active-class="active"
-    :class="computedClass"
-  >
+  <li :class="computedClass" class="sidebar-item">
     <a
       class="sub-menu-title"
       :class="getMenuItemClass"
@@ -12,76 +7,61 @@
       aria-haspopup="true"
       :title="menuItem.toolTip"
     >
-      <div class="wrap">
-        <fluent-icon
-          size="18"
-          :icon="menuItem.icon"
-          class="margin-right-small"
-        />
-        {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      </div>
-      <button
-        v-if="showItem(menuItem)"
-        class="child-icon"
-        @click.prevent="newLinkClick(menuItem)"
-      >
-        <fluent-icon icon="add-circle" size="16" />
-      </button>
+      {{ $t(`SIDEBAR.${menuItem.label}`) }}
     </a>
     <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
-      <router-link
+      <secondary-nav-item
         v-for="child in menuItem.children"
         :key="child.id"
-        active-class="active flex-container"
-        tag="li"
         :to="child.toState"
+        :label="child.label"
+        :label-color="child.color"
+        :should-truncate="child.truncateLabel"
+        :icon="computedInboxClass(child)"
+      />
+      <router-link
+        v-if="menuItem.newLink"
+        v-slot="{ href, isActive, navigate }"
+        :to="menuItem.toState"
+        custom
       >
-        <a href="#" :class="computedChildClass(child)">
-          <div class="wrap">
-            <fluent-icon
-              v-if="menuItem.key === 'inbox'"
-              class="inbox-icon"
-              size="14"
-              :icon="computedInboxClass(child)"
-            />
-            <span
-              v-if="child.color"
-              class="label-color--display"
-              :style="{ backgroundColor: child.color }"
-            />
-            <div
-              :title="computedChildTitle(child)"
-              :class="computedChildClass(child)"
-            >
-              {{ child.label }}
-            </div>
-          </div>
-        </a>
+        <li>
+          <a
+            :href="href"
+            class="button small clear menu-item--new secondary"
+            :class="{ 'is-active': isActive }"
+            @click="e => newLinkClick(e, navigate)"
+          >
+            <fluent-icon icon="add" />
+            <span class="button__content">
+              {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
+            </span>
+          </a>
+        </li>
       </router-link>
     </ul>
-  </router-link>
+  </li>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 
-import router from '../../routes';
 import adminMixin from '../../mixins/isAdmin';
 import { getInboxClassByType } from 'dashboard/helper/inbox';
+
+import SecondaryNavItem from 'dashboard/modules/sidebar/components/SecondaryNavItem';
+
 export default {
+  components: { SecondaryNavItem },
   mixins: [adminMixin],
   props: {
     menuItem: {
       type: Object,
-      default() {
-        return {};
-      },
+      default: () => ({}),
     },
   },
   computed: {
-    ...mapGetters({
-      activeInbox: 'getSelectedInbox',
-    }),
+    ...mapGetters({ activeInbox: 'getSelectedInbox' }),
     getMenuItemClass() {
       return this.menuItem.cssClass
         ? `side-menu ${this.menuItem.cssClass}`
@@ -104,6 +84,7 @@ export default {
   methods: {
     computedInboxClass(child) {
       const { type, phoneNumber } = child;
+      if (!type) return '';
       const classByType = getInboxClassByType(type, phoneNumber);
       return classByType;
     },
@@ -115,11 +96,12 @@ export default {
       if (!child.truncateLabel) return false;
       return child.label;
     },
-    newLinkClick(item) {
-      if (item.newLinkRouteName) {
-        router.push({ name: item.newLinkRouteName, params: { page: 'new' } });
-      } else if (item.showModalForNewItem) {
-        if (item.modalName === 'AddLabel') {
+    newLinkClick(e, navigate) {
+      if (this.menuItem.newLinkRouteName) {
+        navigate(e);
+      } else if (this.menuItem.showModalForNewItem) {
+        if (this.menuItem.modalName === 'AddLabel') {
+          e.preventDefault();
           this.$emit('add-label');
         }
       }
@@ -131,11 +113,22 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-
+.sidebar-item {
+  margin: var(--space-small) 0;
+}
 .sub-menu-title {
   display: flex;
   justify-content: space-between;
+  padding: 0 var(--space-small);
+  margin-bottom: var(--space-smaller);
+  color: var(--s-600);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--space-two);
+  text-transform: uppercase;
+}
+
+.sub-menu-link {
+  color: var(--s-600);
 }
 
 .wrap {
@@ -144,10 +137,27 @@ export default {
 }
 
 .label-color--display {
-  border-radius: $space-smaller;
-  height: $space-normal;
-  margin-right: $space-small;
-  min-width: $space-normal;
-  width: $space-normal;
+  border-radius: var(--space-smaller);
+  height: var(--space-normal);
+  margin-right: var(--space-small);
+  min-width: var(--space-normal);
+  width: var(--space-normal);
+}
+
+.inbox-icon {
+  position: relative;
+  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);
+
+  &:hover {
+    color: var(--w-500);
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
index a1233db7c..beeb59c4c 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="current-user--row">
+  <woot-button
+    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
+    variant="link"
+    class="current-user"
+    @click="handleClick"
+  >
     <thumbnail
       :src="currentUser.avatar_url"
-      :username="currentUserAvailableName"
+      :username="currentUser.name"
+      :status="statusOfAgent"
+      should-show-status-always
+      size="32px"
     />
-    <div class="current-user--data">
-      <h3 class="current-user--name text-truncate">
-        {{ currentUserAvailableName }}
-      </h3>
-      <h5 v-if="currentRole" class="current-user--role">
-        {{ $t(`AGENT_MGMT.AGENT_TYPES.${currentRole.toUpperCase()}`) }}
-      </h5>
-    </div>
-  </div>
+  </woot-button>
 </template>
 <script>
 import { mapGetters } from 'vuex';
@@ -25,39 +25,25 @@ export default {
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',
-      currentRole: 'getCurrentRole',
+      currentUserAvailability: 'getCurrentUserAvailability',
     }),
-    currentUserAvailableName() {
-      return this.currentUser.name;
+    statusOfAgent() {
+      return this.currentUserAvailability || 'offline';
+    },
+  },
+  methods: {
+    handleClick() {
+      this.$emit('toggle-menu');
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
-.current-user--row {
+.current-user {
   align-items: center;
   display: flex;
-}
-
-.current-user--data {
-  display: flex;
-  flex-direction: column;
-
-  .current-user--name {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    margin-bottom: var(--space-micro);
-    margin-left: var(--space-one);
-    max-width: 12rem;
-  }
-
-  .current-user--role {
-    color: var(--color-gray);
-    font-size: var(--font-size-mini);
-    margin-bottom: var(--zero);
-    margin-left: var(--space-one);
-    text-transform: capitalize;
-  }
+  border-radius: 50%;
+  border: 2px solid var(--white);
 }
 </style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
index cf3521a54..6227f179c 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -1,13 +1,19 @@
 <template>
-  <span class="notifications" @click.stop="showNotification">
-    <fluent-icon icon="alert" />
-    <span v-if="unreadCount" class="unread-badge">{{ unreadCount }}</span>
-  </span>
+  <div class="notifications-link">
+    <primary-nav-item
+      name="NOTIFICATIONS"
+      icon="alert"
+      :to="`/app/accounts/${accountId}/notifications`"
+      :count="unreadCount"
+    />
+  </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+import PrimaryNavItem from 'dashboard/modules/sidebar/components/PrimaryNavItem';
 
 export default {
+  components: { PrimaryNavItem },
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
@@ -15,40 +21,20 @@ export default {
     }),
     unreadCount() {
       if (!this.notificationMetadata.unreadCount) {
-        return 0;
+        return '0';
       }
 
       return this.notificationMetadata.unreadCount < 100
-        ? this.notificationMetadata.unreadCount
+        ? `${this.notificationMetadata.unreadCount}`
         : '99+';
     },
   },
-  methods: {
-    showNotification() {
-      this.$router.push(`/app/accounts/${this.accountId}/notifications`);
-    },
-  },
+  methods: {},
 };
 </script>
 
 <style scoped lang="scss">
-.notifications {
-  font-size: var(--font-size-big);
-  margin-bottom: auto;
-  margin-left: auto;
-  margin-top: auto;
-  position: relative;
-
-  .unread-badge {
-    background: var(--r-300);
-    border-radius: var(--space-small);
-    color: var(--white);
-    font-size: var(--font-size-micro);
-    font-weight: var(--font-weight-black);
-    left: var(--space-slab);
-    padding: 0 var(--space-smaller);
-    position: absolute;
-    top: var(--space-smaller);
-  }
+.notifications-link {
+  margin-bottom: var(--space-small);
 }
 </style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 3fb66c14e..38b803308 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -2,15 +2,19 @@
   <transition name="menu-slide">
     <div
       v-if="show"
-      v-on-clickaway="() => $emit('close')"
-      class="dropdown-pane dropdowm--top"
+      v-on-clickaway="onClickAway"
+      class="dropdown-pane"
+      :class="{ 'dropdown-pane--open': show }"
     >
+      <availability-status />
+      <li class="divider" />
       <woot-dropdown-menu>
         <woot-dropdown-item v-if="showChangeAccountOption">
           <woot-button
             variant="clear"
+            color-scheme="secondary"
             size="small"
-            class=" change-accounts--button"
+            icon="arrow-swap"
             @click="$emit('toggle-accounts')"
           >
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
@@ -19,36 +23,50 @@
         <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
           <woot-button
             variant="clear"
+            color-scheme="secondary"
             size="small"
-            class=" change-accounts--button"
+            icon="ion-help-buoy"
             @click="$emit('show-support-chat-window')"
           >
-            Contact Support
+            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
           </woot-button>
         </woot-dropdown-item>
         <woot-dropdown-item>
           <woot-button
             variant="clear"
+            color-scheme="secondary"
             size="small"
-            class=" change-accounts--button"
-            @click="$emit('key-shortcut-modal')"
+            icon="keyboard"
+            @click="handleKeyboardHelpClick"
           >
             {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
           </woot-button>
         </woot-dropdown-item>
         <woot-dropdown-item>
           <router-link
+            v-slot="{ href, isActive, navigate }"
             :to="`/app/accounts/${accountId}/profile/settings`"
-            class="button clear small change-accounts--button"
+            custom
           >
-            {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
+            <a
+              :href="href"
+              class="button small clear secondary"
+              :class="{ 'is-active': isActive }"
+              @click="e => handleProfileSettingClick(e, navigate)"
+            >
+              <fluent-icon icon="person" class="icon icon--font" />
+              <span class="button__content">
+                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
+              </span>
+            </a>
           </router-link>
         </woot-dropdown-item>
         <woot-dropdown-item>
           <woot-button
             variant="clear"
+            color-scheme="secondary"
             size="small"
-            class=" change-accounts--button"
+            icon="power"
             @click="logout"
           >
             {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
@@ -63,13 +81,15 @@
 import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus';
 
 export default {
   components: {
     WootDropdownMenu,
     WootDropdownItem,
+    AvailabilityStatus,
   },
   mixins: [clickaway],
   props: {
@@ -88,18 +108,34 @@ export default {
       if (this.globalConfig.createNewAccountFromDashboard) {
         return true;
       }
-      return this.currentUser.accounts.length > 1;
+
+      const { accounts = [] } = this.currentUser;
+      return accounts.length > 1;
     },
   },
   methods: {
+    handleProfileSettingClick(e, navigate) {
+      this.$emit('close');
+      navigate(e);
+    },
+    handleKeyboardHelpClick() {
+      this.$emit('key-shortcut-modal');
+      this.$emit('close');
+    },
     logout() {
       Auth.logout();
     },
+    onClickAway() {
+      if (this.show) this.$emit('close');
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
 .dropdown-pane {
-  right: 0;
+  left: var(--space-slab);
+  bottom: var(--space-larger);
+  min-width: 16.8rem;
+  z-index: var(--z-index-much-higher);
 }
 </style>
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js
index 142bbedfa..073881a58 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js
@@ -2,13 +2,20 @@ import AgentDetails from '../AgentDetails';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
+import VTooltip from 'v-tooltip';
 
 import i18n from 'dashboard/i18n';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+import WootButton from 'dashboard/components/ui/WootButton';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);
 localVue.component('thumbnail', Thumbnail);
+localVue.component('woot-button', WootButton);
+localVue.component('woot-button', WootButton);
+localVue.use(VTooltip, {
+  defaultHtml: false,
+});
 
 const i18nConfig = new VueI18n({
   locale: 'en',
@@ -16,7 +23,11 @@ const i18nConfig = new VueI18n({
 });
 
 describe('agentDetails', () => {
-  const currentUser = { name: 'Neymar Junior', avatar_url: '' };
+  const currentUser = {
+    name: 'Neymar Junior',
+    avatar_url: '',
+    availability_status: 'online',
+  };
   const currentRole = 'agent';
   let store = null;
   let actions = null;
@@ -31,6 +42,7 @@ describe('agentDetails', () => {
         getters: {
           getCurrentUser: () => currentUser,
           getCurrentRole: () => currentRole,
+          getCurrentUserAvailability: () => currentUser.availability_status,
         },
       },
     };
@@ -47,14 +59,8 @@ describe('agentDetails', () => {
     });
   });
 
-  it('shows the agent name', () => {
-    const agentTitle = agentDetails.find('.current-user--name');
-    expect(agentTitle.text()).toBe('Neymar Junior');
-  });
-
-  it('shows the agent role', () => {
-    const agentTitle = agentDetails.find('.current-user--role');
-    expect(agentTitle.text()).toBe('Agent');
+  it(' the agent status', () => {
+    expect(agentDetails.find('thumbnail-stub').vm.status).toBe('online');
   });
 
   it('agent thumbnail exists', () => {
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js b/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js
index 947e5976b..5da4a7d02 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/specs/NotificationBell.spec.js
@@ -50,8 +50,9 @@ describe('notificationBell', () => {
       localVue,
       i18n: i18nConfig,
     });
-    const statusViewTitle = notificationBell.find('.unread-badge');
-    expect(statusViewTitle.text()).toBe('19');
+
+    const statusViewTitle = notificationBell.find('primary-nav-item-stub');
+    expect(statusViewTitle.vm.count).toBe('19');
   });
 
   it('it should return unread count 99+ ', async () => {
@@ -61,7 +62,7 @@ describe('notificationBell', () => {
       localVue,
       i18n: i18nConfig,
     });
-    const statusViewTitle = notificationBell.find('.unread-badge');
-    expect(statusViewTitle.text()).toBe('99+');
+    const statusViewTitle = notificationBell.find('primary-nav-item-stub');
+    expect(statusViewTitle.vm.count).toBe('99+');
   });
 });
diff --git a/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js b/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
index a14cc6724..4e60dbe5b 100644
--- a/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
+++ b/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
@@ -1,15 +1,23 @@
-import AvailabilityStatus from '../AvailabilityStatus';
+import AvailabilityStatus from '../AvailabilityStatus.vue';
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 
 import WootButton from 'dashboard/components/ui/WootButton';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
+import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
 import i18n from 'dashboard/i18n';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 localVue.use(VueI18n);
 localVue.component('woot-button', WootButton);
+localVue.component('woot-dropdown-header', WootDropdownHeader);
+localVue.component('woot-dropdown-menu', WootDropdownMenu);
+localVue.component('woot-dropdown-divider', WootDropdownDivider);
+localVue.component('woot-dropdown-item', WootDropdownItem);
 
 const i18nConfig = new VueI18n({
   locale: 'en',
@@ -52,29 +60,11 @@ describe('AvailabilityStatus', () => {
     });
   });
 
-  it('shows current user status', () => {
-    const statusViewTitle = availabilityStatus.find('.status-view--title');
-
-    expect(statusViewTitle.text()).toBe('Online');
-  });
-
-  it('opens the menu when user clicks "change"', async () => {
-    expect(availabilityStatus.find('.dropdown-pane').exists()).toBe(false);
-
-    await availabilityStatus
-      .find('.status-change--change-button')
-      .trigger('click');
-
-    expect(availabilityStatus.find('.dropdown-pane').exists()).toBe(true);
-  });
-
   it('dispatches an action when user changes status', async () => {
-    await availabilityStatus
-      .find('.status-change--change-button')
-      .trigger('click');
-
-    await availabilityStatus
-      .find('.status-change li:last-child button')
+    await availabilityStatus;
+    availabilityStatus
+      .findAll('.status-change--dropdown-button')
+      .at(2)
       .trigger('click');
 
     expect(actions.updateAvailability).toBeCalledWith(
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index eb1741bbc..3bc92af83 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -116,6 +116,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    shouldShowStatusAlways: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -124,6 +128,7 @@ export default {
   },
   computed: {
     showStatusIndicator() {
+      if (this.shouldShowStatusAlways) return true;
       return this.status === 'online' || this.status === 'busy';
     },
     avatarSize() {
@@ -210,5 +215,9 @@ export default {
   .user-online-status--busy {
     background: $warning-color;
   }
+
+  .user-online-status--offline {
+    background: var(--s-500);
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
index 0be6d91e6..588bbef82 100644
--- a/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/AvailabilityStatusBadge.vue
@@ -20,7 +20,7 @@ export default {
     background: var(--g-400);
   }
   &__offline {
-    background: var(--b-600);
+    background: var(--s-500);
   }
   &__busy {
     background: var(--y-700);
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 952b81bbc..8b7b68069 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -51,6 +51,7 @@
         @toggle-user-mention="toggleUserMention"
         @toggle-canned-menu="toggleCannedMenu"
       />
+      <h1>{{ message }}</h1>
     </div>
     <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
       <attachment-preview
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
index 89783f2cb..a8f2993d3 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/File.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="file message-text__wrap">
     <div class="icon-wrap">
-      <fluent-icon icon="document" class="file--icon" />
+      <fluent-icon icon="document" class="file--icon" size="32" />
     </div>
     <div class="meta">
       <h5 class="text-block-title">
         {{ decodeURI(fileName) }}
       </h5>
       <a
-        class="download clear button small"
+        class="download clear link button small"
         rel="noreferrer noopener nofollow"
         target="_blank"
         :href="url"
diff --git a/app/javascript/dashboard/i18n/default-sidebar.js b/app/javascript/dashboard/i18n/default-sidebar.js
index 4f4a237a9..f30701939 100644
--- a/app/javascript/dashboard/i18n/default-sidebar.js
+++ b/app/javascript/dashboard/i18n/default-sidebar.js
@@ -3,6 +3,9 @@ import contacts from './sidebarItems/contacts';
 import reports from './sidebarItems/reports';
 import campaigns from './sidebarItems/campaigns';
 import settings from './sidebarItems/settings';
+import notifications from './sidebarItems/notifications';
+
+// TODO - find hasSubMenu usage - July/2021
 
 export const getSidebarItems = accountId => ({
   common: common(accountId),
@@ -10,4 +13,5 @@ export const getSidebarItems = accountId => ({
   reports: reports(accountId),
   campaigns: campaigns(accountId),
   settings: settings(accountId),
+  notifications: notifications(accountId),
 });
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 47ad6ec7b..7b09e40b8 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -103,6 +103,7 @@
   "SIDEBAR_ITEMS": {
     "CHANGE_AVAILABILITY_STATUS": "Change",
     "CHANGE_ACCOUNTS": "Switch Account",
+    "CONTACT_SUPPORT": "Contact Support",
     "SELECTOR_SUBTITLE": "Select an account from the following list",
     "PROFILE_SETTINGS": "Profile Settings",
     "KEYBOARD_SHORTCUTS": "Keyboard Shortcuts",
@@ -143,6 +144,7 @@
     "NOTIFICATIONS": "Notifications",
     "CANNED_RESPONSES": "Canned Responses",
     "INTEGRATIONS": "Integrations",
+    "PROFILE_SETTINGS": "Profile Settings",
     "ACCOUNT_SETTINGS": "Account Settings",
     "APPLICATIONS": "Applications",
     "LABELS": "Labels",
@@ -151,6 +153,9 @@
     "TEAMS": "Teams",
     "ALL_CONTACTS": "All Contacts",
     "TAGGED_WITH": "Tagged with",
+    "NEW_LABEL": "New label",
+    "NEW_TEAM": "New team",
+    "NEW_INBOX": "New inbox",
     "REPORTS_OVERVIEW": "Overview",
     "CSAT": "CSAT",
     "CAMPAIGNS": "Campaigns",
@@ -159,7 +164,8 @@
     "REPORTS_AGENT": "Agents",
     "REPORTS_LABEL": "Labels",
     "REPORTS_INBOX": "Inbox",
-    "REPORTS_TEAM": "Team"
+    "REPORTS_TEAM": "Team",
+    "SET_AVAILABILITY_TITLE": "Set yourself as"
   },
   "CREATE_ACCOUNT": {
     "NO_ACCOUNT_WARNING": "Uh oh! We could not find any Chatwoot accounts. Please create a new account to continue.",
diff --git a/app/javascript/dashboard/i18n/sidebarItems/campaigns.js b/app/javascript/dashboard/i18n/sidebarItems/campaigns.js
index 18aad271c..448b6b5d6 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/campaigns.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/campaigns.js
@@ -2,29 +2,24 @@ import { frontendURL } from '../../helper/URLHelper';
 
 const campaigns = accountId => ({
   routes: ['settings_account_campaigns', 'one_off'],
-  menuItems: {
-    back: {
-      icon: 'chevron-left',
-      label: 'HOME',
-      hasSubMenu: false,
-      toStateName: 'home',
-      toState: frontendURL(`accounts/${accountId}/dashboard`),
-    },
-    ongoingCampaigns: {
+  menuItems: [
+    {
       icon: 'arrow-swap',
       label: 'ONGOING',
+      key: 'ongoingCampaigns',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
       toStateName: 'settings_account_campaigns',
     },
-    onOffCampaigns: {
+    {
+      key: 'oneOffCampaigns',
       icon: 'sound-source',
       label: 'ONE_OFF',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),
       toStateName: 'one_off',
     },
-  },
+  ],
 });
 
 export default campaigns;
diff --git a/app/javascript/dashboard/i18n/sidebarItems/common.js b/app/javascript/dashboard/i18n/sidebarItems/common.js
index 6f52ed54f..03af7dab1 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/common.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/common.js
@@ -19,44 +19,41 @@ const common = accountId => ({
     assignedToMe: {
       icon: 'chat',
       label: 'CONVERSATIONS',
-      hasSubMenu: false,
-      key: '',
+      hasSubMenu: true,
+      key: 'conversations',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
       toolTip: 'Conversation from all subscribed inboxes',
       toStateName: 'home',
     },
     contacts: {
+      key: 'contacts',
       icon: 'book-contacts',
       label: 'CONTACTS',
-      hasSubMenu: false,
+      hasSubMenu: true,
       toState: frontendURL(`accounts/${accountId}/contacts`),
       toStateName: 'contacts_dashboard',
     },
-    notifications: {
-      icon: 'alert',
-      label: 'NOTIFICATIONS',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/notifications`),
-      toStateName: 'notifications_dashboard',
-    },
-    report: {
+    reports: {
+      key: 'reports',
       icon: 'arrow-trending-lines',
       label: 'REPORTS',
-      hasSubMenu: false,
+      hasSubMenu: true,
       toState: frontendURL(`accounts/${accountId}/reports`),
       toStateName: 'settings_account_reports',
     },
     campaigns: {
+      key: 'campaigns',
       icon: 'megaphone',
       label: 'CAMPAIGNS',
-      hasSubMenu: false,
+      hasSubMenu: true,
       toState: frontendURL(`accounts/${accountId}/campaigns`),
       toStateName: 'settings_account_campaigns',
     },
     settings: {
+      key: 'settings',
       icon: 'settings',
       label: 'SETTINGS',
-      hasSubMenu: false,
+      hasSubMenu: true,
       toState: frontendURL(`accounts/${accountId}/settings`),
       toStateName: 'settings_home',
     },
diff --git a/app/javascript/dashboard/i18n/sidebarItems/notifications.js b/app/javascript/dashboard/i18n/sidebarItems/notifications.js
new file mode 100644
index 000000000..a78b23f42
--- /dev/null
+++ b/app/javascript/dashboard/i18n/sidebarItems/notifications.js
@@ -0,0 +1,6 @@
+const notifications = () => ({
+  routes: ['notifications_index'],
+  menuItems: {},
+});
+
+export default notifications;
diff --git a/app/javascript/dashboard/i18n/sidebarItems/reports.js b/app/javascript/dashboard/i18n/sidebarItems/reports.js
index 3b6c94972..4286ff7ba 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/reports.js
+++ b/app/javascript/dashboard/i18n/sidebarItems/reports.js
@@ -9,57 +9,50 @@ const reports = accountId => ({
     'inbox_reports',
     'team_reports',
   ],
-  menuItems: {
-    back: {
-      icon: 'chevron-left',
-      label: 'HOME',
-      hasSubMenu: false,
-      toStateName: 'home',
-      toState: frontendURL(`accounts/${accountId}/dashboard`),
-    },
-    reportOverview: {
+  menuItems: [
+    {
       icon: 'arrow-trending-lines',
       label: 'REPORTS_OVERVIEW',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/overview`),
       toStateName: 'settings_account_reports',
     },
-    csatReports: {
+    {
       icon: 'emoji',
       label: 'CSAT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/csat`),
       toStateName: 'csat_reports',
     },
-    agentReports: {
+    {
       icon: 'people',
       label: 'REPORTS_AGENT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/agent`),
       toStateName: 'agent_reports',
     },
-    labelReports: {
+    {
       icon: 'tag',
       label: 'REPORTS_LABEL',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/label`),
       toStateName: 'label_reports',
     },
-    inboxReports: {
+    {
       icon: 'mail-inbox-all',
       label: 'REPORTS_INBOX',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/inboxes`),
       toStateName: 'inbox_reports',
     },
-    teamReports: {
+    {
       icon: 'people-team',
       label: 'REPORTS_TEAM',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
       toStateName: 'team_reports',
     },
-  },
+  ],
 });
 
 export default reports;
diff --git a/app/javascript/dashboard/modules/sidebar/components/Logo.vue b/app/javascript/dashboard/modules/sidebar/components/Logo.vue
new file mode 100644
index 000000000..406157fc2
--- /dev/null
+++ b/app/javascript/dashboard/modules/sidebar/components/Logo.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="logo">
+    <router-link :to="dashboardPath" replace>
+      <img :src="source" :alt="name" />
+    </router-link>
+  </div>
+</template>
+<script>
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+export default {
+  props: {
+    source: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    accountId: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    dashboardPath() {
+      return frontendURL(`accounts/${this.accountId}/dashboard`);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+$logo-size: 32px;
+
+.logo {
+  padding: var(--space-normal);
+
+  img {
+    width: $logo-size;
+    height: $logo-size;
+    object-fit: cover;
+    object-position: left center;
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/modules/sidebar/components/Primary.vue b/app/javascript/dashboard/modules/sidebar/components/Primary.vue
new file mode 100644
index 000000000..80b00ab26
--- /dev/null
+++ b/app/javascript/dashboard/modules/sidebar/components/Primary.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="primary--sidebar">
+    <logo
+      :source="logoSource"
+      :name="installationName"
+      :account-id="accountId"
+    />
+    <nav class="menu vertical">
+      <primary-nav-item
+        v-for="menuItem in menuItems"
+        :key="menuItem.toState"
+        :icon="menuItem.icon"
+        :name="menuItem.label"
+        :to="menuItem.toState"
+        :is-child-menu-active="isMenuActive(menuItem, $route.name)"
+      />
+    </nav>
+    <div class="menu vertical user-menu">
+      <notification-bell />
+      <agent-details @toggle-menu="toggleOptions" />
+      <options-menu
+        :show="showOptionsMenu"
+        @toggle-accounts="toggleAccountModal"
+        @show-support-chat-window="toggleSupportChatWindow"
+        @key-shortcut-modal="$emit('key-shortcut-modal')"
+        @close="toggleOptions"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import Logo from './Logo';
+import PrimaryNavItem from './PrimaryNavItem';
+import OptionsMenu from 'dashboard/components/layout/sidebarComponents/OptionsMenu';
+import AgentDetails from 'dashboard/components/layout/sidebarComponents/AgentDetails';
+import NotificationBell from 'dashboard/components/layout/sidebarComponents/NotificationBell';
+
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+export default {
+  components: {
+    Logo,
+    PrimaryNavItem,
+    OptionsMenu,
+    AgentDetails,
+    NotificationBell,
+  },
+  props: {
+    logoSource: {
+      type: String,
+      default: '',
+    },
+    installationName: {
+      type: String,
+      default: '',
+    },
+    accountId: {
+      type: Number,
+      default: 0,
+    },
+    menuItems: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      showOptionsMenu: false,
+    };
+  },
+  methods: {
+    frontendURL,
+    toggleOptions() {
+      this.showOptionsMenu = !this.showOptionsMenu;
+    },
+    toggleAccountModal() {
+      this.$emit('toggle-accounts');
+    },
+    toggleSupportChatWindow() {
+      window.$chatwoot.toggle();
+    },
+    isMenuActive(menuItem, currentRouteName) {
+      const { key = '' } = menuItem;
+
+      if (currentRouteName === key) return true;
+      // Conversations route is defaulted as home
+      // TODO: Needs to ewfactor old statenames to follow a structure while key naming.
+      if (currentRouteName.includes('inbox') && key === 'conversations')
+        return true;
+      if (currentRouteName.includes('conversations') && key === 'conversations')
+        return true;
+      return false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.primary--sidebar {
+  display: flex;
+  flex-direction: column;
+  width: var(--space-jumbo);
+  border-right: 1px solid var(--s-50);
+  box-sizing: content-box;
+  height: 100vh;
+  flex-shrink: 0;
+}
+
+.menu {
+  align-items: center;
+  margin-top: var(--space-medium);
+}
+
+.user-menu {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: flex-end;
+  margin-bottom: var(--space-normal);
+}
+</style>
diff --git a/app/javascript/dashboard/modules/sidebar/components/PrimaryNavItem.vue b/app/javascript/dashboard/modules/sidebar/components/PrimaryNavItem.vue
new file mode 100644
index 000000000..67765b90e
--- /dev/null
+++ b/app/javascript/dashboard/modules/sidebar/components/PrimaryNavItem.vue
@@ -0,0 +1,78 @@
+<template>
+  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
+    <a
+      v-tooltip.right="$t(`SIDEBAR.${name}`)"
+      :href="href"
+      class="button clear button--only-icon menu-item"
+      :class="{ 'is-active': isActive || isChildMenuActive }"
+      @click="navigate"
+    >
+      <fluent-icon :icon="icon" />
+      <span class="show-for-sr">{{ name }}</span>
+      <span v-if="count" class="badge warning">{{ count }}</span>
+    </a>
+  </router-link>
+</template>
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    count: {
+      type: String,
+      default: '',
+    },
+    isChildMenuActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.button {
+  margin: var(--space-small) 0;
+}
+
+.menu-item {
+  display: inline-flex;
+  position: relative;
+  border-radius: var(--border-radius-large);
+  border: 1px solid transparent;
+  color: var(--s-600);
+
+  &:hover {
+    background: var(--w-25);
+    color: var(--s-600);
+  }
+
+  &:focus {
+    border-color: var(--w-500);
+  }
+
+  &.is-active {
+    background: var(--w-50);
+    color: var(--w-500);
+  }
+}
+
+.icon {
+  font-size: var(--font-size-default);
+}
+
+.badge {
+  position: absolute;
+  right: var(--space-minus-smaller);
+  top: var(--space-minus-smaller);
+}
+</style>
diff --git a/app/javascript/dashboard/modules/sidebar/components/Secondary.vue b/app/javascript/dashboard/modules/sidebar/components/Secondary.vue
new file mode 100644
index 000000000..961c11e50
--- /dev/null
+++ b/app/javascript/dashboard/modules/sidebar/components/Secondary.vue
@@ -0,0 +1,215 @@
+<template>
+  <div class="main-nav secondary-menu">
+    <transition-group name="menu-list" tag="ul" class="menu vertical">
+      <sidebar-item
+        v-if="shouldShowConversationsSideMenu"
+        :key="inboxSection.toState"
+        :menu-item="inboxSection"
+      />
+      <sidebar-item
+        v-if="shouldShowTeamsSideMenu"
+        :key="teamSection.toState"
+        :menu-item="teamSection"
+      />
+      <sidebar-item
+        v-if="shouldShowConversationsSideMenu"
+        :key="labelSection.toState"
+        :menu-item="labelSection"
+        @add-label="showAddLabelPopup"
+      />
+      <sidebar-item
+        v-if="shouldShowContactSideMenu"
+        :key="contactLabelSection.key"
+        :menu-item="contactLabelSection"
+        @add-label="showAddLabelPopup"
+      />
+      <sidebar-item
+        v-if="shouldShowCampaignSideMenu"
+        :key="campaignSubSection.key"
+        :menu-item="campaignSubSection"
+      />
+      <sidebar-item
+        v-if="shouldShowReportsSideMenu"
+        :key="reportsSubSection.key"
+        :menu-item="reportsSubSection"
+      />
+      <sidebar-item
+        v-if="shouldShowSettingsSideMenu"
+        :key="settingsSubMenu.key"
+        :menu-item="settingsSubMenu"
+      />
+      <sidebar-item
+        v-if="shouldShowNotificationsSideMenu"
+        :key="notificationsSubMenu.key"
+        :menu-item="notificationsSubMenu"
+      />
+    </transition-group>
+  </div>
+</template>
+<script>
+import { frontendURL } from '../../../helper/URLHelper';
+import SidebarItem from 'dashboard/components/layout/SidebarItem';
+import routesMixin from 'dashboard/modules/sidebar/mixins/routes.mixin';
+
+export default {
+  components: {
+    SidebarItem,
+  },
+  mixins: [routesMixin],
+  props: {
+    accountId: {
+      type: Number,
+      default: 0,
+    },
+    accountLabels: {
+      type: Array,
+      default: () => [],
+    },
+    inboxes: {
+      type: Array,
+      default: () => [],
+    },
+    teams: {
+      type: Array,
+      default: () => [],
+    },
+    menuItems: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    inboxSection() {
+      return {
+        icon: 'folder',
+        label: 'INBOXES',
+        hasSubMenu: true,
+        newLink: true,
+        newLinkTag: 'NEW_INBOX',
+        key: 'inbox',
+        cssClass: 'menu-title align-justify',
+        toState: frontendURL(`accounts/${this.accountId}/settings/inboxes/new`),
+        toStateName: 'settings_inbox_new',
+        newLinkRouteName: 'settings_inbox_new',
+        children: this.inboxes.map(inbox => ({
+          id: inbox.id,
+          label: inbox.name,
+          truncateLabel: true,
+          toState: frontendURL(`accounts/${this.accountId}/inbox/${inbox.id}`),
+          type: inbox.channel_type,
+          phoneNumber: inbox.phone_number,
+        })),
+      };
+    },
+    labelSection() {
+      return {
+        icon: 'number-symbol',
+        label: 'LABELS',
+        hasSubMenu: true,
+        newLink: true,
+        newLinkTag: 'NEW_LABEL',
+        key: 'label',
+        cssClass: 'menu-title align-justify',
+        toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
+        toStateName: 'labels_list',
+        showModalForNewItem: true,
+        modalName: 'AddLabel',
+        children: this.accountLabels.map(label => ({
+          id: label.id,
+          label: label.title,
+          color: label.color,
+          truncateLabel: true,
+          toState: frontendURL(
+            `accounts/${this.accountId}/label/${label.title}`
+          ),
+        })),
+      };
+    },
+    contactLabelSection() {
+      return {
+        icon: 'number-symbol',
+        label: 'TAGGED_WITH',
+        hasSubMenu: true,
+        key: 'label',
+        newLink: true,
+        newLinkTag: 'NEW_LABEL',
+        cssClass: 'menu-title align-justify',
+        toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
+        toStateName: 'labels_list',
+        showModalForNewItem: true,
+        modalName: 'AddLabel',
+        children: this.accountLabels.map(label => ({
+          id: label.id,
+          label: label.title,
+          color: label.color,
+          truncateLabel: true,
+          toState: frontendURL(
+            `accounts/${this.accountId}/labels/${label.title}/contacts`
+          ),
+        })),
+      };
+    },
+    campaignSubSection() {
+      return this.getSubSectionByKey('campaigns');
+    },
+    teamSection() {
+      return {
+        icon: 'people-team',
+        label: 'TEAMS',
+        hasSubMenu: true,
+        newLink: true,
+        newLinkTag: 'NEW_TEAM',
+        key: 'team',
+        cssClass: 'menu-title align-justify teams-sidebar-menu',
+        toState: frontendURL(`accounts/${this.accountId}/settings/teams/new`),
+        toStateName: 'settings_teams_new',
+        newLinkRouteName: 'settings_teams_new',
+        children: this.teams.map(team => ({
+          id: team.id,
+          label: team.name,
+          truncateLabel: true,
+          toState: frontendURL(`accounts/${this.accountId}/team/${team.id}`),
+        })),
+      };
+    },
+
+    notificationsSubMenu() {
+      return {
+        icon: 'alert',
+        label: 'NOTIFICATIONS',
+        hasSubMenu: false,
+        cssClass: 'menu-title align-justify',
+        key: 'notifications',
+        children: [],
+      };
+    },
+    settingsSubMenu() {
+      return this.getSubSectionByKey('settings');
+    },
+    reportsSubSection() {
+      return this.getSubSectionByKey('reports');
+    },
+  },
+  methods: {
+    getSubSectionByKey(subSectionKey) {
+      const menuItems = Object.values(
+        this.sideMenuItems[subSectionKey].menuItems
+      );
+      const campaignItem = this.menuItems.find(
+        ({ key }) => key === subSectionKey
+      );
+
+      return {
+        ...campaignItem,
+        children: menuItems.map(item => ({
+          ...item,
+          label: this.$t(`SIDEBAR.${item.label}`),
+        })),
+      };
+    },
+    showAddLabelPopup() {
+      this.$emit('add-label');
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/modules/sidebar/components/SecondaryNavItem.vue b/app/javascript/dashboard/modules/sidebar/components/SecondaryNavItem.vue
new file mode 100644
index 000000000..4cf9cb352
--- /dev/null
+++ b/app/javascript/dashboard/modules/sidebar/components/SecondaryNavItem.vue
@@ -0,0 +1,138 @@
+<template>
+  <router-link
+    v-slot="{ href, isActive, navigate }"
+    :to="to"
+    custom
+    active-class="active"
+  >
+    <li :class="{ active: isActive }">
+      <a
+        :href="href"
+        class="button clear menu-item text-truncate"
+        :class="{ 'is-active': isActive, 'text-truncate': shouldTruncate }"
+        @click="navigate"
+      >
+        <span v-if="icon" class="badge--icon">
+          <fluent-icon class="inbox-icon" :icon="icon" size="10" />
+        </span>
+        <span
+          v-if="labelColor"
+          class="badge--label"
+          :style="{ backgroundColor: labelColor }"
+        />
+        <span
+          :title="menuTitle"
+          class="menu-label button__content"
+          :class="{ 'text-truncate': shouldTruncate }"
+        >
+          {{ label }}
+        </span>
+        <span v-if="count" class="badge" :class="{ secondary: !isActive }">
+          {{ count }}
+        </span>
+      </a>
+    </li>
+  </router-link>
+</template>
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelColor: {
+      type: String,
+      default: '',
+    },
+    shouldTruncate: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    count: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    showIcon() {
+      return { 'text-truncate': this.shouldTruncate };
+    },
+    menuTitle() {
+      return this.shouldTruncate ? this.label : '';
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+$badge-size: var(--space-slab);
+
+.button {
+  margin: var(--space-small) 0;
+}
+
+.menu-item {
+  display: inline-flex;
+  color: var(--s-600);
+  font-weight: var(--font-weight-medium);
+  width: 100%;
+  height: var(--space-medium);
+  padding: var(--space-smaller) var(--space-smaller);
+  margin: var(--space-smaller) 0;
+  text-align: left;
+
+  &:hover {
+    background: var(--s-25);
+    color: var(--s-600);
+  }
+
+  &:focus {
+    border-color: var(--w-300);
+  }
+
+  &.is-active {
+    background: var(--w-25);
+    color: var(--w-500);
+    border-color: var(--w-25);
+  }
+}
+
+.menu-label {
+  flex-grow: 1;
+  line-height: var(--space-two);
+}
+
+.inbox-icon {
+  font-size: var(--font-size-nano);
+}
+
+.badge--label,
+.badge--icon {
+  display: inline-flex;
+  min-width: $badge-size;
+  height: $badge-size;
+  border-radius: var(--border-radius-small);
+  margin-right: var(--space-smaller);
+  background: var(--s-100);
+}
+
+.badge--icon {
+  align-items: center;
+  justify-content: center;
+}
+
+.badge.secondary {
+  min-width: unset;
+  background: var(--s-75);
+  color: var(--s-600);
+  font-weight: var(--font-weight-bold);
+}
+</style>
diff --git a/app/javascript/dashboard/modules/sidebar/mixins/routes.mixin.js b/app/javascript/dashboard/modules/sidebar/mixins/routes.mixin.js
new file mode 100644
index 000000000..2834e3bbf
--- /dev/null
+++ b/app/javascript/dashboard/modules/sidebar/mixins/routes.mixin.js
@@ -0,0 +1,35 @@
+import { getSidebarItems } from 'dashboard/i18n/default-sidebar';
+
+export default {
+  computed: {
+    currentRoute() {
+      return this.$store.state.route.name;
+    },
+    sideMenuItems() {
+      return getSidebarItems(this.accountId);
+    },
+    shouldShowConversationsSideMenu() {
+      return this.sideMenuItems.common.routes.includes(this.currentRoute);
+    },
+    shouldShowContactSideMenu() {
+      return this.sideMenuItems.contacts.routes.includes(this.currentRoute);
+    },
+    shouldShowCampaignSideMenu() {
+      return this.sideMenuItems.campaigns.routes.includes(this.currentRoute);
+    },
+    shouldShowSettingsSideMenu() {
+      return this.sideMenuItems.settings.routes.includes(this.currentRoute);
+    },
+    shouldShowReportsSideMenu() {
+      return this.sideMenuItems.reports.routes.includes(this.currentRoute);
+    },
+    shouldShowNotificationsSideMenu() {
+      return this.sideMenuItems.notifications.routes.includes(
+        this.currentRoute
+      );
+    },
+    shouldShowTeamsSideMenu() {
+      return this.shouldShowConversationsSideMenu && this.teams.length;
+    },
+  },
+};
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 7bb0bd847..670c93d5d 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -33,9 +33,9 @@ export default {
         return '';
       }
       if (this.isSidebarOpen) {
-        return 'off-canvas is-open ';
+        return 'off-canvas position-left is-transition-push is-open';
       }
-      return 'off-canvas position-left is-transition-push is-closed';
+      return 'off-canvas is-transition-push is-closed';
     },
     contentClassName() {
       if (this.isOnDesktop) {
@@ -44,7 +44,7 @@ export default {
       if (this.isSidebarOpen) {
         return 'off-canvas-content is-open-left has-transition-push has-position-left';
       }
-      return 'off-canvas-content';
+      return 'off-canvas-content has-transition-push';
     },
   },
   mounted() {
@@ -71,3 +71,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.off-canvas-content.is-open-left {
+  transform: translateX(25.4rem);
+}
+</style>
diff --git a/app/javascript/shared/assets/stylesheets/colors.scss b/app/javascript/shared/assets/stylesheets/colors.scss
index ba1b44045..78bfcfcb9 100644
--- a/app/javascript/shared/assets/stylesheets/colors.scss
+++ b/app/javascript/shared/assets/stylesheets/colors.scss
@@ -2,16 +2,17 @@
   --white: #fff;
   --white-transparent: rgba(255, 255, 255, 0.9);
 
-  --w-50: #E3F2FF;
-  --w-100: #BBDDFF;
-  --w-200: #8FC9FF;
-  --w-300: #61B3FF;
-  --w-400: #3FA3FF;
+  --w-25: #F5FAFF;
+  --w-50: #EBF5FF;
+  --w-100: #C2E1FF;
+  --w-200: #99CEFF;
+  --w-300: ##70BAFF;
+  --w-400: #47A6FF;
   --w-500: #1F93FF;
-  --w-600: #2284F0;
-  --w-700: #2272DC;
-  --w-800: #2161CA;
-  --w-900: #1F41AB;
+  --w-600: #1976CC;
+  --w-700: #135899;
+  --w-800: #0C3B66;
+  --w-900: #061D33;
 
   --g-50: #E6F8E6;
   --g-100: #C4EEC2;
@@ -35,16 +36,18 @@
   --y-800: #FDAD2A;
   --y-900: #F9841B;
 
-  --s-50: #E7EEFB;
-  --s-100: #C8D6E6;
-  --s-200: #ABBACE;
-  --s-300: #8C9EB6;
-  --s-400: #7489A4;
-  --s-500: #5D7592;
-  --s-600: #506781;
-  --s-700: #40546B;
-  --s-800: #314155;
-  --s-900: #1F2D3D;
+  --s-25: #F8FAFC;
+  --s-50: #F1F5F8;
+  --s-75: #EBF0F5;
+  --s-100: #E4EBF1;
+  --s-200: #C9D7E3;
+  --s-300: #AEC3D5;
+  --s-400: #93AFC8;
+  --s-500: #779BBB;
+  --s-600: #446888;
+  --s-700: #37546D;
+  --s-800: #293F51;
+  --s-900: #1B2836;
 
   --b-50: #F8F9FE;
   --b-100: #F2F3F7;
@@ -85,12 +88,12 @@
   --color-heading: #1f2d3d;
   --color-body: #3c4858;
 
-  --color-border: #e0e6ed;
-  --color-border-light: #f0f4f5;
-  --color-border-dark: #cad0d4;
+  --color-border: var(--s-75);
+  --color-border-light: var(--s-50);
+  --color-border-dark: var(--s-100);
 
-  --color-background: #f4f6fb;
-  --color-background-light: #f9fafc;
+  --color-background: var(--s-50);
+  --color-background-light: var(--s-25);
 
   // Social and inboxes brand colors
   --color-facebook-brand: #3b5998;
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index e5e61793e..99627b188 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -41,6 +41,7 @@
   "headphones-sound-wave-outline": "M3.5 12a8.5 8.5 0 0 1 17 0v2h-2.25a.75.75 0 0 0-.75.75v6.5c0 .414.336.75.75.75H19a3 3 0 0 0 3-3v-7c0-5.523-4.477-10-10-10S2 6.477 2 12v7a3 3 0 0 0 3 3h.75a.75.75 0 0 0 .75-.75v-6.5a.75.75 0 0 0-.75-.75H3.5v-2Zm17 3.5V19a1.5 1.5 0 0 1-1.5 1.5v-5h1.5ZM3.5 19v-3.5H5v5A1.5 1.5 0 0 1 3.5 19Zm9.25-7.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Zm-4 2.25a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5a.75.75 0 0 1 .75-.75Zm7.25.75a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z",
   "image-outline": "M17.75 3A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h11.5Zm.58 16.401-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07-5.807 5.687c.182.064.378.099.582.099h11.5c.203 0 .399-.035.58-.099l-5.805-5.686L18.33 19.4ZM17.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .208.036.408.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116 5.822 5.702c.067-.186.104-.386.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75Zm-2.498 2a2.252 2.252 0 1 1 0 4.504 2.252 2.252 0 0 1 0-4.504Zm0 1.5a.752.752 0 1 0 0 1.504.752.752 0 0 0 0-1.504Z",
   "info-outline": "M12 1.999c5.524 0 10.002 4.478 10.002 10.002 0 5.523-4.478 10.001-10.002 10.001-5.524 0-10.002-4.478-10.002-10.001C1.998 6.477 6.476 1.999 12 1.999Zm0 1.5a8.502 8.502 0 1 0 0 17.003A8.502 8.502 0 0 0 12 3.5Zm-.004 7a.75.75 0 0 1 .744.648l.007.102.003 5.502a.75.75 0 0 1-1.493.102l-.007-.101-.003-5.502a.75.75 0 0 1 .75-.75ZM12 7.003a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997Z",
+  "keyboard-outline": "M19.745 5a2.25 2.25 0 0 1 2.25 2.25v9.505a2.25 2.25 0 0 1-2.25 2.25H4.25A2.25 2.25 0 0 1 2 16.755V7.25A2.25 2.25 0 0 1 4.25 5h15.495Zm0 1.5H4.25a.75.75 0 0 0-.75.75v9.505c0 .414.336.75.75.75h15.495a.75.75 0 0 0 .75-.75V7.25a.75.75 0 0 0-.75-.75Zm-12.995 8h10.5a.75.75 0 0 1 .102 1.493L17.25 16H6.75a.75.75 0 0 1-.102-1.493l.102-.007h10.5-10.5ZM16.5 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-5.995 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm-3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm6 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM6 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm2.995 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm3 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z",
   "link-outline": "M9.25 7a.75.75 0 0 1 .11 1.492l-.11.008H7a3.5 3.5 0 0 0-.206 6.994L7 15.5h2.25a.75.75 0 0 1 .11 1.492L9.25 17H7a5 5 0 0 1-.25-9.994L7 7h2.25ZM17 7a5 5 0 0 1 .25 9.994L17 17h-2.25a.75.75 0 0 1-.11-1.492l.11-.008H17a3.5 3.5 0 0 0 .206-6.994L17 8.5h-2.25a.75.75 0 0 1-.11-1.492L14.75 7H17ZM7 11.25h10a.75.75 0 0 1 .102 1.493L17 12.75H7a.75.75 0 0 1-.102-1.493L7 11.25h10H7Z",
   "list-outline": "M2.75 18h12.5a.75.75 0 0 1 .102 1.493l-.102.007H2.75a.75.75 0 0 1-.102-1.494L2.75 18h12.5-12.5Zm0-6.5h18.5a.75.75 0 0 1 .102 1.493L21.25 13H2.75a.75.75 0 0 1-.102-1.493l.102-.007h18.5-18.5Zm0-6.497h15.5a.75.75 0 0 1 .102 1.493l-.102.007H2.75a.75.75 0 0 1-.102-1.493l.102-.007h15.5-15.5Z",
   "location-outline": "M5.843 4.568a8.707 8.707 0 1 1 12.314 12.314l-1.187 1.174c-.875.858-2.01 1.962-3.406 3.312a2.25 2.25 0 0 1-3.128 0l-3.491-3.396c-.439-.431-.806-.794-1.102-1.09a8.707 8.707 0 0 1 0-12.314Zm11.253 1.06A7.207 7.207 0 1 0 6.904 15.822L8.39 17.29a753.98 753.98 0 0 0 3.088 3 .75.75 0 0 0 1.043 0l3.394-3.3c.47-.461.863-.85 1.18-1.168a7.207 7.207 0 0 0 0-10.192ZM12 7.999a3.002 3.002 0 1 1 0 6.004 3.002 3.002 0 0 1 0-6.003Zm0 1.5a1.501 1.501 0 1 0 0 3.004 1.501 1.501 0 0 0 0-3.003Z",
@@ -57,6 +58,7 @@
   "people-outline": "M4 13.999 13 14a2 2 0 0 1 1.995 1.85L15 16v1.5C14.999 21 11.284 22 8.5 22c-2.722 0-6.335-.956-6.495-4.27L2 17.5v-1.501c0-1.054.816-1.918 1.85-1.995L4 14ZM15.22 14H20c1.054 0 1.918.816 1.994 1.85L22 16v1c-.001 3.062-2.858 4-5 4a7.16 7.16 0 0 1-2.14-.322c.336-.386.607-.827.802-1.327A6.19 6.19 0 0 0 17 19.5l.267-.006c.985-.043 3.086-.363 3.226-2.289L20.5 17v-1a.501.501 0 0 0-.41-.492L20 15.5h-4.051a2.957 2.957 0 0 0-.595-1.34L15.22 14H20h-4.78ZM4 15.499l-.1.01a.51.51 0 0 0-.254.136.506.506 0 0 0-.136.253l-.01.101V17.5c0 1.009.45 1.722 1.417 2.242.826.445 2.003.714 3.266.753l.317.005.317-.005c1.263-.039 2.439-.308 3.266-.753.906-.488 1.359-1.145 1.412-2.057l.005-.186V16a.501.501 0 0 0-.41-.492L13 15.5l-9-.001ZM8.5 3a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm9 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm-9-.5c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3Zm9 2c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2Z",
   "people-team-outline": "M14.754 10c.966 0 1.75.784 1.75 1.75v4.749a4.501 4.501 0 0 1-9.002 0V11.75c0-.966.783-1.75 1.75-1.75h5.502Zm0 1.5H9.252a.25.25 0 0 0-.25.25v4.749a3.001 3.001 0 0 0 6.002 0V11.75a.25.25 0 0 0-.25-.25ZM3.75 10h3.381a2.738 2.738 0 0 0-.618 1.5H3.75a.25.25 0 0 0-.25.25v3.249a2.501 2.501 0 0 0 3.082 2.433c.085.504.24.985.453 1.432A4.001 4.001 0 0 1 2 14.999V11.75c0-.966.784-1.75 1.75-1.75Zm13.125 0h3.375c.966 0 1.75.784 1.75 1.75V15a4 4 0 0 1-5.03 3.866c.214-.448.369-.929.455-1.433A2.5 2.5 0 0 0 20.5 15v-3.25a.25.25 0 0 0-.25-.25h-2.757a2.738 2.738 0 0 0-.618-1.5ZM12 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm6.5 1a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-13 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm6.5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6.5 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-13 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
   "person-outline": "M17.754 14a2.249 2.249 0 0 1 2.25 2.249v.575c0 .894-.32 1.76-.902 2.438-1.57 1.834-3.957 2.739-7.102 2.739-3.146 0-5.532-.905-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.577a2.249 2.249 0 0 1 2.249-2.25h11.501Zm0 1.5H6.253a.749.749 0 0 0-.75.749v.577c0 .536.192 1.054.54 1.461 1.253 1.468 3.219 2.214 5.957 2.214s4.706-.746 5.962-2.214a2.25 2.25 0 0 0 .541-1.463v-.575a.749.749 0 0 0-.749-.75ZM12 2.004a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z",
+  "power-outline": "M8.204 4.82a.75.75 0 0 1 .634 1.36A7.51 7.51 0 0 0 4.5 12.991c0 4.148 3.358 7.51 7.499 7.51s7.499-3.362 7.499-7.51a7.51 7.51 0 0 0-4.323-6.804.75.75 0 1 1 .637-1.358 9.01 9.01 0 0 1 5.186 8.162c0 4.976-4.029 9.01-9 9.01C7.029 22 3 17.966 3 12.99a9.01 9.01 0 0 1 5.204-8.17ZM12 2.496a.75.75 0 0 1 .743.648l.007.102v7.5a.75.75 0 0 1-1.493.102l-.007-.102v-7.5a.75.75 0 0 1 .75-.75Z",
   "quote-outline": "M7.5 6a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.555-1.24 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.64-1.737 2.66-3.674 3.077-5.859A2.5 2.5 0 1 1 7.5 6Zm9 0a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.56-1.238 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.643-1.738 2.662-3.672 3.078-5.859A2.5 2.5 0 1 1 16.5 6Zm-9 1.5a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Zm9 0a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Z",
   "resize-large-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5A3.25 3.25 0 0 1 6.25 3h1.5a.75.75 0 0 1 0 1.5h-1.5ZM19.5 6.25a1.75 1.75 0 0 0-1.75-1.75h-1.5a.75.75 0 0 1 0-1.5h1.5A3.25 3.25 0 0 1 21 6.25v1.5a.75.75 0 0 1-1.5 0v-1.5ZM19.5 17.75a1.75 1.75 0 0 1-1.75 1.75h-1.5a.75.75 0 0 0 0 1.5h1.5A3.25 3.25 0 0 0 21 17.75v-1.5a.75.75 0 0 0-1.5 0v1.5ZM4.5 17.75c0 .966.784 1.75 1.75 1.75h1.5a.75.75 0 0 1 0 1.5h-1.5A3.25 3.25 0 0 1 3 17.75v-1.5a.75.75 0 0 1 1.5 0v1.5ZM8.25 6A2.25 2.25 0 0 0 6 8.25v7.5A2.25 2.25 0 0 0 8.25 18h7.5A2.25 2.25 0 0 0 18 15.75v-7.5A2.25 2.25 0 0 0 15.75 6h-7.5ZM7.5 8.25a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-.75.75h-7.5a.75.75 0 0 1-.75-.75v-7.5Z",
   "search-outline": "M10 2.75a7.25 7.25 0 0 1 5.63 11.819l4.9 4.9a.75.75 0 0 1-.976 1.134l-.084-.073-4.901-4.9A7.25 7.25 0 1 1 10 2.75Zm0 1.5a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Z",
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
new file mode 100644
index 000000000..3240275d9
--- /dev/null
+++ b/app/javascript/shared/components/ui/dropdown/DropdownDivider.vue
@@ -0,0 +1,17 @@
+<template>
+  <li
+    class="dropdown-menu--divider"
+    :tabindex="null"
+    :aria-disabled="true"
+  ></li>
+</template>
+<script>
+export default {};
+</script>
+<style lang="scss" scoped>
+.dropdown-menu--divider {
+  list-style: none;
+  margin: var(--space-small) 0;
+  border-bottom: 1px solid var(--s-50);
+}
+</style>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
new file mode 100644
index 000000000..d96865abd
--- /dev/null
+++ b/app/javascript/shared/components/ui/dropdown/DropdownHeader.vue
@@ -0,0 +1,34 @@
+<template>
+  <li class="dropdown-menu--header" :tabindex="null" :aria-disabled="true">
+    <span class="title">{{ title }}</span>
+  </li>
+</template>
+<script>
+export default {
+  componentName: 'WootDropdownMenu',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.dropdown-menu--header {
+  list-style: none;
+
+  .title {
+    width: 100%;
+    display: block;
+    text-align: left;
+    white-space: nowrap;
+    padding: var(--space-small) var(--space-small);
+    margin-top: var(--space-smaller);
+    font-size: var(--font-size-mini);
+    color: var(--s-600);
+    font-weight: var(--font-weight-medium);
+    border-radius: var(--border-radius-normal);
+  }
+}
+</style>
diff --git a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
index 44e1fdfe8..225b67b1d 100644
--- a/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
+++ b/app/javascript/shared/components/ui/dropdown/DropdownItem.vue
@@ -35,8 +35,12 @@ export default {
     .button {
       width: 100%;
       text-align: left;
+      color: var(--s-700);
       white-space: nowrap;
       display: inline-flex;
+      padding: var(--space-small);
+      padding-top: var(--space-small);
+      padding-bottom: var(--space-small);
       border-radius: var(--border-radius-normal);
 
       &:hover {

From 0a18993b707d6dc0b5a88f166e056cb036fcb0d1 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 1 Dec 2021 15:18:41 +0530
Subject: [PATCH 45/69] fix: Changes thumbnail colors to new color scheme
 (#3483)

* Enhancement: Updates sidebar to a new design (#2733)

* feat: Changes primary navbar to new design (#2598)

* feat: updates design for secondary navbar (#2612)

* Changes primary nvbar to new design

* Updates design for contexual sidebar

* Fixes issues with JSON

* Remove duplication of notificatons in Navigation

* Fixes broken tests

* Fixes broken tests

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

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

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/components/layout/SidebarItem.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Update app/javascript/dashboard/modules/sidebar/components/Secondary.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* Chore: Update design changes to features

* Fixes menu transitions and refactors code

* Refactors sidebar routeing logic

* lint error fixes

* Fixes dropdown menu styles

* Fixes secondary new item links

* Fixes lint scss issues

* fixes linter issues

* Fixes broken test cases

* Update AvailabilityStatus.spec.js

* Review feedbacks

* Fixes add modal for label

* Add tooltip for primary menu item

* Tooltip for notifications

* Adds tooltip for primary menu items

* Review fixes

* Review fixes

* Fix merge issues

* fixes logo size for login pages

* fixes Merge breaks with styles

* fix: Changes thumbnail colors to new color scheme

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .../components/Accordion/AccordionItem.vue    |  6 ++---
 .../dashboard/components/widgets/Avatar.vue   | 17 ++++++++----
 .../components/widgets/Thumbnail.vue          | 26 +++++++++----------
 .../conversation/ConversationInfo.vue         |  2 +-
 .../customAttributes/CustomAttributes.vue     |  4 +--
 .../shared/assets/stylesheets/colors.scss     |  1 +
 6 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index 2bcfaffb7..182e2b464 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -66,9 +66,9 @@ export default {
 }
 .cw-accordion--title {
   align-items: center;
-  background: var(--b-50);
-  border-bottom: 1px solid var(--color-border);
-  border-top: 1px solid var(--color-border);
+  background: var(--s-50);
+  border-bottom: 1px solid var(--s-100);
+  border-top: 1px solid var(--s-100);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index 5489278d5..9a409f18b 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -22,7 +22,7 @@ export default {
     },
     color: {
       type: String,
-      default: '#1f93ff',
+      default: '',
     },
     customStyle: {
       type: Object,
@@ -43,15 +43,21 @@ export default {
   },
   computed: {
     style() {
-      return {
+      let style = {
         width: `${this.size}px`,
         height: `${this.size}px`,
         borderRadius: this.rounded ? '50%' : 0,
         lineHeight: `${this.size + Math.floor(this.size / 20)}px`,
-        backgroundColor: this.backgroundColor,
         fontSize: `${Math.floor(this.size / 2.5)}px`,
-        color: this.color,
       };
+
+      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);
@@ -81,6 +87,7 @@ export default {
   align-items: center;
   justify-content: center;
   text-align: center;
-  background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
+  background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
+  color: var(--w-600);
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 3bc92af83..5a4a69008 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -11,7 +11,6 @@
       v-else
       :username="username"
       :class="thumbnailClass"
-      color="white"
       :size="avatarSize"
     />
     <img
@@ -167,12 +166,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/foundation-settings';
-@import '~dashboard/assets/scss/mixins';
-
 .user-thumbnail-box {
-  @include flex-shrink;
+  flex: 0 0 auto;
+  max-width: 100%;
   position: relative;
 
   .user-thumbnail {
@@ -190,18 +186,18 @@ export default {
   .source-badge {
     background: white;
     border-radius: var(--border-radius-small);
-    bottom: -$space-micro;
+    bottom: var(--space-minus-micro);
     box-shadow: var(--shadow-small);
-    height: $space-slab;
+    height: var(--space-slab);
     padding: var(--space-micro);
     position: absolute;
-    right: $zero;
-    width: $space-slab;
+    right: 0;
+    width: var(--space-slab);
   }
 
   .user-online-status {
     border-radius: 50%;
-    bottom: $space-micro;
+    bottom: var(--space-micro);
 
     &:after {
       content: ' ';
@@ -209,11 +205,15 @@ export default {
   }
 
   .user-online-status--online {
-    background: $success-color;
+    background: var(--g-400);
   }
 
   .user-online-status--busy {
-    background: $warning-color;
+    background: var(--y-700);
+  }
+
+  .user-online-status--offline {
+    background: var(--s-500);
   }
 
   .user-online-status--offline {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
index 60ddc1c1c..07883b08a 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationInfo.vue
@@ -138,7 +138,7 @@ export default {
   border-bottom: 1px solid var(--color-border-light);
 
   &:nth-child(2n) {
-    background: var(--b-50);
+    background: var(--s-25);
   }
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index ece28d004..efef9607e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -102,7 +102,7 @@ export default {
   &.odd {
     .conversation--attribute {
       &:nth-child(2n + 1) {
-        background: var(--b-50);
+        background: var(--s-25);
       }
     }
   }
@@ -110,7 +110,7 @@ export default {
   &.even {
     .conversation--attribute {
       &:nth-child(2n) {
-        background: var(--b-50);
+        background: var(--s-25);
       }
     }
   }
diff --git a/app/javascript/shared/assets/stylesheets/colors.scss b/app/javascript/shared/assets/stylesheets/colors.scss
index 78bfcfcb9..5784bb6bf 100644
--- a/app/javascript/shared/assets/stylesheets/colors.scss
+++ b/app/javascript/shared/assets/stylesheets/colors.scss
@@ -4,6 +4,7 @@
 
   --w-25: #F5FAFF;
   --w-50: #EBF5FF;
+  --w-75: #D6EBFF;
   --w-100: #C2E1FF;
   --w-200: #99CEFF;
   --w-300: ##70BAFF;

From 2a5932cf1b20e8b31f0a640afa6f45dad1475ea3 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 1 Dec 2021 16:04:02 +0530
Subject: [PATCH 46/69] chore: Fixes error in reply box code (#3494)

---
 .../widgets/conversation/MoreActions.vue          | 15 +++++++++------
 .../components/widgets/conversation/ReplyBox.vue  |  1 -
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index f5db4bff7..8882f7919 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -3,20 +3,26 @@
     <woot-button
       v-if="!currentChat.muted"
       v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      class="hollow secondary actions--button"
+      variant="smooth"
+      size="small"
+      color-scheme="secondary"
       icon="speaker-mute"
       @click="mute"
     />
     <woot-button
       v-else
       v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      class="hollow secondary actions--button"
+      variant="smooth"
+      size="small"
+      color-scheme="secondary"
       icon="speaker-1"
       @click="unmute"
     />
     <woot-button
       v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      class="hollow secondary actions--button"
+      variant="smooth"
+      size="small"
+      color-scheme="secondary"
       icon="share"
       @click="toggleEmailActionsModal"
     />
@@ -89,10 +95,7 @@ export default {
   align-items: center;
 
   .button {
-    font-size: var(--font-size-large);
     margin-right: var(--space-small);
-    border-color: var(--color-border);
-    color: var(--s-400);
   }
 }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 8b7b68069..952b81bbc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -51,7 +51,6 @@
         @toggle-user-mention="toggleUserMention"
         @toggle-canned-menu="toggleCannedMenu"
       />
-      <h1>{{ message }}</h1>
     </div>
     <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
       <attachment-preview

From 025bbf1bfb2fd2e2bc793115ae62869602f182a8 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 1 Dec 2021 18:25:22 +0530
Subject: [PATCH 47/69] chore: Add i18n survey transaltion in crowdin (#3496)

---
 crowdin.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/crowdin.yml b/crowdin.yml
index 66592e27d..bbc788ef0 100644
--- a/crowdin.yml
+++ b/crowdin.yml
@@ -8,3 +8,5 @@ files:
     translation: /config/locales/devise.%two_letters_code%.yml
   - source: /app/javascript/widget/i18n/locale/en.json
     translation: /app/javascript/widget/i18n/locale/%two_letters_code%.json
+  - source: /app/javascript/survey/i18n/locale/en.json
+    translation: /app/javascript/survey/i18n/locale/%two_letters_code%.json

From b826319776ee0d55536ac66f50b20b5b9c1f37e1 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Wed, 1 Dec 2021 23:21:02 +0530
Subject: [PATCH 48/69] chore: create CONTRIBUTING.md

---
 CONTRIBUTING.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 CONTRIBUTING.md

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 000000000..bfa510323
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,5 @@
+# Contributing to Chatwoot
+
+Thanks for taking the time to contribute! :tada::+1:
+
+Please refer to our [Contributing Guide](https://www.chatwoot.com/docs/contributing-guide) for detailed instructions. 

From 8b4134c7906ac1e73fff7d4cbdce87e7759cd5c1 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Wed, 1 Dec 2021 21:32:43 -0800
Subject: [PATCH 49/69] fix: Update route permissions in the new primary menu
 (#3499)

* fix: Display rolewise primary sidebar

* Fix issues with roles

* Fix active style

* Fix accessible menu

* Fix key missing

* Changes menu icon size

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
---
 .../dashboard/components/layout/Sidebar.vue   |  84 +++++-------
 .../layout/config/default-sidebar.js          |  19 +++
 .../layout/config}/sidebarItems/campaigns.js  |   3 +-
 .../layout/config}/sidebarItems/contacts.js   |  16 +--
 .../config/sidebarItems/conversations.js      |  28 ++++
 .../config}/sidebarItems/notifications.js     |   3 +-
 .../layout/config/sidebarItems/primaryMenu.js |  46 +++++++
 .../config/sidebarItems/profileSettings.js    |   7 +
 .../layout/config}/sidebarItems/reports.js    |   3 +-
 .../layout/config}/sidebarItems/settings.js   |  34 ++---
 .../layout/sidebarComponents}/Logo.vue        |   0
 .../sidebarComponents/NotificationBell.vue    |   4 +-
 .../layout/sidebarComponents/OptionsMenu.vue  |   2 +-
 .../layout/sidebarComponents}/Primary.vue     |  24 ++--
 .../sidebarComponents}/PrimaryNavItem.vue     |   0
 .../layout/sidebarComponents}/Secondary.vue   | 126 ++++++------------
 .../SecondaryChildNavItem.vue}                |  15 ++-
 .../SecondaryNavItem.vue}                     |  97 +++++++++-----
 .../dashboard/i18n/default-sidebar.js         |  17 ---
 .../dashboard/i18n/locale/en/settings.json    |   3 +-
 .../dashboard/i18n/sidebarItems/common.js     |  63 ---------
 .../modules/sidebar/mixins/routes.mixin.js    |  35 -----
 .../FluentIcon/dashboard-icons.json           |   2 +
 23 files changed, 282 insertions(+), 349 deletions(-)
 create mode 100644 app/javascript/dashboard/components/layout/config/default-sidebar.js
 rename app/javascript/dashboard/{i18n => components/layout/config}/sidebarItems/campaigns.js (87%)
 rename app/javascript/dashboard/{i18n => components/layout/config}/sidebarItems/contacts.js (57%)
 create mode 100644 app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
 rename app/javascript/dashboard/{i18n => components/layout/config}/sidebarItems/notifications.js (68%)
 create mode 100644 app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
 create mode 100644 app/javascript/dashboard/components/layout/config/sidebarItems/profileSettings.js
 rename app/javascript/dashboard/{i18n => components/layout/config}/sidebarItems/reports.js (94%)
 rename app/javascript/dashboard/{i18n => components/layout/config}/sidebarItems/settings.js (86%)
 rename app/javascript/dashboard/{modules/sidebar/components => components/layout/sidebarComponents}/Logo.vue (100%)
 rename app/javascript/dashboard/{modules/sidebar/components => components/layout/sidebarComponents}/Primary.vue (72%)
 rename app/javascript/dashboard/{modules/sidebar/components => components/layout/sidebarComponents}/PrimaryNavItem.vue (100%)
 rename app/javascript/dashboard/{modules/sidebar/components => components/layout/sidebarComponents}/Secondary.vue (55%)
 rename app/javascript/dashboard/{modules/sidebar/components/SecondaryNavItem.vue => components/layout/sidebarComponents/SecondaryChildNavItem.vue} (91%)
 rename app/javascript/dashboard/components/layout/{SidebarItem.vue => sidebarComponents/SecondaryNavItem.vue} (67%)
 delete mode 100644 app/javascript/dashboard/i18n/default-sidebar.js
 delete mode 100644 app/javascript/dashboard/i18n/sidebarItems/common.js
 delete mode 100644 app/javascript/dashboard/modules/sidebar/mixins/routes.mixin.js

diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index e393a9f7d..06ec9201c 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -1,41 +1,37 @@
 <template>
-  <aside class="woot-sidebar" :class="{ 'only-primary': !showSecondaryMenu }">
+  <aside class="woot-sidebar">
     <primary-sidebar
       :logo-source="globalConfig.logo"
       :installation-name="globalConfig.installationName"
       :account-id="accountId"
       :menu-items="primaryMenuItems"
+      :active-menu-item="activePrimaryMenu.key"
       @toggle-accounts="toggleAccountModal"
       @key-shortcut-modal="toggleKeyShortcutModal"
     />
-
     <secondary-sidebar
-      v-if="showSecondaryMenu"
       :account-id="accountId"
       :inboxes="inboxes"
-      :account-labels="accountLabels"
+      :labels="labels"
       :teams="teams"
-      :menu-items="primaryMenuItems"
+      :menu-config="activeSecondaryMenu"
+      :current-role="currentRole"
       @add-label="showAddLabelPopup"
     />
-
     <woot-key-shortcut-modal
       v-if="showShortcutModal"
       @close="closeKeyShortcutModal"
       @clickaway="closeKeyShortcutModal"
     />
-
     <account-selector
       :show-account-modal="showAccountModal"
       @close-account-modal="toggleAccountModal"
       @show-create-account-modal="openCreateAccountModal"
     />
-
     <add-account-modal
       :show="showCreateAccountModal"
       @close-account-create-modal="closeCreateAccountModal"
     />
-
     <woot-modal :show.sync="showAddLabelModal" :on-close="hideAddLabelPopup">
       <add-label-modal @close="hideAddLabelPopup" />
     </woot-modal>
@@ -46,14 +42,14 @@
 import { mapGetters } from 'vuex';
 
 import adminMixin from '../../mixins/isAdmin';
-import { getSidebarItems } from '../../i18n/default-sidebar';
+import { getSidebarItems } from './config/default-sidebar';
 import alertMixin from 'shared/mixins/alertMixin';
 
 import AccountSelector from './sidebarComponents/AccountSelector.vue';
 import AddAccountModal from './sidebarComponents/AddAccountModal.vue';
 import AddLabelModal from '../../routes/dashboard/settings/labels/AddLabel';
-import PrimarySidebar from 'dashboard/modules/sidebar/components/Primary';
-import SecondarySidebar from 'dashboard/modules/sidebar/components/Secondary';
+import PrimarySidebar from './sidebarComponents/Primary';
+import SecondarySidebar from './sidebarComponents/Secondary';
 import WootKeyShortcutModal from 'components/widgets/modal/WootKeyShortcutModal';
 import {
   hasPressedAltAndCKey,
@@ -93,38 +89,34 @@ export default {
       inboxes: 'inboxes/getInboxes',
       accountId: 'getCurrentAccountId',
       currentRole: 'getCurrentRole',
-      accountLabels: 'labels/getLabelsOnSidebar',
+      labels: 'labels/getLabelsOnSidebar',
       teams: 'teams/getMyTeams',
     }),
-
-    sideMenuItems() {
+    sideMenuConfig() {
       return getSidebarItems(this.accountId);
     },
     primaryMenuItems() {
-      const menuItems = Object.values(
-        getSidebarItems(this.accountId).common.menuItems
+      const menuItems = this.sideMenuConfig.primaryMenu;
+      return menuItems.filter(menuItem =>
+        menuItem.roles.includes(this.currentRole)
       );
+    },
+    activeSecondaryMenu() {
+      const { secondaryMenu } = this.sideMenuConfig;
+      const { name: currentRoute } = this.$route;
 
-      return menuItems;
+      const activeSecondaryMenu =
+        secondaryMenu.find(menuItem =>
+          menuItem.routes.includes(currentRoute)
+        ) || {};
+      return activeSecondaryMenu;
     },
-    currentRoute() {
-      return this.$store.state.route.name;
-    },
-    shouldShowNotificationsSideMenu() {
-      return this.sideMenuItems.notifications.routes.includes(
-        this.currentRoute
-      );
-    },
-    shouldShowProfileSideMenu() {
-      return (
-        this.currentRoute === 'profile_settings_index' ||
-        this.currentRoute === 'profile_settings'
-      );
-    },
-    showSecondaryMenu() {
-      if (this.shouldShowNotificationsSideMenu) return false;
-      if (this.shouldShowProfileSideMenu) return false;
-      return true;
+    activePrimaryMenu() {
+      const activePrimaryMenu =
+        this.primaryMenuItems.find(
+          menuItem => menuItem.key === this.activeSecondaryMenu.parentNav
+        ) || {};
+      return activePrimaryMenu;
     },
   },
   mounted() {
@@ -169,23 +161,11 @@ export default {
       }
     },
     isCurrentRouteSameAsNavigation(routeName) {
-      return router.currentRoute && router.currentRoute.name === routeName;
+      return this.$route.name === routeName;
     },
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
-    filterMenuItemsByRole(menuItems) {
-      if (!this.currentRole) {
-        return [];
-      }
-      return menuItems.filter(
-        menuItem =>
-          window.roleWiseRoutes[this.currentRole].indexOf(
-            menuItem.toStateName
-          ) > -1
-      );
-    },
-
     toggleAccountModal() {
       this.showAccountModal = !this.showAccountModal;
     },
@@ -208,12 +188,8 @@ export default {
 
 <style lang="scss" scoped>
 .woot-sidebar {
-  background: white;
+  background: var(--white);
   display: flex;
-
-  &.only-primary {
-    width: auto;
-  }
 }
 
 .secondary-menu {
diff --git a/app/javascript/dashboard/components/layout/config/default-sidebar.js b/app/javascript/dashboard/components/layout/config/default-sidebar.js
new file mode 100644
index 000000000..bbe2c44cd
--- /dev/null
+++ b/app/javascript/dashboard/components/layout/config/default-sidebar.js
@@ -0,0 +1,19 @@
+import conversations from './sidebarItems/conversations';
+import contacts from './sidebarItems/contacts';
+import reports from './sidebarItems/reports';
+import campaigns from './sidebarItems/campaigns';
+import settings from './sidebarItems/settings';
+import notifications from './sidebarItems/notifications';
+import primaryMenu from './sidebarItems/primaryMenu';
+
+export const getSidebarItems = accountId => ({
+  primaryMenu: primaryMenu(accountId),
+  secondaryMenu: [
+    conversations(accountId),
+    contacts(accountId),
+    reports(accountId),
+    campaigns(accountId),
+    settings(accountId),
+    notifications(accountId),
+  ],
+});
diff --git a/app/javascript/dashboard/i18n/sidebarItems/campaigns.js b/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
similarity index 87%
rename from app/javascript/dashboard/i18n/sidebarItems/campaigns.js
rename to app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
index 448b6b5d6..62598c7f1 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/campaigns.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js
@@ -1,6 +1,7 @@
-import { frontendURL } from '../../helper/URLHelper';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 const campaigns = accountId => ({
+  parentNav: 'campaigns',
   routes: ['settings_account_campaigns', 'one_off'],
   menuItems: [
     {
diff --git a/app/javascript/dashboard/i18n/sidebarItems/contacts.js b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
similarity index 57%
rename from app/javascript/dashboard/i18n/sidebarItems/contacts.js
rename to app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
index 1446be274..0729abcfe 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/contacts.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js
@@ -1,27 +1,21 @@
-import { frontendURL } from '../../helper/URLHelper';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 const contacts = accountId => ({
+  parentNav: 'contacts',
   routes: [
     'contacts_dashboard',
     'contact_profile_dashboard',
     'contacts_labels_dashboard',
   ],
-  menuItems: {
-    back: {
-      icon: 'chevron-left',
-      label: 'HOME',
-      hasSubMenu: false,
-      toStateName: 'home',
-      toState: frontendURL(`accounts/${accountId}/dashboard`),
-    },
-    contacts: {
+  menuItems: [
+    {
       icon: 'contact-card-group',
       label: 'ALL_CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),
       toStateName: 'contacts_dashboard',
     },
-  },
+  ],
 });
 
 export default contacts;
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js b/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
new file mode 100644
index 000000000..4def32a08
--- /dev/null
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
@@ -0,0 +1,28 @@
+import { frontendURL } from '../../../../helper/URLHelper';
+
+const conversations = accountId => ({
+  parentNav: 'conversations',
+  routes: [
+    'home',
+    'inbox_dashboard',
+    'inbox_conversation',
+    'conversation_through_inbox',
+    'notifications_dashboard',
+    'label_conversations',
+    'conversations_through_label',
+    'team_conversations',
+    'conversations_through_team',
+  ],
+  menuItems: [
+    {
+      icon: 'chat',
+      label: 'ALL_CONVERSATIONS',
+      key: 'conversations',
+      toState: frontendURL(`accounts/${accountId}/dashboard`),
+      toolTip: 'Conversation from all subscribed inboxes',
+      toStateName: 'home',
+    },
+  ],
+});
+
+export default conversations;
diff --git a/app/javascript/dashboard/i18n/sidebarItems/notifications.js b/app/javascript/dashboard/components/layout/config/sidebarItems/notifications.js
similarity index 68%
rename from app/javascript/dashboard/i18n/sidebarItems/notifications.js
rename to app/javascript/dashboard/components/layout/config/sidebarItems/notifications.js
index a78b23f42..e3b18ebc5 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/notifications.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/notifications.js
@@ -1,6 +1,7 @@
 const notifications = () => ({
+  parentNav: 'notifications',
   routes: ['notifications_index'],
-  menuItems: {},
+  menuItems: [],
 });
 
 export default notifications;
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
new file mode 100644
index 000000000..d35ba7ef2
--- /dev/null
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js
@@ -0,0 +1,46 @@
+import { frontendURL } from '../../../../helper/URLHelper';
+
+const primaryMenuItems = accountId => [
+  {
+    icon: 'chat',
+    key: 'conversations',
+    label: 'CONVERSATIONS',
+    toState: frontendURL(`accounts/${accountId}/dashboard`),
+    toStateName: 'home',
+    roles: ['administrator', 'agent'],
+  },
+  {
+    icon: 'book-contacts',
+    key: 'contacts',
+    label: 'CONTACTS',
+    toState: frontendURL(`accounts/${accountId}/contacts`),
+    toStateName: 'contacts_dashboard',
+    roles: ['administrator', 'agent'],
+  },
+  {
+    icon: 'arrow-trending-lines',
+    key: 'reports',
+    label: 'REPORTS',
+    toState: frontendURL(`accounts/${accountId}/reports`),
+    toStateName: 'settings_account_reports',
+    roles: ['administrator'],
+  },
+  {
+    icon: 'megaphone',
+    key: 'campaigns',
+    label: 'CAMPAIGNS',
+    toState: frontendURL(`accounts/${accountId}/campaigns`),
+    toStateName: 'settings_account_campaigns',
+    roles: ['administrator'],
+  },
+  {
+    icon: 'settings',
+    key: 'settings',
+    label: 'SETTINGS',
+    toState: frontendURL(`accounts/${accountId}/settings`),
+    toStateName: 'settings_home',
+    roles: ['administrator', 'agent'],
+  },
+];
+
+export default primaryMenuItems;
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/profileSettings.js b/app/javascript/dashboard/components/layout/config/sidebarItems/profileSettings.js
new file mode 100644
index 000000000..024b4d3f6
--- /dev/null
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/profileSettings.js
@@ -0,0 +1,7 @@
+const profileSettings = () => ({
+  parentNav: 'profileSettings',
+  routes: ['profile_settings_index'],
+  menuItems: [],
+});
+
+export default profileSettings;
diff --git a/app/javascript/dashboard/i18n/sidebarItems/reports.js b/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
similarity index 94%
rename from app/javascript/dashboard/i18n/sidebarItems/reports.js
rename to app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
index 4286ff7ba..a9c703c44 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/reports.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
@@ -1,6 +1,7 @@
-import { frontendURL } from '../../helper/URLHelper';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 const reports = accountId => ({
+  parentNav: 'reports',
   routes: [
     'settings_account_reports',
     'csat_reports',
diff --git a/app/javascript/dashboard/i18n/sidebarItems/settings.js b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
similarity index 86%
rename from app/javascript/dashboard/i18n/sidebarItems/settings.js
rename to app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
index fa3660320..3c872f25d 100644
--- a/app/javascript/dashboard/i18n/sidebarItems/settings.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
@@ -1,6 +1,7 @@
-import { frontendURL } from '../../helper/URLHelper';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 const settings = accountId => ({
+  parentNav: 'settings',
   routes: [
     'agent_list',
     'canned_list',
@@ -30,43 +31,36 @@ const settings = accountId => ({
     'settings_teams_edit_finish',
     'automation_list',
   ],
-  menuItems: {
-    back: {
-      icon: 'chevron-left',
-      label: 'HOME',
-      hasSubMenu: false,
-      toStateName: 'home',
-      toState: frontendURL(`accounts/${accountId}/dashboard`),
-    },
-    agents: {
+  menuItems: [
+    {
       icon: 'people',
       label: 'AGENTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
       toStateName: 'agent_list',
     },
-    teams: {
+    {
       icon: 'people-team',
       label: 'TEAMS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
       toStateName: 'settings_teams_list',
     },
-    inboxes: {
+    {
       icon: 'mail-inbox-all',
       label: 'INBOXES',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
       toStateName: 'settings_inbox_list',
     },
-    labels: {
+    {
       icon: 'tag',
       label: 'LABELS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
       toStateName: 'labels_list',
     },
-    attributes: {
+    {
       icon: 'code',
       label: 'CUSTOM_ATTRIBUTES',
       hasSubMenu: false,
@@ -75,14 +69,14 @@ const settings = accountId => ({
       ),
       toStateName: 'attributes_list',
     },
-    automation: {
+    {
       icon: 'autocorrect',
       label: 'AUTOMATION',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
       toStateName: 'automation_list',
     },
-    cannedResponses: {
+    {
       icon: 'chat-multiple',
       label: 'CANNED_RESPONSES',
       hasSubMenu: false,
@@ -91,28 +85,28 @@ const settings = accountId => ({
       ),
       toStateName: 'canned_list',
     },
-    settings_integrations: {
+    {
       icon: 'flash-on',
       label: 'INTEGRATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/integrations`),
       toStateName: 'settings_integrations',
     },
-    settings_applications: {
+    {
       icon: 'star-emphasis',
       label: 'APPLICATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
     },
-    general_settings_index: {
+    {
       icon: 'settings',
       label: 'ACCOUNT_SETTINGS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/general`),
       toStateName: 'general_settings_index',
     },
-  },
+  ],
 });
 
 export default settings;
diff --git a/app/javascript/dashboard/modules/sidebar/components/Logo.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
similarity index 100%
rename from app/javascript/dashboard/modules/sidebar/components/Logo.vue
rename to app/javascript/dashboard/components/layout/sidebarComponents/Logo.vue
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
index 6227f179c..82d858b30 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -10,7 +10,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import PrimaryNavItem from 'dashboard/modules/sidebar/components/PrimaryNavItem';
+import PrimaryNavItem from './PrimaryNavItem';
 
 export default {
   components: { PrimaryNavItem },
@@ -21,7 +21,7 @@ export default {
     }),
     unreadCount() {
       if (!this.notificationMetadata.unreadCount) {
-        return '0';
+        return '';
       }
 
       return this.notificationMetadata.unreadCount < 100
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 38b803308..7edde95a8 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -25,7 +25,7 @@
             variant="clear"
             color-scheme="secondary"
             size="small"
-            icon="ion-help-buoy"
+            icon="chat-help"
             @click="$emit('show-support-chat-window')"
           >
             {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
diff --git a/app/javascript/dashboard/modules/sidebar/components/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
similarity index 72%
rename from app/javascript/dashboard/modules/sidebar/components/Primary.vue
rename to app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index 80b00ab26..0f568ab75 100644
--- a/app/javascript/dashboard/modules/sidebar/components/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -12,7 +12,7 @@
         :icon="menuItem.icon"
         :name="menuItem.label"
         :to="menuItem.toState"
-        :is-child-menu-active="isMenuActive(menuItem, $route.name)"
+        :is-child-menu-active="menuItem.key === activeMenuItem"
       />
     </nav>
     <div class="menu vertical user-menu">
@@ -31,9 +31,9 @@
 <script>
 import Logo from './Logo';
 import PrimaryNavItem from './PrimaryNavItem';
-import OptionsMenu from 'dashboard/components/layout/sidebarComponents/OptionsMenu';
-import AgentDetails from 'dashboard/components/layout/sidebarComponents/AgentDetails';
-import NotificationBell from 'dashboard/components/layout/sidebarComponents/NotificationBell';
+import OptionsMenu from './OptionsMenu';
+import AgentDetails from './AgentDetails';
+import NotificationBell from './NotificationBell';
 
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
@@ -62,6 +62,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    activeMenuItem: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -79,18 +83,6 @@ export default {
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
-    isMenuActive(menuItem, currentRouteName) {
-      const { key = '' } = menuItem;
-
-      if (currentRouteName === key) return true;
-      // Conversations route is defaulted as home
-      // TODO: Needs to ewfactor old statenames to follow a structure while key naming.
-      if (currentRouteName.includes('inbox') && key === 'conversations')
-        return true;
-      if (currentRouteName.includes('conversations') && key === 'conversations')
-        return true;
-      return false;
-    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/modules/sidebar/components/PrimaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
similarity index 100%
rename from app/javascript/dashboard/modules/sidebar/components/PrimaryNavItem.vue
rename to app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
diff --git a/app/javascript/dashboard/modules/sidebar/components/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
similarity index 55%
rename from app/javascript/dashboard/modules/sidebar/components/Secondary.vue
rename to app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index 961c11e50..956dbf708 100644
--- a/app/javascript/dashboard/modules/sidebar/components/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -1,67 +1,34 @@
 <template>
-  <div class="main-nav secondary-menu">
+  <div v-if="menuConfig.menuItems.length" class="main-nav secondary-menu">
     <transition-group name="menu-list" tag="ul" class="menu vertical">
-      <sidebar-item
-        v-if="shouldShowConversationsSideMenu"
-        :key="inboxSection.toState"
-        :menu-item="inboxSection"
+      <secondary-nav-item
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
       />
-      <sidebar-item
-        v-if="shouldShowTeamsSideMenu"
-        :key="teamSection.toState"
-        :menu-item="teamSection"
-      />
-      <sidebar-item
-        v-if="shouldShowConversationsSideMenu"
-        :key="labelSection.toState"
-        :menu-item="labelSection"
+      <secondary-nav-item
+        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
+        :key="menuItem.key"
+        :menu-item="menuItem"
         @add-label="showAddLabelPopup"
       />
-      <sidebar-item
-        v-if="shouldShowContactSideMenu"
-        :key="contactLabelSection.key"
-        :menu-item="contactLabelSection"
-        @add-label="showAddLabelPopup"
-      />
-      <sidebar-item
-        v-if="shouldShowCampaignSideMenu"
-        :key="campaignSubSection.key"
-        :menu-item="campaignSubSection"
-      />
-      <sidebar-item
-        v-if="shouldShowReportsSideMenu"
-        :key="reportsSubSection.key"
-        :menu-item="reportsSubSection"
-      />
-      <sidebar-item
-        v-if="shouldShowSettingsSideMenu"
-        :key="settingsSubMenu.key"
-        :menu-item="settingsSubMenu"
-      />
-      <sidebar-item
-        v-if="shouldShowNotificationsSideMenu"
-        :key="notificationsSubMenu.key"
-        :menu-item="notificationsSubMenu"
-      />
     </transition-group>
   </div>
 </template>
 <script>
 import { frontendURL } from '../../../helper/URLHelper';
-import SidebarItem from 'dashboard/components/layout/SidebarItem';
-import routesMixin from 'dashboard/modules/sidebar/mixins/routes.mixin';
+import SecondaryNavItem from './SecondaryNavItem.vue';
 
 export default {
   components: {
-    SidebarItem,
+    SecondaryNavItem,
   },
-  mixins: [routesMixin],
   props: {
     accountId: {
       type: Number,
       default: 0,
     },
-    accountLabels: {
+    labels: {
       type: Array,
       default: () => [],
     },
@@ -73,12 +40,27 @@ export default {
       type: Array,
       default: () => [],
     },
-    menuItems: {
-      type: Array,
-      default: () => [],
+    menuConfig: {
+      type: Object,
+      default: () => {},
+    },
+    currentRole: {
+      type: String,
+      default: '',
     },
   },
   computed: {
+    accessibleMenuItems() {
+      if (!this.currentRole) {
+        return [];
+      }
+      return this.menuConfig.menuItems.filter(
+        menuItem =>
+          window.roleWiseRoutes[this.currentRole].indexOf(
+            menuItem.toStateName
+          ) > -1
+      );
+    },
     inboxSection() {
       return {
         icon: 'folder',
@@ -87,7 +69,6 @@ export default {
         newLink: true,
         newLinkTag: 'NEW_INBOX',
         key: 'inbox',
-        cssClass: 'menu-title align-justify',
         toState: frontendURL(`accounts/${this.accountId}/settings/inboxes/new`),
         toStateName: 'settings_inbox_new',
         newLinkRouteName: 'settings_inbox_new',
@@ -109,12 +90,11 @@ export default {
         newLink: true,
         newLinkTag: 'NEW_LABEL',
         key: 'label',
-        cssClass: 'menu-title align-justify',
         toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
         toStateName: 'labels_list',
         showModalForNewItem: true,
         modalName: 'AddLabel',
-        children: this.accountLabels.map(label => ({
+        children: this.labels.map(label => ({
           id: label.id,
           label: label.title,
           color: label.color,
@@ -133,12 +113,11 @@ export default {
         key: 'label',
         newLink: true,
         newLinkTag: 'NEW_LABEL',
-        cssClass: 'menu-title align-justify',
         toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
         toStateName: 'labels_list',
         showModalForNewItem: true,
         modalName: 'AddLabel',
-        children: this.accountLabels.map(label => ({
+        children: this.labels.map(label => ({
           id: label.id,
           label: label.title,
           color: label.color,
@@ -149,9 +128,6 @@ export default {
         })),
       };
     },
-    campaignSubSection() {
-      return this.getSubSectionByKey('campaigns');
-    },
     teamSection() {
       return {
         icon: 'people-team',
@@ -160,7 +136,6 @@ export default {
         newLink: true,
         newLinkTag: 'NEW_TEAM',
         key: 'team',
-        cssClass: 'menu-title align-justify teams-sidebar-menu',
         toState: frontendURL(`accounts/${this.accountId}/settings/teams/new`),
         toStateName: 'settings_teams_new',
         newLinkRouteName: 'settings_teams_new',
@@ -172,41 +147,18 @@ export default {
         })),
       };
     },
-
-    notificationsSubMenu() {
+    additionalSecondaryMenuItems() {
+      let conversationMenuItems = [this.inboxSection, this.labelSection];
+      if (this.teams.length) {
+        conversationMenuItems = [this.teamSection, ...conversationMenuItems];
+      }
       return {
-        icon: 'alert',
-        label: 'NOTIFICATIONS',
-        hasSubMenu: false,
-        cssClass: 'menu-title align-justify',
-        key: 'notifications',
-        children: [],
+        conversations: conversationMenuItems,
+        contacts: [this.contactLabelSection],
       };
     },
-    settingsSubMenu() {
-      return this.getSubSectionByKey('settings');
-    },
-    reportsSubSection() {
-      return this.getSubSectionByKey('reports');
-    },
   },
   methods: {
-    getSubSectionByKey(subSectionKey) {
-      const menuItems = Object.values(
-        this.sideMenuItems[subSectionKey].menuItems
-      );
-      const campaignItem = this.menuItems.find(
-        ({ key }) => key === subSectionKey
-      );
-
-      return {
-        ...campaignItem,
-        children: menuItems.map(item => ({
-          ...item,
-          label: this.$t(`SIDEBAR.${item.label}`),
-        })),
-      };
-    },
     showAddLabelPopup() {
       this.$emit('add-label');
     },
diff --git a/app/javascript/dashboard/modules/sidebar/components/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
similarity index 91%
rename from app/javascript/dashboard/modules/sidebar/components/SecondaryNavItem.vue
rename to app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index 4cf9cb352..7bf57df1a 100644
--- a/app/javascript/dashboard/modules/sidebar/components/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -13,7 +13,7 @@
         @click="navigate"
       >
         <span v-if="icon" class="badge--icon">
-          <fluent-icon class="inbox-icon" :icon="icon" size="10" />
+          <fluent-icon class="inbox-icon" :icon="icon" size="12" />
         </span>
         <span
           v-if="labelColor"
@@ -73,7 +73,8 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-$badge-size: var(--space-slab);
+$badge-size: var(--space-normal);
+$label-badge-size: var(--space-slab);
 
 .button {
   margin: var(--space-small) 0;
@@ -117,8 +118,6 @@ $badge-size: var(--space-slab);
 .badge--label,
 .badge--icon {
   display: inline-flex;
-  min-width: $badge-size;
-  height: $badge-size;
   border-radius: var(--border-radius-small);
   margin-right: var(--space-smaller);
   background: var(--s-100);
@@ -126,7 +125,15 @@ $badge-size: var(--space-slab);
 
 .badge--icon {
   align-items: center;
+  height: $badge-size;
   justify-content: center;
+  min-width: $badge-size;
+}
+
+.badge--label {
+  height: $label-badge-size;
+  min-width: $label-badge-size;
+  margin-left: var(--space-smaller);
 }
 
 .badge.secondary {
diff --git a/app/javascript/dashboard/components/layout/SidebarItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
similarity index 67%
rename from app/javascript/dashboard/components/layout/SidebarItem.vue
rename to app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index ecb5ae9a9..758a5e11a 100644
--- a/app/javascript/dashboard/components/layout/SidebarItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -1,16 +1,24 @@
 <template>
-  <li :class="computedClass" class="sidebar-item">
-    <a
-      class="sub-menu-title"
-      :class="getMenuItemClass"
-      data-tooltip
-      aria-haspopup="true"
-      :title="menuItem.toolTip"
-    >
+  <li class="sidebar-item">
+    <span v-if="hasSubMenu" class="secondary-menu--title fs-small">
       {{ $t(`SIDEBAR.${menuItem.label}`) }}
-    </a>
-    <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
-      <secondary-nav-item
+    </span>
+    <router-link
+      v-else
+      class="secondary-menu--title secondary-menu--link fs-small"
+      :class="computedClass"
+      :to="menuItem.toState"
+    >
+      <fluent-icon
+        :icon="menuItem.icon"
+        class="secondary-menu--icon"
+        size="14"
+      />
+      {{ $t(`SIDEBAR.${menuItem.label}`) }}
+    </router-link>
+
+    <ul v-if="hasSubMenu" class="nested vertical menu">
+      <secondary-child-nav-item
         v-for="child in menuItem.children"
         :key="child.id"
         :to="child.toState"
@@ -20,7 +28,7 @@
         :icon="computedInboxClass(child)"
       />
       <router-link
-        v-if="menuItem.newLink"
+        v-if="showItem(menuItem)"
         v-slot="{ href, isActive, navigate }"
         :to="menuItem.toState"
         custom
@@ -46,13 +54,13 @@
 <script>
 import { mapGetters } from 'vuex';
 
-import adminMixin from '../../mixins/isAdmin';
+import adminMixin from '../../../mixins/isAdmin';
 import { getInboxClassByType } from 'dashboard/helper/inbox';
 
-import SecondaryNavItem from 'dashboard/modules/sidebar/components/SecondaryNavItem';
+import SecondaryChildNavItem from './SecondaryChildNavItem';
 
 export default {
-  components: { SecondaryNavItem },
+  components: { SecondaryChildNavItem },
   mixins: [adminMixin],
   props: {
     menuItem: {
@@ -62,10 +70,8 @@ export default {
   },
   computed: {
     ...mapGetters({ activeInbox: 'getSelectedInbox' }),
-    getMenuItemClass() {
-      return this.menuItem.cssClass
-        ? `side-menu ${this.menuItem.cssClass}`
-        : 'side-menu';
+    hasSubMenu() {
+      return !!this.menuItem.children;
     },
     computedClass() {
       // If active Inbox is present
@@ -76,7 +82,7 @@ export default {
         this.$store.state.route.name === 'inbox_conversation' &&
         this.menuItem.toStateName === 'home'
       ) {
-        return 'active';
+        return 'is-active';
       }
       return ' ';
     },
@@ -88,14 +94,6 @@ export default {
       const classByType = getInboxClassByType(type, phoneNumber);
       return classByType;
     },
-    computedChildClass(child) {
-      if (!child.truncateLabel) return '';
-      return 'text-truncate';
-    },
-    computedChildTitle(child) {
-      if (!child.truncateLabel) return false;
-      return child.label;
-    },
     newLinkClick(e, navigate) {
       if (this.menuItem.newLinkRouteName) {
         navigate(e);
@@ -114,17 +112,46 @@ export default {
 </script>
 <style lang="scss" scoped>
 .sidebar-item {
-  margin: var(--space-small) 0;
+  margin: var(--space-smaller) 0 0;
 }
-.sub-menu-title {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 var(--space-small);
-  margin-bottom: var(--space-smaller);
+
+.secondary-menu--title {
   color: var(--s-600);
+  display: flex;
   font-weight: var(--font-weight-bold);
   line-height: var(--space-two);
-  text-transform: uppercase;
+  margin: var(--space-small) 0;
+  padding: 0 var(--space-small);
+}
+
+.secondary-menu--link {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: var(--space-small);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--border-radius-normal);
+
+  &:hover {
+    background: var(--s-25);
+    color: var(--s-600);
+  }
+
+  &:focus {
+    border-color: var(--w-300);
+  }
+
+  &.router-link-exact-active,
+  &.is-active {
+    background: var(--w-25);
+    color: var(--w-500);
+    border-color: var(--w-25);
+  }
+}
+
+.secondary-menu--icon {
+  margin-right: var(--space-smaller);
+  min-width: var(--space-normal);
 }
 
 .sub-menu-link {
diff --git a/app/javascript/dashboard/i18n/default-sidebar.js b/app/javascript/dashboard/i18n/default-sidebar.js
deleted file mode 100644
index f30701939..000000000
--- a/app/javascript/dashboard/i18n/default-sidebar.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import common from './sidebarItems/common';
-import contacts from './sidebarItems/contacts';
-import reports from './sidebarItems/reports';
-import campaigns from './sidebarItems/campaigns';
-import settings from './sidebarItems/settings';
-import notifications from './sidebarItems/notifications';
-
-// TODO - find hasSubMenu usage - July/2021
-
-export const getSidebarItems = accountId => ({
-  common: common(accountId),
-  contacts: contacts(accountId),
-  reports: reports(accountId),
-  campaigns: campaigns(accountId),
-  settings: settings(accountId),
-  notifications: notifications(accountId),
-});
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 7b09e40b8..b27bd548c 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -135,6 +135,7 @@
   },
   "SIDEBAR": {
     "CONVERSATIONS": "Conversations",
+    "ALL_CONVERSATIONS": "All Conversations",
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
@@ -209,4 +210,4 @@
       "FORWARD_SLASH_KEY": "/"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/dashboard/i18n/sidebarItems/common.js b/app/javascript/dashboard/i18n/sidebarItems/common.js
deleted file mode 100644
index 03af7dab1..000000000
--- a/app/javascript/dashboard/i18n/sidebarItems/common.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { frontendURL } from '../../helper/URLHelper';
-
-const common = accountId => ({
-  routes: [
-    'home',
-    'inbox_dashboard',
-    'inbox_conversation',
-    'conversation_through_inbox',
-    'notifications_dashboard',
-    'profile_settings',
-    'profile_settings_index',
-    'label_conversations',
-    'conversations_through_label',
-    'team_conversations',
-    'conversations_through_team',
-    'notifications_index',
-  ],
-  menuItems: {
-    assignedToMe: {
-      icon: 'chat',
-      label: 'CONVERSATIONS',
-      hasSubMenu: true,
-      key: 'conversations',
-      toState: frontendURL(`accounts/${accountId}/dashboard`),
-      toolTip: 'Conversation from all subscribed inboxes',
-      toStateName: 'home',
-    },
-    contacts: {
-      key: 'contacts',
-      icon: 'book-contacts',
-      label: 'CONTACTS',
-      hasSubMenu: true,
-      toState: frontendURL(`accounts/${accountId}/contacts`),
-      toStateName: 'contacts_dashboard',
-    },
-    reports: {
-      key: 'reports',
-      icon: 'arrow-trending-lines',
-      label: 'REPORTS',
-      hasSubMenu: true,
-      toState: frontendURL(`accounts/${accountId}/reports`),
-      toStateName: 'settings_account_reports',
-    },
-    campaigns: {
-      key: 'campaigns',
-      icon: 'megaphone',
-      label: 'CAMPAIGNS',
-      hasSubMenu: true,
-      toState: frontendURL(`accounts/${accountId}/campaigns`),
-      toStateName: 'settings_account_campaigns',
-    },
-    settings: {
-      key: 'settings',
-      icon: 'settings',
-      label: 'SETTINGS',
-      hasSubMenu: true,
-      toState: frontendURL(`accounts/${accountId}/settings`),
-      toStateName: 'settings_home',
-    },
-  },
-});
-
-export default common;
diff --git a/app/javascript/dashboard/modules/sidebar/mixins/routes.mixin.js b/app/javascript/dashboard/modules/sidebar/mixins/routes.mixin.js
deleted file mode 100644
index 2834e3bbf..000000000
--- a/app/javascript/dashboard/modules/sidebar/mixins/routes.mixin.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { getSidebarItems } from 'dashboard/i18n/default-sidebar';
-
-export default {
-  computed: {
-    currentRoute() {
-      return this.$store.state.route.name;
-    },
-    sideMenuItems() {
-      return getSidebarItems(this.accountId);
-    },
-    shouldShowConversationsSideMenu() {
-      return this.sideMenuItems.common.routes.includes(this.currentRoute);
-    },
-    shouldShowContactSideMenu() {
-      return this.sideMenuItems.contacts.routes.includes(this.currentRoute);
-    },
-    shouldShowCampaignSideMenu() {
-      return this.sideMenuItems.campaigns.routes.includes(this.currentRoute);
-    },
-    shouldShowSettingsSideMenu() {
-      return this.sideMenuItems.settings.routes.includes(this.currentRoute);
-    },
-    shouldShowReportsSideMenu() {
-      return this.sideMenuItems.reports.routes.includes(this.currentRoute);
-    },
-    shouldShowNotificationsSideMenu() {
-      return this.sideMenuItems.notifications.routes.includes(
-        this.currentRoute
-      );
-    },
-    shouldShowTeamsSideMenu() {
-      return this.shouldShowConversationsSideMenu && this.teams.length;
-    },
-  },
-};
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 99627b188..a9c6baca5 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -14,6 +14,7 @@
   "book-contacts-outline": "M15.5 12.25a.75.75 0 0 0-.75-.75h-5a.75.75 0 0 0-.75.75v.5c0 1 1.383 1.75 3.25 1.75s3.25-.75 3.25-1.75v-.5ZM14 8.745C14 7.78 13.217 7 12.25 7s-1.75.779-1.75 1.745a1.75 1.75 0 1 0 3.5 0ZM4 4.5A2.5 2.5 0 0 1 6.5 2H18a2.5 2.5 0 0 1 2.5 2.5v14.25a.75.75 0 0 1-.75.75H5.5a1 1 0 0 0 1 1h13.25a.75.75 0 0 1 0 1.5H6.5A2.5 2.5 0 0 1 4 19.5v-15Zm1.5 0V18H19V4.5a1 1 0 0 0-1-1H6.5a1 1 0 0 0-1 1Z",
   "building-bank-outline": "M13.032 2.325a1.75 1.75 0 0 0-2.064 0L3.547 7.74c-.978.713-.473 2.26.736 2.26H4.5v5.8A2.75 2.75 0 0 0 3 18.25v1.5c0 .413.336.75.75.75h16.5a.75.75 0 0 0 .75-.75v-1.5a2.75 2.75 0 0 0-1.5-2.45V10h.217c1.21 0 1.713-1.547.736-2.26l-7.421-5.416Zm-1.18 1.211a.25.25 0 0 1 .295 0L18.95 8.5H5.05l6.803-4.964ZM18 10v5.5h-2V10h2Zm-3.5 0v5.5h-1.75V10h1.75Zm-3.25 0v5.5H9.5V10h1.75Zm-5.5 7h12.5c.69 0 1.25.56 1.25 1.25V19h-15v-.75c0-.69.56-1.25 1.25-1.25ZM6 15.5V10h2v5.5H6Z",
   "call-outline": "m7.056 2.418 1.167-.351a2.75 2.75 0 0 1 3.302 1.505l.902 2.006a2.75 2.75 0 0 1-.633 3.139L10.3 10.11a.25.25 0 0 0-.078.155c-.044.397.225 1.17.845 2.245.451.781.86 1.33 1.207 1.637.242.215.375.261.432.245l2.01-.615a2.75 2.75 0 0 1 3.034 1.02l1.281 1.776a2.75 2.75 0 0 1-.339 3.605l-.886.84a3.75 3.75 0 0 1-3.587.889c-2.754-.769-5.223-3.093-7.435-6.924-2.215-3.836-2.992-7.14-2.276-9.913a3.75 3.75 0 0 1 2.548-2.652Zm.433 1.437a2.25 2.25 0 0 0-1.529 1.59c-.602 2.332.087 5.261 2.123 8.788 2.033 3.522 4.222 5.582 6.54 6.23a2.25 2.25 0 0 0 2.151-.534l.887-.84a1.25 1.25 0 0 0 .154-1.639l-1.28-1.775a1.25 1.25 0 0 0-1.38-.464l-2.015.617c-1.17.348-2.232-.593-3.372-2.568C9 11.93 8.642 10.9 8.731 10.099c.047-.416.24-.8.546-1.086l1.494-1.393a1.25 1.25 0 0 0 .288-1.427l-.902-2.006a1.25 1.25 0 0 0-1.5-.684l-1.168.352Z",
+  "chat-help-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.587-1.112l-3.826 1.067a1.25 1.25 0 0 1-1.54-1.54l1.068-3.823A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5A8.5 8.5 0 0 0 3.5 12c0 1.47.373 2.883 1.073 4.137l.15.27-1.112 3.984 3.987-1.112.27.15A8.5 8.5 0 1 0 12 3.5Zm0 12a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8.75a2.75 2.75 0 0 1 2.75 2.75c0 1.01-.297 1.574-1.051 2.359l-.169.171c-.622.622-.78.886-.78 1.47a.75.75 0 0 1-1.5 0c0-1.01.297-1.574 1.051-2.359l.169-.171c.622-.622.78-.886.78-1.47a1.25 1.25 0 0 0-2.493-.128l-.007.128a.75.75 0 0 1-1.5 0A2.75 2.75 0 0 1 12 6.75Z",
   "chat-multiple-outline": "M9.562 3a7.5 7.5 0 0 0-6.798 10.673l-.724 2.842a1.25 1.25 0 0 0 1.504 1.524c.75-.18 1.903-.457 2.93-.702A7.5 7.5 0 1 0 9.561 3Zm-6 7.5a6 6 0 1 1 3.33 5.375l-.244-.121-.264.063c-.923.22-1.99.475-2.788.667l.69-2.708.07-.276-.13-.253a5.971 5.971 0 0 1-.664-2.747Zm11 10.5c-1.97 0-3.762-.759-5.1-2h.1c.718 0 1.415-.089 2.08-.257.865.482 1.86.757 2.92.757.96 0 1.866-.225 2.67-.625l.243-.121.264.063c.922.22 1.966.445 2.74.61-.175-.751-.414-1.756-.642-2.651l-.07-.276.13-.253a5.971 5.971 0 0 0 .665-2.747 5.995 5.995 0 0 0-2.747-5.042 8.44 8.44 0 0 0-.8-2.047 7.503 7.503 0 0 1 4.344 10.263c.253 1.008.509 2.1.671 2.803a1.244 1.244 0 0 1-1.467 1.5 132.62 132.62 0 0 1-2.913-.64 7.476 7.476 0 0 1-3.088.663Z",
   "chat-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.587-1.112l-3.826 1.067a1.25 1.25 0 0 1-1.54-1.54l1.068-3.823A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5A8.5 8.5 0 0 0 3.5 12c0 1.47.373 2.883 1.073 4.137l.15.27-1.112 3.984 3.987-1.112.27.15A8.5 8.5 0 1 0 12 3.5ZM8.75 13h4.498a.75.75 0 0 1 .102 1.493l-.102.007H8.75a.75.75 0 0 1-.102-1.493L8.75 13h4.498H8.75Zm0-3.5h6.505a.75.75 0 0 1 .101 1.493l-.101.007H8.75a.75.75 0 0 1-.102-1.493L8.75 9.5h6.505H8.75Z",
   "checkmark-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-1.25 9.94 4.47-4.47a.75.75 0 0 1 1.133.976l-.073.084-5 5a.75.75 0 0 1-.976.073l-.084-.073-2.5-2.5a.75.75 0 0 1 .976-1.133l.084.073 1.97 1.97 4.47-4.47-4.47 4.47Z",
@@ -73,6 +74,7 @@
   "video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
   "warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",
 
+
   "brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
   "brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
   "brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",

From 1c29f5bbe491636c9febb53d3aa0b66fa83935ba Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 2 Dec 2021 11:47:49 +0530
Subject: [PATCH 50/69] bug: Fixes missing inbox icon in Twillio SMS channel.
 (#3502)

---
 .../shared/components/FluentIcon/dashboard-icons.json           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index a9c6baca5..b0bd49cdc 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -79,7 +79,7 @@
   "brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
   "brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
   "brand-line-outline": "M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314",
-  "brand-sms-outline": "M272.1 204.2v71.1c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.1 0-2.1-.6-2.6-1.3l-32.6-44v42.2c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.8 0-3.2-1.4-3.2-3.2v-71.1c0-1.8 1.4-3.2 3.2-3.2H219c1 0 2.1 .5 2.6 1.4l32.6 44v-42.2c0-1.8 1.4-3.2 3.2-3.2h11.4c1.8-.1 3.3 1.4 3.3 3.1zm-82-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 1.8 1.4 3.2 3.2 3.2h11.4c1.8 0 3.2-1.4 3.2-3.2v-71.1c0-1.7-1.4-3.2-3.2-3.2zm-27.5 59.6h-31.1v-56.4c0-1.8-1.4-3.2-3.2-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 .9 .3 1.6 .9 2.2 .6 .5 1.3 .9 2.2 .9h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.7-1.4-3.2-3.1-3.2zM332.1 201h-45.7c-1.7 0-3.2 1.4-3.2 3.2v71.1c0 1.7 1.4 3.2 3.2 3.2h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2V234c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2v-11.4c-.1-1.7-1.5-3.2-3.2-3.2zM448 113.7V399c-.1 44.8-36.8 81.1-81.7 81H81c-44.8-.1-81.1-36.9-81-81.7V113c.1-44.8 36.9-81.1 81.7-81H367c44.8 .1 81.1 36.8 81 81.7zm-61.6 122.6c0-73-73.2-132.4-163.1-132.4-89.9 0-163.1 59.4-163.1 132.4 0 65.4 58 120.2 136.4 130.6 19.1 4.1 16.9 11.1 12.6 36.8-.7 4.1-3.3 16.1 14.1 8.8 17.4-7.3 93.9-55.3 128.2-94.7 23.6-26 34.9-52.3 34.9-81.5z",
+  "brand-sms-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.644-1.142l-4.29 1.117a.85.85 0 0 1-1.037-1.036l1.116-4.289A9.959 9.959 0 0 1 2 12C2 6.477 6.477 2 12 2Zm1.252 11H8.75l-.102.007a.75.75 0 0 0 0 1.486l.102.007h4.502l.101-.007a.75.75 0 0 0 0-1.486L13.252 13Zm1.998-3.5h-6.5l-.102.007a.75.75 0 0 0 0 1.486L8.75 11h6.5l.102-.007a.75.75 0 0 0 0-1.486L15.25 9.5Z",
   "brand-telegram-outline":"M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
   "brand-linkedin-outline": "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
 

From d7cfe6858e4368a9c96438f19a3c2db745a43a90 Mon Sep 17 00:00:00 2001
From: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Date: Fri, 3 Dec 2021 08:42:44 +0530
Subject: [PATCH 51/69] feat: Add advanced contact filters (#3471)

Co-authored-by: Tejaswini <tejaswini@chatwoot.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .codeclimate.yml                              |   3 +-
 app/javascript/dashboard/api/contacts.js      |   5 +
 .../dashboard/api/specs/contacts.spec.js      |  19 ++
 .../dashboard/components/ChatList.vue         |   2 +-
 .../components => }/FilterInput.vue           |   3 +-
 .../ConversationAdvancedFilter.vue            |  23 +-
 .../dashboard/i18n/locale/en/contact.json     |   1 +
 .../i18n/locale/en/contactFilters.json        |  34 +++
 .../dashboard/i18n/locale/en/index.js         |   2 +
 .../components/ContactsAdvancedFilters.vue    | 197 ++++++++++++++++++
 .../contacts/components/ContactsView.vue      |  41 +++-
 .../dashboard/contacts/components/Header.vue  |  46 +++-
 .../contacts/contactFilterItems/index.js      | 138 ++++++++++++
 .../store/modules/contacts/actions.js         |  23 ++
 .../store/modules/contacts/getters.js         |   3 +
 .../dashboard/store/modules/contacts/index.js |   1 +
 .../store/modules/contacts/mutations.js       |   8 +
 .../store/modules/conversations/getters.js    |   2 +-
 .../modules/specs/contacts/actions.spec.js    |  53 ++++-
 .../specs/contacts/filterApiResponse.js       |  38 ++++
 .../modules/specs/contacts/getters.spec.js    |  14 ++
 .../modules/specs/contacts/mutations.spec.js  |  38 ++++
 .../specs/conversations/getters.spec.js       |   6 +-
 .../dashboard/store/mutation-types.js         |   2 +
 .../assets/stylesheets/border-radius.scss     |   1 +
 .../FluentIcon/dashboard-icons.json           |  18 +-
 .../constants}/countries.js                   |   0
 app/services/contacts/filter_service.rb       |  25 ++-
 .../v1/accounts/contacts/filter.json.jbuilder |  11 +-
 lib/filters/filter_keys.json                  |   2 +-
 30 files changed, 716 insertions(+), 43 deletions(-)
 rename app/javascript/dashboard/components/widgets/{conversation/components => }/FilterInput.vue (98%)
 create mode 100644 app/javascript/dashboard/i18n/locale/en/contactFilters.json
 create mode 100644 app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js
 create mode 100644 app/javascript/dashboard/store/modules/specs/contacts/filterApiResponse.js
 rename app/javascript/{dashboard/components/widgets/conversation/advancedFilterItems => shared/constants}/countries.js (100%)

diff --git a/.codeclimate.yml b/.codeclimate.yml
index 9e8b209bd..af0c0714f 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -41,5 +41,6 @@ exclude_patterns:
   - "**/*.stories.js"
   - "stories/"
   - "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js"
-  - "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/countries.js"
+  - "app/javascript/shared/constants/countries.js"
   - "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js"
+  - "app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js"
diff --git a/app/javascript/dashboard/api/contacts.js b/app/javascript/dashboard/api/contacts.js
index 08c969248..8bea5f74b 100644
--- a/app/javascript/dashboard/api/contacts.js
+++ b/app/javascript/dashboard/api/contacts.js
@@ -53,6 +53,11 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
+  filter(page = 1, sortAttr = 'name', queryPayload) {
+    let requestURL = `${this.url}/filter?${buildContactParams(page, sortAttr)}`;
+    return axios.post(requestURL, queryPayload);
+  }
+
   importContacts(file) {
     const formData = new FormData();
     formData.append('import_file', file);
diff --git a/app/javascript/dashboard/api/specs/contacts.spec.js b/app/javascript/dashboard/api/specs/contacts.spec.js
index 08e6720d7..dfdc3a48b 100644
--- a/app/javascript/dashboard/api/specs/contacts.spec.js
+++ b/app/javascript/dashboard/api/specs/contacts.spec.js
@@ -11,6 +11,7 @@ describe('#ContactsAPI', () => {
     expect(contactAPI).toHaveProperty('update');
     expect(contactAPI).toHaveProperty('delete');
     expect(contactAPI).toHaveProperty('getConversations');
+    expect(contactAPI).toHaveProperty('filter');
   });
 
   describeWithAPIMock('API calls', context => {
@@ -81,6 +82,24 @@ describe('#ContactsAPI', () => {
         }
       );
     });
+
+    it('#filter', () => {
+      const queryPayload = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: ['fayaz'],
+            query_operator: null,
+          },
+        ],
+      };
+      contactAPI.filter(1, 'name', queryPayload);
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/contacts/filter?include_contact_inboxes=false&page=1&sort=name',
+        queryPayload
+      );
+    });
   });
 });
 
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index b5053a292..1517105df 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -156,7 +156,7 @@ export default {
       currentUserID: 'getCurrentUserID',
       activeInbox: 'getSelectedInbox',
       conversationStats: 'conversationStats/getStats',
-      appliedFilters: 'getAppliedFilters',
+      appliedFilters: 'getAppliedConversationFilters',
     }),
     hasAppliedFilters() {
       return this.appliedFilters.length;
diff --git a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue b/app/javascript/dashboard/components/widgets/FilterInput.vue
similarity index 98%
rename from app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
rename to app/javascript/dashboard/components/widgets/FilterInput.vue
index 45592bed1..e0d0ea3b6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput.vue
@@ -12,7 +12,7 @@
             :key="attribute.key"
             :value="attribute.key"
           >
-            {{ $t(`FILTER.ATTRIBUTES.${attribute.attributeI18nKey}`) }}
+            {{ attribute.name }}
           </option>
         </select>
 
@@ -73,7 +73,6 @@
         </div>
         <woot-button
           icon="dismiss"
-          icon-size="16"
           variant="clear"
           color-scheme="secondary"
           @click="removeFilter"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 487e55901..e01f3df47 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -49,9 +49,10 @@
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
 import { required, requiredIf } from 'vuelidate/lib/validators';
-import FilterInputBox from './components/FilterInput.vue';
+import FilterInputBox from '../FilterInput.vue';
 import languages from './advancedFilterItems/languages';
-import countries from './advancedFilterItems/countries';
+import countries from '/app/javascript/shared/constants/countries.js';
+import { mapGetters } from 'vuex';
 
 export default {
   components: {
@@ -94,19 +95,18 @@ export default {
       return this.filterTypes.map(type => {
         return {
           key: type.attributeKey,
-          name: type.attributeName,
-          attributeI18nKey: type.attributeI18nKey,
+          name: this.$t(`FILTER.ATTRIBUTES.${type.attributeI18nKey}`),
         };
       });
     },
-    getAppliedFilters() {
-      return this.$store.getters.getAppliedFilters;
-    },
+    ...mapGetters({
+      getAppliedConversationFilters: 'getAppliedConversationFilters',
+    }),
   },
   mounted() {
     this.$store.dispatch('campaigns/get');
-    if (this.getAppliedFilters.length) {
-      this.appliedFilters = this.getAppliedFilters;
+    if (this.getAppliedConversationFilters.length) {
+      this.appliedFilters = [...this.getAppliedConversationFilters];
     } else {
       this.appliedFilters.push({
         attribute_key: 'status',
@@ -125,7 +125,6 @@ export default {
       const type = this.filterTypes.find(filter => filter.attributeKey === key);
       return type.filterOperators;
     },
-    // eslint-disable-next-line consistent-return
     getDropdownValues(type) {
       const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
       switch (type) {
@@ -169,7 +168,7 @@ export default {
         case 'country_code':
           return countries;
         default:
-          break;
+          return undefined;
       }
     },
     appendNewFilter() {
@@ -190,11 +189,11 @@ export default {
     submitFilterQuery() {
       this.$v.$touch();
       if (this.$v.$invalid) return;
-      this.appliedFilters[this.appliedFilters.length - 1].query_operator = null;
       this.$store.dispatch(
         'setConversationFilters',
         JSON.parse(JSON.stringify(this.appliedFilters))
       );
+      this.appliedFilters[this.appliedFilters.length - 1].query_operator = null;
       this.$emit('applyFilter', this.appliedFilters);
     },
     resetFilter(index, currentFilter) {
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index a06331b4b..018a2acc1 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -176,6 +176,7 @@
     "FIELDS": "Contact fields",
     "SEARCH_BUTTON": "Search",
     "SEARCH_INPUT_PLACEHOLDER": "Search for contacts",
+    "FILTER_CONTACTS": "Filter",
     "LIST": {
       "LOADING_MESSAGE": "Loading contacts...",
       "404": "No contacts matches your search 🔍",
diff --git a/app/javascript/dashboard/i18n/locale/en/contactFilters.json b/app/javascript/dashboard/i18n/locale/en/contactFilters.json
new file mode 100644
index 000000000..8ebe460bb
--- /dev/null
+++ b/app/javascript/dashboard/i18n/locale/en/contactFilters.json
@@ -0,0 +1,34 @@
+{
+    "CONTACTS_FILTER": {
+        "TITLE": "Filter Contacts",
+        "SUBTITLE": "Add filters below and hit 'Submit' to filter contacts.",
+        "ADD_NEW_FILTER": "Add Filter",
+        "CLEAR_ALL_FILTERS": "Clear All Filters",
+        "FILTER_DELETE_ERROR": "You should have atleast one filter to save",
+        "SUBMIT_BUTTON_LABEL": "Submit",
+        "CANCEL_BUTTON_LABEL": "Cancel",
+        "CLEAR_BUTTON_LABEL": "Clear Filters",
+        "EMPTY_VALUE_ERROR": "Value is required",
+        "TOOLTIP_LABEL": "Filter contacts",
+        "QUERY_DROPDOWN_LABELS": {
+            "AND": "AND",
+            "OR": "OR"
+        },
+        "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"
+        },
+        "ATTRIBUTES": {
+            "NAME": "Name",
+            "EMAIL": "Email",
+            "PHONE_NUMBER": "Phone number",
+            "IDENTIFIER": "Identifier",
+            "CITY": "City",
+            "COUNTRY": "Country"
+        }
+    }
+}
diff --git a/app/javascript/dashboard/i18n/locale/en/index.js b/app/javascript/dashboard/i18n/locale/en/index.js
index 9555b40b3..c769ab472 100644
--- a/app/javascript/dashboard/i18n/locale/en/index.js
+++ b/app/javascript/dashboard/i18n/locale/en/index.js
@@ -20,6 +20,7 @@ import { default as _signup } from './signup.json';
 import { default as _teamsSettings } from './teamsSettings.json';
 import { default as _advancedFilters } from './advancedFilters.json';
 import { default as _automation } from './automation.json';
+import { default as _contactFilters } from './contactFilters.json';
 
 export default {
   ..._agentMgmt,
@@ -44,4 +45,5 @@ export default {
   ..._teamsSettings,
   ..._advancedFilters,
   ..._automation,
+  ..._contactFilters,
 };
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
new file mode 100644
index 000000000..5c0aae26c
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
@@ -0,0 +1,197 @@
+<template>
+  <div class="column">
+    <woot-modal-header :header-title="$t('CONTACTS_FILTER.TITLE')">
+      <p>{{ $t('CONTACTS_FILTER.SUBTITLE') }}</p>
+    </woot-modal-header>
+    <div class="row modal-content">
+      <div class="medium-12 columns filters-wrap">
+        <filter-input-box
+          v-for="(filter, i) in appliedFilters"
+          :key="i"
+          v-model="appliedFilters[i]"
+          :filter-attributes="filterAttributes"
+          :input-type="getInputType(appliedFilters[i].attribute_key)"
+          :operators="getOperators(appliedFilters[i].attribute_key)"
+          :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
+          :show-query-operator="i !== appliedFilters.length - 1"
+          :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
+          :v="$v.appliedFilters.$each[i]"
+          @resetFilter="resetFilter(i, appliedFilters[i])"
+          @removeFilter="removeFilter(i)"
+        />
+        <div class="filter-actions">
+          <woot-button
+            icon="add"
+            color-scheme="success"
+            variant="smooth"
+            size="small"
+            @click="appendNewFilter"
+          >
+            {{ $t('CONTACTS_FILTER.ADD_NEW_FILTER') }}
+          </woot-button>
+          <woot-button
+            v-if="hasAppliedFilters"
+            icon="subtract"
+            color-scheme="alert"
+            variant="smooth"
+            size="small"
+            @click="clearFilters"
+          >
+            {{ $t('CONTACTS_FILTER.CLEAR_ALL_FILTERS') }}
+          </woot-button>
+        </div>
+      </div>
+      <div class="medium-12 columns">
+        <div class="modal-footer justify-content-end w-full">
+          <woot-button class="button clear" @click.prevent="onClose">
+            {{ $t('CONTACTS_FILTER.CANCEL_BUTTON_LABEL') }}
+          </woot-button>
+          <woot-button @click="submitFilterQuery">
+            {{ $t('CONTACTS_FILTER.SUBMIT_BUTTON_LABEL') }}
+          </woot-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import alertMixin from 'shared/mixins/alertMixin';
+import { required } from 'vuelidate/lib/validators';
+import FilterInputBox from '../../../../components/widgets/FilterInput.vue';
+import countries from '/app/javascript/shared/constants/countries.js';
+import { mapGetters } from 'vuex';
+
+export default {
+  components: {
+    FilterInputBox,
+  },
+  mixins: [alertMixin],
+  props: {
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    filterTypes: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  validations: {
+    appliedFilters: {
+      required,
+      $each: {
+        values: {
+          required,
+        },
+      },
+    },
+  },
+  data() {
+    return {
+      show: true,
+      appliedFilters: [],
+    };
+  },
+  computed: {
+    filterAttributes() {
+      return this.filterTypes.map(type => {
+        return {
+          key: type.attributeKey,
+          name: this.$t(`CONTACTS_FILTER.ATTRIBUTES.${type.attributeI18nKey}`),
+        };
+      });
+    },
+    ...mapGetters({
+      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
+    }),
+    hasAppliedFilters() {
+      return this.getAppliedContactFilters.length;
+    },
+  },
+  mounted() {
+    if (this.getAppliedContactFilters.length) {
+      this.appliedFilters = [...this.getAppliedContactFilters];
+    } else {
+      this.appliedFilters.push({
+        attribute_key: 'name',
+        filter_operator: 'equal_to',
+        values: '',
+        query_operator: 'and',
+      });
+    }
+  },
+  methods: {
+    getInputType(key) {
+      const type = this.filterTypes.find(filter => filter.attributeKey === key);
+      return type.inputType;
+    },
+    getOperators(key) {
+      const type = this.filterTypes.find(filter => filter.attributeKey === key);
+      return type.filterOperators;
+    },
+    getDropdownValues(type) {
+      switch (type) {
+        case 'country_code':
+          return countries;
+        default:
+          return undefined;
+      }
+    },
+    appendNewFilter() {
+      this.appliedFilters.push({
+        attribute_key: 'name',
+        filter_operator: 'equal_to',
+        values: '',
+        query_operator: 'and',
+      });
+    },
+    removeFilter(index) {
+      if (this.appliedFilters.length <= 1) {
+        this.showAlert(this.$t('CONTACTS_FILTER.FILTER_DELETE_ERROR'));
+      } else {
+        this.appliedFilters.splice(index, 1);
+      }
+    },
+    submitFilterQuery() {
+      this.$v.$touch();
+      if (this.$v.$invalid) return;
+      this.$store.dispatch(
+        'contacts/setContactFilters',
+        JSON.parse(JSON.stringify(this.appliedFilters))
+      );
+      this.appliedFilters[this.appliedFilters.length - 1].query_operator = null;
+      this.$emit('applyFilter', this.appliedFilters);
+    },
+    resetFilter(index, currentFilter) {
+      this.appliedFilters[index].filter_operator = this.filterTypes.find(
+        filter => filter.attributeKey === currentFilter.attribute_key
+      ).filterOperators[0].value;
+      this.appliedFilters[index].values = '';
+    },
+    showUserInput(operatorType) {
+      if (operatorType === 'is_present' || operatorType === 'is_not_present')
+        return false;
+      return true;
+    },
+    clearFilters() {
+      this.$emit('clearFilters');
+      this.onClose();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.filters-wrap {
+  padding: var(--space-normal);
+  border-radius: var(--border-radius-large);
+  border: 1px solid var(--color-border);
+  background: var(--color-background-light);
+  margin-bottom: var(--space-normal);
+}
+
+.filter-actions {
+  margin-top: var(--space-normal);
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
index 6b1d6f6ed..1c7489e71 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
@@ -8,6 +8,7 @@
         :on-input-search="onInputSearch"
         :on-toggle-create="onToggleCreate"
         :on-toggle-import="onToggleImport"
+        :on-toggle-filter="onToggleFilters"
         :header-title="label"
       />
       <contacts-table
@@ -34,6 +35,19 @@
     <woot-modal :show.sync="showImportModal" :on-close="onToggleImport">
       <import-contacts v-if="showImportModal" :on-close="onToggleImport" />
     </woot-modal>
+    <woot-modal
+      :show.sync="showFiltersModal"
+      :on-close="onToggleFilters"
+      size="medium"
+    >
+      <contacts-advanced-filters
+        v-if="showFiltersModal"
+        :on-close="onToggleFilters"
+        :filter-types="contactFilterItems"
+        @applyFilter="onApplyFilter"
+        @clearFilters="clearFilters"
+      />
+    </woot-modal>
   </div>
 </template>
 
@@ -46,6 +60,9 @@ import ContactInfoPanel from './ContactInfoPanel';
 import CreateContact from 'dashboard/routes/dashboard/conversation/contact/CreateContact';
 import TableFooter from 'dashboard/components/widgets/TableFooter';
 import ImportContacts from './ImportContacts.vue';
+import ContactsAdvancedFilters from './ContactsAdvancedFilters.vue';
+import contactFilterItems from '../contactFilterItems';
+import filterQueryGenerator from '../../../../helper/filterQueryGenerator';
 
 const DEFAULT_PAGE = 1;
 
@@ -57,6 +74,7 @@ export default {
     ContactInfoPanel,
     CreateContact,
     ImportContacts,
+    ContactsAdvancedFilters,
   },
   props: {
     label: { type: String, default: '' },
@@ -68,6 +86,13 @@ export default {
       showImportModal: false,
       selectedContactId: '',
       sortConfig: { name: 'asc' },
+      showFiltersModal: false,
+      contactFilterItems: contactFilterItems.map(filter => ({
+        ...filter,
+        attributeName: this.$t(
+          `CONTACTS_FILTER.ATTRIBUTES.${filter.attributeI18nKey}`
+        ),
+      })),
     };
   },
   computed: {
@@ -133,7 +158,7 @@ export default {
     fetchContacts(page) {
       this.updatePageParam(page);
       let value = '';
-      if(this.searchQuery.charAt(0) === '+') {
+      if (this.searchQuery.charAt(0) === '+') {
         value = this.searchQuery.substring(1);
       } else {
         value = this.searchQuery;
@@ -188,6 +213,20 @@ export default {
       this.sortConfig = params;
       this.fetchContacts(this.meta.currentPage);
     },
+    onToggleFilters() {
+      this.showFiltersModal = !this.showFiltersModal;
+    },
+    onApplyFilter(payload) {
+      this.closeContactInfoPanel();
+      this.$store.dispatch('contacts/filter', {
+        queryPayload: filterQueryGenerator(payload),
+      });
+      this.showFiltersModal = false;
+    },
+    clearFilters() {
+      this.$store.dispatch('contacts/clearContactFilters');
+      this.fetchContacts(this.pageParameter);
+    },
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index 87d2e5177..2758da76d 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -19,17 +19,29 @@
           />
           <woot-button
             :is-loading="false"
+            class="clear"
             :class-names="searchButtonClass"
             @click="onSearchSubmit"
           >
             {{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
           </woot-button>
         </div>
-
+        <div class="filters__button-wrap">
+          <div v-if="hasAppliedFilters" class="filters__applied-indicator" />
+          <woot-button
+            class="margin-right-small clear"
+            color-scheme="secondary"
+            data-testid="create-new-contact"
+            icon="filter"
+            @click="onToggleFilter"
+          >
+            {{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
+          </woot-button>
+        </div>
         <woot-button
+          class="margin-right-small clear"
           color-scheme="success"
-          icon="add-circle"
-          class="margin-right-small"
+          icon="person-add"
           data-testid="create-new-contact"
           @click="onToggleCreate"
         >
@@ -38,7 +50,8 @@
 
         <woot-button
           color-scheme="info"
-          icon="cloud-backup"
+          icon="upload"
+          class="clear"
           @click="onToggleImport"
         >
           {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
@@ -49,6 +62,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   props: {
     headerTitle: {
@@ -75,6 +90,10 @@ export default {
       type: Function,
       default: () => {},
     },
+    onToggleFilter: {
+      type: Function,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -86,6 +105,12 @@ export default {
     searchButtonClass() {
       return this.searchQuery !== '' ? 'show' : '';
     },
+    ...mapGetters({
+      getAppliedContactFilters: 'contacts/getAppliedContactFilters',
+    }),
+    hasAppliedFilters() {
+      return this.getAppliedContactFilters.length;
+    },
   },
 };
 </script>
@@ -155,4 +180,17 @@ export default {
     visibility: visible;
   }
 }
+.filters__button-wrap {
+  position: relative;
+
+  .filters__applied-indicator {
+    position: absolute;
+    height: var(--space-small);
+    width: var(--space-small);
+    top: var(--space-smaller);
+    right: var(--space-slab);
+    background-color: var(--s-500);
+    border-radius: var(--border-radius-rounded);
+  }
+}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js b/app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js
new file mode 100644
index 000000000..fae8ac456
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js
@@ -0,0 +1,138 @@
+const filterTypes = [
+  {
+    attributeKey: 'name',
+    attributeI18nKey: 'NAME',
+    inputType: 'plain_text',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'email',
+    attributeI18nKey: 'EMAIL',
+    inputType: 'plain_text',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'phone_number',
+    attributeI18nKey: 'PHONE_NUMBER',
+    inputType: 'plain_text',
+    dataType: 'text',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'identifier',
+    attributeI18nKey: 'IDENTIFIER',
+    inputType: 'plain_text',
+    dataType: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'country_code',
+    attributeI18nKey: 'COUNTRY',
+    inputType: 'search_select',
+    dataType: 'number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+  {
+    attributeKey: 'city',
+    attributeI18nKey: 'CITY',
+    inputType: 'plain_text',
+    dataType: 'Number',
+    filterOperators: [
+      {
+        value: 'equal_to',
+        label: 'Equal to',
+      },
+      {
+        value: 'not_equal_to',
+        label: 'Not equal to',
+      },
+      {
+        value: 'contains',
+        label: 'Contains',
+      },
+      {
+        value: 'does_not_contain',
+        label: 'Does not contain',
+      },
+    ],
+    attribute_type: 'standard',
+  },
+];
+
+export default filterTypes;
diff --git a/app/javascript/dashboard/store/modules/contacts/actions.js b/app/javascript/dashboard/store/modules/contacts/actions.js
index 1cea2aad2..44bef1144 100644
--- a/app/javascript/dashboard/store/modules/contacts/actions.js
+++ b/app/javascript/dashboard/store/modules/contacts/actions.js
@@ -179,4 +179,27 @@ export const actions = {
       commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
     }
   },
+
+  filter: async ({ commit }, { page = 1, sortAttr, queryPayload } = {}) => {
+    commit(types.SET_CONTACT_UI_FLAG, { isFetching: true });
+    try {
+      const {
+        data: { payload, meta },
+      } = await ContactAPI.filter(page, sortAttr, queryPayload);
+      commit(types.CLEAR_CONTACTS);
+      commit(types.SET_CONTACTS, payload);
+      commit(types.SET_CONTACT_META, meta);
+      commit(types.SET_CONTACT_UI_FLAG, { isFetching: false });
+    } catch (error) {
+      commit(types.SET_CONTACT_UI_FLAG, { isFetching: false });
+    }
+  },
+
+  setContactFilters({ commit }, data) {
+    commit(types.SET_CONTACT_FILTERS, data);
+  },
+
+  clearContactFilters({ commit }) {
+    commit(types.CLEAR_CONTACT_FILTERS);
+  },
 };
diff --git a/app/javascript/dashboard/store/modules/contacts/getters.js b/app/javascript/dashboard/store/modules/contacts/getters.js
index cce21f796..c72176171 100644
--- a/app/javascript/dashboard/store/modules/contacts/getters.js
+++ b/app/javascript/dashboard/store/modules/contacts/getters.js
@@ -12,4 +12,7 @@ export const getters = {
   getMeta: $state => {
     return $state.meta;
   },
+  getAppliedContactFilters: _state => {
+    return _state.appliedFilters;
+  },
 };
diff --git a/app/javascript/dashboard/store/modules/contacts/index.js b/app/javascript/dashboard/store/modules/contacts/index.js
index b2657ca78..ba8d47642 100644
--- a/app/javascript/dashboard/store/modules/contacts/index.js
+++ b/app/javascript/dashboard/store/modules/contacts/index.js
@@ -17,6 +17,7 @@ const state = {
     isDeleting: false,
   },
   sortOrder: [],
+  appliedFilters: [],
 };
 
 export default {
diff --git a/app/javascript/dashboard/store/modules/contacts/mutations.js b/app/javascript/dashboard/store/modules/contacts/mutations.js
index 9e8e64e6d..51cf788bf 100644
--- a/app/javascript/dashboard/store/modules/contacts/mutations.js
+++ b/app/javascript/dashboard/store/modules/contacts/mutations.js
@@ -66,4 +66,12 @@ export const mutations = {
       }
     });
   },
+
+  [types.SET_CONTACT_FILTERS](_state, data) {
+    _state.appliedFilters = data;
+  },
+
+  [types.CLEAR_CONTACT_FILTERS](_state) {
+    _state.appliedFilters = [];
+  },
 };
diff --git a/app/javascript/dashboard/store/modules/conversations/getters.js b/app/javascript/dashboard/store/modules/conversations/getters.js
index 66682f2b8..e4b063899 100644
--- a/app/javascript/dashboard/store/modules/conversations/getters.js
+++ b/app/javascript/dashboard/store/modules/conversations/getters.js
@@ -31,7 +31,7 @@ const getters = {
       return isChatMine;
     });
   },
-  getAppliedFilters: _state => {
+  getAppliedConversationFilters: _state => {
     return _state.appliedFilters;
   },
   getUnAssignedChats: _state => activeFilters => {
diff --git a/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js b/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js
index 486b3e203..08b1b2067 100644
--- a/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js
@@ -6,9 +6,21 @@ import {
   DuplicateContactException,
   ExceptionWithMessage,
 } from '../../../../../shared/helpers/CustomErrors';
+import { filterApiResponse } from './filterApiResponse';
 
 const { actions } = Contacts;
 
+const filterQueryData = {
+  payload: [
+    {
+      attribute_key: 'email',
+      filter_operator: 'contains',
+      values: ['fayaz'],
+      query_operator: null,
+    },
+  ],
+};
+
 const commit = jest.fn();
 global.axios = axios;
 jest.mock('axios');
@@ -228,7 +240,7 @@ describe('#actions', () => {
       ]);
     });
   });
-   describe('#deleteCustomAttributes', () => {
+  describe('#deleteCustomAttributes', () => {
     it('sends correct mutations if API is success', async () => {
       axios.post.mockResolvedValue({ data: { payload: contactList[0] } });
       await actions.deleteCustomAttributes(
@@ -247,4 +259,43 @@ describe('#actions', () => {
       ).rejects.toThrow(Error);
     });
   });
+
+  describe('#fetchFilteredContacts', () => {
+    it('fetches filtered conversations with a mock commit', async () => {
+      axios.post.mockResolvedValue({
+        data: filterApiResponse,
+      });
+      await actions.filter({ commit }, filterQueryData);
+      expect(commit).toHaveBeenCalledTimes(5);
+      expect(commit.mock.calls).toEqual([
+        ['SET_CONTACT_UI_FLAG', { isFetching: true }],
+        ['CLEAR_CONTACTS'],
+        ['SET_CONTACTS', filterApiResponse.payload],
+        ['SET_CONTACT_META', filterApiResponse.meta],
+        ['SET_CONTACT_UI_FLAG', { isFetching: false }],
+      ]);
+    });
+  });
+
+  describe('#setContactsFilter', () => {
+    it('commits the correct mutation and sets filter state', () => {
+      const filters = [
+        {
+          attribute_key: 'email',
+          filter_operator: 'contains',
+          values: ['fayaz'],
+          query_operator: 'and',
+        },
+      ];
+      actions.setContactFilters({ commit }, filters);
+      expect(commit.mock.calls).toEqual([[types.SET_CONTACT_FILTERS, filters]]);
+    });
+  });
+
+  describe('#clearContactFilters', () => {
+    it('commits the correct mutation and clears filter state', () => {
+      actions.clearContactFilters({ commit });
+      expect(commit.mock.calls).toEqual([[types.CLEAR_CONTACT_FILTERS]]);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/contacts/filterApiResponse.js b/app/javascript/dashboard/store/modules/specs/contacts/filterApiResponse.js
new file mode 100644
index 000000000..df9656aff
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/specs/contacts/filterApiResponse.js
@@ -0,0 +1,38 @@
+export const filterApiResponse = {
+  meta: {
+    count: {
+      all_count: 2,
+    },
+    current_page: '1',
+  },
+  payload: [
+    {
+      additional_attributes: {},
+      availability_status: 'offline',
+      email: 'fayaz@g.com',
+      id: 8,
+      name: 'fayaz',
+      phone_number: null,
+      identifier: null,
+      thumbnail:
+        'https://www.gravatar.com/avatar/f2e86d3a78353cdf51002f44cf6ea846?d=404',
+      custom_attributes: {},
+      conversations_count: 1,
+      last_activity_at: 1631081845,
+    },
+    {
+      additional_attributes: {},
+      availability_status: 'offline',
+      email: 'fayaz@gma.com',
+      id: 9,
+      name: 'fayaz',
+      phone_number: null,
+      identifier: null,
+      thumbnail:
+        'https://www.gravatar.com/avatar/792af86e3ad4591552e1025a6415baa6?d=404',
+      custom_attributes: {},
+      conversations_count: 1,
+      last_activity_at: 1631614585,
+    },
+  ],
+};
diff --git a/app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js b/app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js
index 62c33ee51..38973ec9d 100644
--- a/app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js
@@ -36,4 +36,18 @@ describe('#getters', () => {
       isUpdating: false,
     });
   });
+  it('getAppliedContactFilters', () => {
+    const filters = [
+      {
+        attribute_key: 'email',
+        filter_operator: 'contains',
+        values: 'a',
+        query_operator: null,
+      },
+    ];
+    const state = {
+      appliedFilters: filters,
+    };
+    expect(getters.getAppliedContactFilters(state)).toEqual(filters);
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js
index f725c88ba..4eb40ff61 100644
--- a/app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js
@@ -64,4 +64,42 @@ describe('#mutations', () => {
       });
     });
   });
+
+  describe('#SET_CONTACT_FILTERS', () => {
+    it('set contact filter', () => {
+      const appliedFilters = [
+        {
+          attribute_key: 'name',
+          filter_operator: 'equal_to',
+          values: ['fayaz'],
+          query_operator: 'and',
+        },
+      ];
+      mutations[types.SET_CONTACT_FILTERS](appliedFilters);
+      expect(appliedFilters).toEqual([
+        {
+          attribute_key: 'name',
+          filter_operator: 'equal_to',
+          values: ['fayaz'],
+          query_operator: 'and',
+        },
+      ]);
+    });
+  });
+  describe('#CLEAR_CONTACT_FILTERS', () => {
+    it('clears applied contact filters', () => {
+      const state = {
+        appliedFilters: [
+          {
+            attribute_key: 'name',
+            filter_operator: 'equal_to',
+            values: ['fayaz'],
+            query_operator: 'and',
+          },
+        ],
+      };
+      mutations[types.CLEAR_CONTACT_FILTERS](state);
+      expect(state.appliedFilters).toEqual([]);
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
index 2d5936c17..bb718bb24 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
@@ -115,8 +115,8 @@ describe('#getters', () => {
     });
   });
 
-  describe('#getAppliedFilters', () => {
-    it('getAppliedFilters', () => {
+  describe('#getAppliedConversationFilters', () => {
+    it('getAppliedConversationFilters', () => {
       const filtersList = [
         {
           attribute_key: 'status',
@@ -128,7 +128,7 @@ describe('#getters', () => {
       const state = {
         appliedFilters: filtersList,
       };
-      expect(getters.getAppliedFilters(state)).toEqual(filtersList);
+      expect(getters.getAppliedConversationFilters(state)).toEqual(filtersList);
     });
   });
 });
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index e5e70f717..b723776c5 100755
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -108,6 +108,8 @@ export default {
   EDIT_CONTACT: 'EDIT_CONTACT',
   DELETE_CONTACT: 'DELETE_CONTACT',
   UPDATE_CONTACTS_PRESENCE: 'UPDATE_CONTACTS_PRESENCE',
+  SET_CONTACT_FILTERS: 'SET_CONTACT_FILTERS',
+  CLEAR_CONTACT_FILTERS: 'CLEAR_CONTACT_FILTERS',
 
   // Notifications
   SET_NOTIFICATIONS_META: 'SET_NOTIFICATIONS_META',
diff --git a/app/javascript/shared/assets/stylesheets/border-radius.scss b/app/javascript/shared/assets/stylesheets/border-radius.scss
index 9e228fdf2..69a2a804a 100644
--- a/app/javascript/shared/assets/stylesheets/border-radius.scss
+++ b/app/javascript/shared/assets/stylesheets/border-radius.scss
@@ -4,4 +4,5 @@
     --border-radius-normal: 0.5rem;
     --border-radius-medium: 0.7rem;
     --border-radius-large: 0.9rem;
+    --border-radius-rounded: 50%;
 }
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index b0bd49cdc..5e73456fd 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -8,7 +8,7 @@
   "arrow-right-outline": "M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z",
   "arrow-swap-outline": "m14.783 2.22 4.495 4.494a.75.75 0 0 1 .073.976l-.072.085-4.495 4.504a.75.75 0 0 1-1.135-.975l.073-.084 3.217-3.223H5.243A.75.75 0 0 1 4.5 7.35l-.007-.101a.75.75 0 0 1 .648-.743l.102-.007 11.697-.001-3.218-3.217a.75.75 0 0 1-.072-.976l.072-.084a.75.75 0 0 1 .977-.073l.084.073 4.495 4.494-4.495-4.494ZM19.5 16.65l.006.1a.75.75 0 0 1-.648.744l-.102.007L7.063 17.5l3.22 3.22a.75.75 0 0 1 .074.976l-.073.084a.75.75 0 0 1-.976.073l-.085-.072-4.5-4.497a.75.75 0 0 1-.073-.976l.073-.084 4.5-4.504a.75.75 0 0 1 1.134.976l-.073.084L7.066 16h11.692a.75.75 0 0 1 .743.65l.006.1-.006-.1Z",
   "arrow-trending-lines-outline": "M16.749 2h4.554l.1.014.099.028.06.026c.08.034.153.085.219.15l.04.044.044.057.054.09.039.09.019.064.014.064.009.095v4.532a.75.75 0 0 1-1.493.102l-.007-.102V4.559l-6.44 6.44a.75.75 0 0 1-.976.073L13 11 9.97 8.09l-5.69 5.689a.75.75 0 0 1-1.133-.977l.073-.084 6.22-6.22a.75.75 0 0 1 .976-.072l.084.072 3.03 2.91L19.438 3.5h-2.69a.75.75 0 0 1-.742-.648l-.007-.102a.75.75 0 0 1 .648-.743L16.75 2ZM3.75 17a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75Zm5.75-3.25a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0v-7.5ZM13.75 15a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0v-5.5a.75.75 0 0 1 .75-.75Zm5.75-4.25a.75.75 0 0 0-1.5 0v10.5a.75.75 0 0 0 1.5 0v-10.5Z",
-  "arrow-up-outline":"M4.21 10.733a.75.75 0 0 0 1.086 1.034l5.954-6.251V20.25a.75.75 0 0 0 1.5 0V5.516l5.955 6.251a.75.75 0 0 0 1.086-1.034l-7.067-7.42a.995.995 0 0 0-.58-.3.754.754 0 0 0-.29.001.995.995 0 0 0-.578.3L4.21 10.733Z",
+  "arrow-up-outline": "M4.21 10.733a.75.75 0 0 0 1.086 1.034l5.954-6.251V20.25a.75.75 0 0 0 1.5 0V5.516l5.955 6.251a.75.75 0 0 0 1.086-1.034l-7.067-7.42a.995.995 0 0 0-.58-.3.754.754 0 0 0-.29.001.995.995 0 0 0-.578.3L4.21 10.733Z",
   "attach-outline": "M11.772 3.743a6 6 0 0 1 8.66 8.302l-.19.197-8.8 8.798-.036.03a3.723 3.723 0 0 1-5.489-4.973.764.764 0 0 1 .085-.13l.054-.06.086-.088.142-.148.002.003 7.436-7.454a.75.75 0 0 1 .977-.074l.084.073a.75.75 0 0 1 .074.976l-.073.084-7.594 7.613a2.23 2.23 0 0 0 3.174 3.106l8.832-8.83A4.502 4.502 0 0 0 13 4.644l-.168.16-.013.014-9.536 9.536a.75.75 0 0 1-1.133-.977l.072-.084 9.549-9.55h.002Z",
   "autocorrect-outline": "M13.461 4.934c.293.184.548.42.752.698l.117.171 2.945 4.696H21.5a.75.75 0 0 1 .743.649l.007.102a.75.75 0 0 1-.75.75l-3.284-.001.006.009-.009-.01a4.75 4.75 0 1 1-3.463-1.5h.756L13.059 6.6a1.25 1.25 0 0 0-2.04-.112l-.078.112-7.556 12.048a.75.75 0 0 1-1.322-.699l.052-.098L9.67 5.803a2.75 2.75 0 0 1 3.791-.869ZM14.751 12a3.25 3.25 0 1 0 0 6.5 3.25 3.25 0 0 0 0-6.5Z",
   "book-contacts-outline": "M15.5 12.25a.75.75 0 0 0-.75-.75h-5a.75.75 0 0 0-.75.75v.5c0 1 1.383 1.75 3.25 1.75s3.25-.75 3.25-1.75v-.5ZM14 8.745C14 7.78 13.217 7 12.25 7s-1.75.779-1.75 1.745a1.75 1.75 0 1 0 3.5 0ZM4 4.5A2.5 2.5 0 0 1 6.5 2H18a2.5 2.5 0 0 1 2.5 2.5v14.25a.75.75 0 0 1-.75.75H5.5a1 1 0 0 0 1 1h13.25a.75.75 0 0 1 0 1.5H6.5A2.5 2.5 0 0 1 4 19.5v-15Zm1.5 0V18H19V4.5a1 1 0 0 0-1-1H6.5a1 1 0 0 0-1 1Z",
@@ -48,9 +48,9 @@
   "location-outline": "M5.843 4.568a8.707 8.707 0 1 1 12.314 12.314l-1.187 1.174c-.875.858-2.01 1.962-3.406 3.312a2.25 2.25 0 0 1-3.128 0l-3.491-3.396c-.439-.431-.806-.794-1.102-1.09a8.707 8.707 0 0 1 0-12.314Zm11.253 1.06A7.207 7.207 0 1 0 6.904 15.822L8.39 17.29a753.98 753.98 0 0 0 3.088 3 .75.75 0 0 0 1.043 0l3.394-3.3c.47-.461.863-.85 1.18-1.168a7.207 7.207 0 0 0 0-10.192ZM12 7.999a3.002 3.002 0 1 1 0 6.004 3.002 3.002 0 0 1 0-6.003Zm0 1.5a1.501 1.501 0 1 0 0 3.004 1.501 1.501 0 0 0 0-3.003Z",
   "lock-closed-outline": "M12 2a4 4 0 0 1 4 4v2h1.75A2.25 2.25 0 0 1 20 10.25v9.5A2.25 2.25 0 0 1 17.75 22H6.25A2.25 2.25 0 0 1 4 19.75v-9.5A2.25 2.25 0 0 1 6.25 8H8V6a4 4 0 0 1 4-4Zm5.75 7.5H6.25a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75Zm-5.75 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-10A2.5 2.5 0 0 0 9.5 6v2h5V6A2.5 2.5 0 0 0 12 3.5Z",
   "mail-inbox-all-outline": "M6.25 3h11.5a3.25 3.25 0 0 1 3.245 3.066L21 6.25v11.5a3.25 3.25 0 0 1-3.066 3.245L17.75 21H6.25a3.25 3.25 0 0 1-3.245-3.066L3 17.75V6.25a3.25 3.25 0 0 1 3.066-3.245L6.25 3Zm2.075 11.5H4.5v3.25a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V14.5h-3.825a3.752 3.752 0 0 1-3.475 2.995l-.2.005a3.752 3.752 0 0 1-3.632-2.812l-.043-.188Zm9.425-10H6.25a1.75 1.75 0 0 0-1.744 1.606L4.5 6.25V13H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.495.154l.005-.154a.75.75 0 0 1 .648-.743L15 13h4.5V6.25a1.75 1.75 0 0 0-1.607-1.744L17.75 4.5Zm-11 5h10.5a.75.75 0 0 1 .102 1.493L17.25 11H6.75a.75.75 0 0 1-.102-1.493L6.75 9.5h10.5-10.5Zm0-3h10.5a.75.75 0 0 1 .102 1.493L17.25 8H6.75a.75.75 0 0 1-.102-1.493L6.75 6.5h10.5-10.5Z",
-  "mail-outline":"M5.25 4h13.5a3.25 3.25 0 0 1 3.245 3.066L22 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5-13.5ZM20.5 9.373l-8.15 4.29a.75.75 0 0 1-.603.043l-.096-.042L3.5 9.374v7.376a1.75 1.75 0 0 0 1.606 1.744l.144.006h13.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.373ZM18.75 5.5H5.25a1.75 1.75 0 0 0-1.744 1.606L3.5 7.25v.429l8.5 4.473 8.5-4.474V7.25a1.75 1.75 0 0 0-1.607-1.744L18.75 5.5Z",
+  "mail-outline": "M5.25 4h13.5a3.25 3.25 0 0 1 3.245 3.066L22 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5-13.5ZM20.5 9.373l-8.15 4.29a.75.75 0 0 1-.603.043l-.096-.042L3.5 9.374v7.376a1.75 1.75 0 0 0 1.606 1.744l.144.006h13.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.373ZM18.75 5.5H5.25a1.75 1.75 0 0 0-1.744 1.606L3.5 7.25v.429l8.5 4.473 8.5-4.474V7.25a1.75 1.75 0 0 0-1.607-1.744L18.75 5.5Z",
   "map-outline": "m9.203 4 .047-.002.046.001a.73.73 0 0 1 .067.007l.016.004c.086.014.17.044.252.092l.051.034 5.07 3.565L19.82 4.14a.75.75 0 0 1 1.174.51l.007.104v10.632a.75.75 0 0 1-.238.548l-.08.066-5.5 3.866a.744.744 0 0 1-.828.023L9.25 16.297l-5.07 3.565a.75.75 0 0 1-1.174-.51l-.007-.104V8.616a.75.75 0 0 1 .238-.548l.08-.066 5.5-3.866a.762.762 0 0 1 .2-.101l.122-.028.064-.008Zm10.298 2.197-4 2.812v8.799l4-2.812v-8.8ZM8.5 6.193l-4 2.812v8.8l4-2.813V6.193Zm1.502 0v8.8l4 2.811V9.005l-4-2.812Z",
-  "megaphone-outline":"M21.907 5.622c.062.208.093.424.093.641V17.74a2.25 2.25 0 0 1-2.891 2.156l-5.514-1.64a4.002 4.002 0 0 1-7.59-1.556L6 16.5l-.001-.5-2.39-.711A2.25 2.25 0 0 1 2 13.131V10.87a2.25 2.25 0 0 1 1.61-2.156l15.5-4.606a2.25 2.25 0 0 1 2.797 1.515ZM7.499 16.445l.001.054a2.5 2.5 0 0 0 4.624 1.321l-4.625-1.375Zm12.037-10.9-15.5 4.605a.75.75 0 0 0-.536.72v2.261a.75.75 0 0 0 .536.72l15.5 4.607a.75.75 0 0 0 .964-.72V6.264a.75.75 0 0 0-.964-.719Z",
+  "megaphone-outline": "M21.907 5.622c.062.208.093.424.093.641V17.74a2.25 2.25 0 0 1-2.891 2.156l-5.514-1.64a4.002 4.002 0 0 1-7.59-1.556L6 16.5l-.001-.5-2.39-.711A2.25 2.25 0 0 1 2 13.131V10.87a2.25 2.25 0 0 1 1.61-2.156l15.5-4.606a2.25 2.25 0 0 1 2.797 1.515ZM7.499 16.445l.001.054a2.5 2.5 0 0 0 4.624 1.321l-4.625-1.375Zm12.037-10.9-15.5 4.605a.75.75 0 0 0-.536.72v2.261a.75.75 0 0 0 .536.72l15.5 4.607a.75.75 0 0 0 .964-.72V6.264a.75.75 0 0 0-.964-.719Z",
   "merge-outline": "M3 6.75A.75.75 0 0 1 3.75 6h4.5a.75.75 0 0 1 .53.22L13.56 11h5.878L15.72 7.28a.75.75 0 1 1 1.06-1.06l4.998 5a.75.75 0 0 1 0 1.06l-4.998 5a.75.75 0 1 1-1.06-1.06l3.718-3.72H13.56l-4.78 4.78a.75.75 0 0 1-.531.22h-4.5a.75.75 0 0 1 0-1.5h4.19l4.25-4.25L7.94 7.5H3.75A.75.75 0 0 1 3 6.75Z",
   "more-horizontal-outline": "M7.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM13.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM18 13.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z",
   "more-vertical-outline": "M12 7.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5ZM12 13.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5ZM10.25 18a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Z",
@@ -68,22 +68,24 @@
   "share-outline": "M6.747 4h3.464a.75.75 0 0 1 .102 1.493l-.102.007H6.747a2.25 2.25 0 0 0-2.245 2.096l-.005.154v9.5a2.25 2.25 0 0 0 2.096 2.245l.154.005h9.5a2.25 2.25 0 0 0 2.245-2.096l.005-.154v-.498a.75.75 0 0 1 1.494-.101l.006.101v.498a3.75 3.75 0 0 1-3.55 3.745l-.2.005h-9.5a3.75 3.75 0 0 1-3.745-3.55l-.005-.2v-9.5a3.75 3.75 0 0 1 3.55-3.745l.2-.005h3.464-3.464ZM14.5 6.52V3.75a.75.75 0 0 1 1.187-.61l.082.069 5.994 5.75c.28.268.306.7.077.997l-.077.085-5.994 5.752a.75.75 0 0 1-1.262-.434l-.007-.107v-2.725l-.344.03c-2.4.25-4.7 1.33-6.914 3.26-.52.453-1.323.025-1.237-.658.664-5.32 3.446-8.252 8.195-8.62l.3-.02V3.75v2.77ZM16 5.509V7.25a.75.75 0 0 1-.75.75c-3.874 0-6.274 1.676-7.312 5.157l-.079.279.352-.237C10.45 11.737 12.798 11 15.251 11a.75.75 0 0 1 .743.648l.007.102v1.743L20.16 9.5l-4.16-3.991Z",
   "sound-source-outline": "M3.5 12a8.5 8.5 0 1 1 14.762 5.748l.992 1.135A9.966 9.966 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12a9.966 9.966 0 0 0 2.746 6.883l.993-1.134A8.47 8.47 0 0 1 3.5 12Z M19.25 12.125a7.098 7.098 0 0 1-1.783 4.715l-.998-1.14a5.625 5.625 0 1 0-8.806-.15l-1.004 1.146a7.125 7.125 0 1 1 12.59-4.571Z M16.25 12a4.23 4.23 0 0 1-.821 2.511l-1.026-1.172a2.75 2.75 0 1 0-4.806 0L8.571 14.51A4.25 4.25 0 1 1 16.25 12Z M12.564 12.756a.75.75 0 0 0-1.128 0l-7 8A.75.75 0 0 0 5 22h14a.75.75 0 0 0 .564-1.244l-7-8Zm4.783 7.744H6.653L12 14.389l5.347 6.111Z",
   "speaker-1-outline": "M14.704 3.442c.191.226.296.512.296.808v15.502a1.25 1.25 0 0 1-2.058.954L7.975 16.5H4.25A2.25 2.25 0 0 1 2 14.25v-4.5A2.25 2.25 0 0 1 4.25 7.5h3.725l4.968-4.204a1.25 1.25 0 0 1 1.761.147ZM13.5 4.79 8.525 9H4.25a.75.75 0 0 0-.75.75v4.5c0 .415.336.75.75.75h4.275l4.975 4.213V4.79Zm3.604 3.851a.75.75 0 0 1 1.03.25c.574.94.862 1.992.862 3.14 0 1.149-.288 2.201-.862 3.141a.75.75 0 1 1-1.28-.781c.428-.702.642-1.483.642-2.36 0-.876-.214-1.657-.642-2.359a.75.75 0 0 1 .25-1.03Z",
-  "speaker-mute-outline" :"M12.92 3.316c.806-.717 2.08-.145 2.08.934v15.496c0 1.078-1.274 1.65-2.08.934l-4.492-3.994a.75.75 0 0 0-.498-.19H4.25A2.25 2.25 0 0 1 2 14.247V9.75a2.25 2.25 0 0 1 2.25-2.25h3.68a.75.75 0 0 0 .498-.19l4.491-3.993Zm.58 1.49L9.425 8.43A2.25 2.25 0 0 1 7.93 9H4.25a.75.75 0 0 0-.75.75v4.497c0 .415.336.75.75.75h3.68a2.25 2.25 0 0 1 1.495.57l4.075 3.623V4.807ZM16.22 9.22a.75.75 0 0 1 1.06 0L19 10.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L20.06 12l1.72 1.72a.75.75 0 1 1-1.06 1.06L19 13.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L17.94 12l-1.72-1.72a.75.75 0 0 1 0-1.06Z",
+  "speaker-mute-outline": "M12.92 3.316c.806-.717 2.08-.145 2.08.934v15.496c0 1.078-1.274 1.65-2.08.934l-4.492-3.994a.75.75 0 0 0-.498-.19H4.25A2.25 2.25 0 0 1 2 14.247V9.75a2.25 2.25 0 0 1 2.25-2.25h3.68a.75.75 0 0 0 .498-.19l4.491-3.993Zm.58 1.49L9.425 8.43A2.25 2.25 0 0 1 7.93 9H4.25a.75.75 0 0 0-.75.75v4.497c0 .415.336.75.75.75h3.68a2.25 2.25 0 0 1 1.495.57l4.075 3.623V4.807ZM16.22 9.22a.75.75 0 0 1 1.06 0L19 10.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L20.06 12l1.72 1.72a.75.75 0 1 1-1.06 1.06L19 13.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L17.94 12l-1.72-1.72a.75.75 0 0 1 0-1.06Z",
   "star-emphasis-outline": "M13.209 3.103c-.495-1.004-1.926-1.004-2.421 0L8.43 7.88l-5.273.766c-1.107.161-1.55 1.522-.748 2.303l3.815 3.72-.9 5.25c-.19 1.103.968 1.944 1.959 1.424l4.715-2.48 4.716 2.48c.99.52 2.148-.32 1.96-1.424l-.902-5.25 3.816-3.72c.8-.78.359-2.142-.748-2.303l-5.273-.766-2.358-4.777ZM9.74 8.615l2.258-4.576 2.259 4.576a1.35 1.35 0 0 0 1.016.738l5.05.734-3.654 3.562a1.35 1.35 0 0 0-.388 1.195l.862 5.03-4.516-2.375a1.35 1.35 0 0 0-1.257 0l-4.516 2.374.862-5.029a1.35 1.35 0 0 0-.388-1.195l-3.654-3.562 5.05-.734c.44-.063.82-.34 1.016-.738ZM1.164 3.782a.75.75 0 0 0 .118 1.054l2.5 2a.75.75 0 1 0 .937-1.172l-2.5-2a.75.75 0 0 0-1.055.118Z M22.836 18.218a.75.75 0 0 0-.117-1.054l-2.5-2a.75.75 0 0 0-.938 1.172l2.5 2a.75.75 0 0 0 1.055-.117ZM1.282 17.164a.75.75 0 1 0 .937 1.172l2.5-2a.75.75 0 0 0-.937-1.172l-2.5 2ZM22.836 3.782a.75.75 0 0 1-.117 1.054l-2.5 2a.75.75 0 0 1-.938-1.172l2.5-2a.75.75 0 0 1 1.055.118Z",
   "tag-outline": "M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.003-4.596l8.5-8.51A3.25 3.25 0 0 1 14.284 2h5.465Zm0 1.5h-5.465c-.465 0-.91.185-1.239.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75ZM17 5.502a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z",
   "video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
   "warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",
-
-
   "brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
   "brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
   "brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
   "brand-line-outline": "M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314",
+  "brand-sms-outline": "M272.1 204.2v71.1c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.1 0-2.1-.6-2.6-1.3l-32.6-44v42.2c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.8 0-3.2-1.4-3.2-3.2v-71.1c0-1.8 1.4-3.2 3.2-3.2H219c1 0 2.1 .5 2.6 1.4l32.6 44v-42.2c0-1.8 1.4-3.2 3.2-3.2h11.4c1.8-.1 3.3 1.4 3.3 3.1zm-82-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 1.8 1.4 3.2 3.2 3.2h11.4c1.8 0 3.2-1.4 3.2-3.2v-71.1c0-1.7-1.4-3.2-3.2-3.2zm-27.5 59.6h-31.1v-56.4c0-1.8-1.4-3.2-3.2-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 .9 .3 1.6 .9 2.2 .6 .5 1.3 .9 2.2 .9h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.7-1.4-3.2-3.1-3.2zM332.1 201h-45.7c-1.7 0-3.2 1.4-3.2 3.2v71.1c0 1.7 1.4 3.2 3.2 3.2h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2V234c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2v-11.4c-.1-1.7-1.5-3.2-3.2-3.2zM448 113.7V399c-.1 44.8-36.8 81.1-81.7 81H81c-44.8-.1-81.1-36.9-81-81.7V113c.1-44.8 36.9-81.1 81.7-81H367c44.8 .1 81.1 36.8 81 81.7zm-61.6 122.6c0-73-73.2-132.4-163.1-132.4-89.9 0-163.1 59.4-163.1 132.4 0 65.4 58 120.2 136.4 130.6 19.1 4.1 16.9 11.1 12.6 36.8-.7 4.1-3.3 16.1 14.1 8.8 17.4-7.3 93.9-55.3 128.2-94.7 23.6-26 34.9-52.3 34.9-81.5z",
+  "brand-telegram-outline": "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
   "brand-sms-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.644-1.142l-4.29 1.117a.85.85 0 0 1-1.037-1.036l1.116-4.289A9.959 9.959 0 0 1 2 12C2 6.477 6.477 2 12 2Zm1.252 11H8.75l-.102.007a.75.75 0 0 0 0 1.486l.102.007h4.502l.101-.007a.75.75 0 0 0 0-1.486L13.252 13Zm1.998-3.5h-6.5l-.102.007a.75.75 0 0 0 0 1.486L8.75 11h6.5l.102-.007a.75.75 0 0 0 0-1.486L15.25 9.5Z",
   "brand-telegram-outline":"M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
   "brand-linkedin-outline": "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
-
   "add-solid": "M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z",
   "subtract-solid": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
-  "checkmark-circle-solid": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z"
+  "subtract-outline": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
+  "checkmark-circle-solid": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z",
+  "person-add-outline": "M17.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zm-5.477 2a6.47 6.47 0 0 0-.709 1.5H4.253a.749.749 0 0 0-.75.75v.577c0 .535.192 1.053.54 1.46c1.253 1.469 3.22 2.214 5.957 2.214c.597 0 1.157-.035 1.68-.106c.246.495.553.954.912 1.367c-.795.16-1.66.24-2.592.24c-3.146 0-5.532-.906-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.578A2.249 2.249 0 0 1 4.253 14h7.77zm5.477 0l-.09.008a.5.5 0 0 0-.402.402L17 14.5V17h-2.496l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008H17L17 20.5l.008.09a.5.5 0 0 0 .402.402l.09.008l.09-.008a.5.5 0 0 0 .402-.402L18 20.5V18h2.504l.09-.008a.5.5 0 0 0 .402-.402l.008-.09l-.008-.09a.5.5 0 0 0-.402-.402l-.09-.008H18L18 14.5l-.008-.09a.5.5 0 0 0-.402-.402L17.5 14zM10 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10zm0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7z",
+  "upload-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-6-1.793V19.5a.5.5 0 0 0 1 0v-4.793l1.646 1.647a.5.5 0 0 0 .708-.708l-2.5-2.5a.5.5 0 0 0-.708 0l-2.5 2.5a.5.5 0 0 0 .708.708L16 14.707Z"
 }
diff --git a/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/countries.js b/app/javascript/shared/constants/countries.js
similarity index 100%
rename from app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/countries.js
rename to app/javascript/shared/constants/countries.js
diff --git a/app/services/contacts/filter_service.rb b/app/services/contacts/filter_service.rb
index cefcee7b5..0b0ee57e9 100644
--- a/app/services/contacts/filter_service.rb
+++ b/app/services/contacts/filter_service.rb
@@ -4,9 +4,7 @@ class Contacts::FilterService < FilterService
 
     {
       contacts: @contacts,
-      count: {
-        all_count: @contacts.count
-      }
+      count: @contacts.count
     }
   end
 
@@ -28,21 +26,36 @@ class Contacts::FilterService < FilterService
 
     case current_filter['attribute_type']
     when 'additional_attributes'
-      " contacts.additional_attributes ->> '#{attribute_key}' #{filter_operator_value} #{query_operator} "
+      "  LOWER(contacts.additional_attributes ->> '#{attribute_key}') #{filter_operator_value} #{query_operator} "
     when 'standard'
       if attribute_key == 'labels'
         " tags.id #{filter_operator_value} #{query_operator} "
       else
-        " contacts.#{attribute_key} #{filter_operator_value} #{query_operator} "
+        " LOWER(contacts.#{attribute_key}) #{filter_operator_value} #{query_operator} "
       end
     end
   end
 
   def filter_values(query_hash)
-    query_hash['values'][0]
+    current_val = query_hash['values'][0]
+    if query_hash['attribute_key'] == 'phone_number'
+      "+#{current_val}"
+    elsif query_hash['attribute_key'] == 'country_code'
+      current_val.downcase
+    else
+      current_val.is_a?(String) ? current_val.downcase : current_val
+    end
   end
 
   def base_relation
     Current.account.contacts.left_outer_joins(:labels)
   end
+
+  private
+
+  def equals_to_filter_string(filter_operator, current_index)
+    return "= :value_#{current_index}" if filter_operator == 'equal_to'
+
+    "!= :value_#{current_index}"
+  end
 end
diff --git a/app/views/api/v1/accounts/contacts/filter.json.jbuilder b/app/views/api/v1/accounts/contacts/filter.json.jbuilder
index 87d953b5b..b3af9a8b7 100644
--- a/app/views/api/v1/accounts/contacts/filter.json.jbuilder
+++ b/app/views/api/v1/accounts/contacts/filter.json.jbuilder
@@ -1,3 +1,10 @@
-json.array! @contacts do |contact|
-  json.partial! 'api/v1/models/contact.json.jbuilder', resource: contact
+json.meta do
+  json.count @contacts_count
+  json.current_page @current_page
+end
+
+json.payload do
+  json.array! @contacts do |contact|
+    json.partial! 'api/v1/models/contact.json.jbuilder', resource: contact, with_contact_inboxes: @include_contact_inboxes
+  end
 end
diff --git a/lib/filters/filter_keys.json b/lib/filters/filter_keys.json
index 5b2b63c69..9412980a7 100644
--- a/lib/filters/filter_keys.json
+++ b/lib/filters/filter_keys.json
@@ -100,7 +100,7 @@
       "filter_operators":  [ "equal_to", "not_equal_to", "contains", "does_not_contain" ],
       "attribute_type": "standard"
     },
-    "contact_identifier": {
+    "identifier": {
       "attribute_name": "Contact Identifier",
       "input_type": "search_box with name tags/plain text",
       "data_type": "text",

From 6d378eb20640903c65feb26822ac1d45823bbf33 Mon Sep 17 00:00:00 2001
From: thedev105 <3080007+thedev105@users.noreply.github.com>
Date: Fri, 3 Dec 2021 10:49:11 +0300
Subject: [PATCH 52/69] Fix: Update contact validation messages (#3500)

Fixes #3476
---
 .../api/v1/accounts/contacts_controller.rb      |  5 -----
 .../concerns/request_exception_handler.rb       |  3 ++-
 .../dashboard/i18n/locale/en/contact.json       |  7 ++++---
 .../conversation/contact/ContactForm.vue        | 17 +++++++----------
 .../dashboard/store/modules/contacts/actions.js |  4 ++--
 .../modules/specs/contacts/actions.spec.js      |  3 ++-
 .../shared/helpers/specs/CustomErrors.spec.js   |  8 ++------
 .../api/v1/accounts/contacts_controller_spec.rb | 14 +++++++++++++-
 8 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/app/controllers/api/v1/accounts/contacts_controller.rb b/app/controllers/api/v1/accounts/contacts_controller.rb
index fcb1de831..76fd206f4 100644
--- a/app/controllers/api/v1/accounts/contacts_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts_controller.rb
@@ -81,11 +81,6 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   def update
     @contact.assign_attributes(contact_update_params)
     @contact.save!
-  rescue ActiveRecord::RecordInvalid => e
-    render json: {
-      message: e.record.errors.full_messages.join(', '),
-      contact: Current.account.contacts.find_by(email: contact_params[:email])
-    }, status: :unprocessable_entity
   end
 
   def destroy
diff --git a/app/controllers/concerns/request_exception_handler.rb b/app/controllers/concerns/request_exception_handler.rb
index 3ce486012..1f96de737 100644
--- a/app/controllers/concerns/request_exception_handler.rb
+++ b/app/controllers/concerns/request_exception_handler.rb
@@ -37,7 +37,8 @@ module RequestExceptionHandler
 
   def render_record_invalid(exception)
     render json: {
-      message: exception.record.errors.full_messages.join(', ')
+      message: exception.record.errors.full_messages.join(', '),
+      attributes: exception.record.errors.attribute_names
     }, status: :unprocessable_entity
   end
 
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 018a2acc1..baa7c8d7d 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -103,13 +103,15 @@
       },
       "EMAIL_ADDRESS": {
         "PLACEHOLDER": "Enter the email address of the contact",
-        "LABEL": "Email Address"
+        "LABEL": "Email Address",
+        "DUPLICATE": "This email address is in use for another contact."
       },
       "PHONE_NUMBER": {
         "PLACEHOLDER": "Enter the phone number of the contact",
         "LABEL": "Phone Number",
         "HELP": "Phone number should be of E.164 format eg: +1415555555 [+][country code][area code][local phone number]",
-        "ERROR": "Phone number should be either empty or of E.164 format"
+        "ERROR": "Phone number should be either empty or of E.164 format",
+        "DUPLICATE": "This phone number is in use for another contact."
       },
       "LOCATION": {
         "PLACEHOLDER": "Enter the location of the contact",
@@ -139,7 +141,6 @@
       }
     },
     "SUCCESS_MESSAGE": "Contact saved successfully",
-    "CONTACT_ALREADY_EXIST": "This email address is in use for another contact.",
     "ERROR_MESSAGE": "There was an error, please try again"
   },
   "NEW_CONVERSATION": {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index 0fe9a1a4d..2b3dae832 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -121,8 +121,6 @@ export default {
   },
   data() {
     return {
-      hasADuplicateContact: false,
-      duplicateContact: {},
       companyName: '',
       description: '',
       email: '',
@@ -201,12 +199,7 @@ export default {
         },
       };
     },
-    resetDuplicate() {
-      this.hasADuplicateContact = false;
-      this.duplicateContact = {};
-    },
     async handleSubmit() {
-      this.resetDuplicate();
       this.$v.$touch();
 
       if (this.$v.$invalid) {
@@ -218,9 +211,13 @@ export default {
         this.showAlert(this.$t('CONTACT_FORM.SUCCESS_MESSAGE'));
       } catch (error) {
         if (error instanceof DuplicateContactException) {
-          this.hasADuplicateContact = true;
-          this.duplicateContact = error.data;
-          this.showAlert(this.$t('CONTACT_FORM.CONTACT_ALREADY_EXIST'));
+          if (error.data.includes('email')) {
+            this.showAlert(
+              this.$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.DUPLICATE')
+            );
+          } else if (error.data.includes('phone_number')) {
+            this.showAlert(this.$t('CONTACT_FORM.FORM.PHONE_NUMBER.DUPLICATE'));
+          }
         } else if (error instanceof ExceptionWithMessage) {
           this.showAlert(error.data);
         } else {
diff --git a/app/javascript/dashboard/store/modules/contacts/actions.js b/app/javascript/dashboard/store/modules/contacts/actions.js
index 44bef1144..0e9961834 100644
--- a/app/javascript/dashboard/store/modules/contacts/actions.js
+++ b/app/javascript/dashboard/store/modules/contacts/actions.js
@@ -60,8 +60,8 @@ export const actions = {
       commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
     } catch (error) {
       commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
-      if (error.response?.data?.contact) {
-        throw new DuplicateContactException(error.response.data.contact);
+      if (error.response?.status === 422) {
+        throw new DuplicateContactException(error.response.data.attributes);
       } else {
         throw new Error(error);
       }
diff --git a/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js b/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js
index 08b1b2067..b435318e3 100644
--- a/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js
@@ -94,9 +94,10 @@ describe('#actions', () => {
     it('sends correct actions if duplicate contact is found', async () => {
       axios.patch.mockRejectedValue({
         response: {
+          status: 422,
           data: {
             message: 'Incorrect header',
-            contact: { id: 1, name: 'contact-name' },
+            attributes: ['email'],
           },
         },
       });
diff --git a/app/javascript/shared/helpers/specs/CustomErrors.spec.js b/app/javascript/shared/helpers/specs/CustomErrors.spec.js
index 83b12da1d..cfa57dbce 100644
--- a/app/javascript/shared/helpers/specs/CustomErrors.spec.js
+++ b/app/javascript/shared/helpers/specs/CustomErrors.spec.js
@@ -3,15 +3,11 @@ const { DuplicateContactException } = require('../CustomErrors');
 describe('DuplicateContactException', () => {
   it('returns correct exception', () => {
     const exception = new DuplicateContactException({
-      id: 1,
-      name: 'contact-name',
-      email: 'email@example.com',
+      attributes: ['email'],
     });
     expect(exception.message).toEqual('DUPLICATE_CONTACT');
     expect(exception.data).toEqual({
-      id: 1,
-      name: 'contact-name',
-      email: 'email@example.com',
+      attributes: ['email'],
     });
   });
 });
diff --git a/spec/controllers/api/v1/accounts/contacts_controller_spec.rb b/spec/controllers/api/v1/accounts/contacts_controller_spec.rb
index b74ee44ed..6975fa015 100644
--- a/spec/controllers/api/v1/accounts/contacts_controller_spec.rb
+++ b/spec/controllers/api/v1/accounts/contacts_controller_spec.rb
@@ -448,7 +448,19 @@ RSpec.describe 'Contacts API', type: :request do
               as: :json
 
         expect(response).to have_http_status(:unprocessable_entity)
-        expect(JSON.parse(response.body)['contact']['id']).to eq(other_contact.id)
+        expect(JSON.parse(response.body)['attributes']).to include('email')
+      end
+
+      it 'prevents updating with an existing phone number' do
+        other_contact = create(:contact, account: account, phone_number: '+12000000')
+
+        patch "/api/v1/accounts/#{account.id}/contacts/#{contact.id}",
+              headers: admin.create_new_auth_token,
+              params: valid_params[:contact].merge({ phone_number: other_contact.phone_number }),
+              as: :json
+
+        expect(response).to have_http_status(:unprocessable_entity)
+        expect(JSON.parse(response.body)['attributes']).to include('phone_number')
       end
     end
   end

From b46ee5e580123550957465de270dc5f096350a86 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 3 Dec 2021 22:45:00 +0530
Subject: [PATCH 53/69] Fix: Conversation status event in widget side (#3509)

---
 app/listeners/action_cable_listener.rb | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/listeners/action_cable_listener.rb b/app/listeners/action_cable_listener.rb
index a81c74976..4edf62f50 100644
--- a/app/listeners/action_cable_listener.rb
+++ b/app/listeners/action_cable_listener.rb
@@ -34,7 +34,7 @@ class ActionCableListener < BaseListener
 
   def conversation_status_changed(event)
     conversation, account = extract_conversation_and_account(event)
-    tokens = user_tokens(account, conversation.inbox.members) + [conversation.contact&.pubsub_token]
+    tokens = user_tokens(account, conversation.inbox.members) + contact_inbox_tokens(conversation.contact_inbox)
 
     broadcast(account, tokens, CONVERSATION_STATUS_CHANGED, conversation.push_event_data)
   end
@@ -137,6 +137,10 @@ class ActionCableListener < BaseListener
     return [] if message.activity?
     return [] if contact_inbox.nil?
 
+    contact_inbox_tokens(contact_inbox)
+  end
+
+  def contact_inbox_tokens(contact_inbox)
     contact = contact_inbox.contact
 
     contact_inbox.hmac_verified? ? contact.contact_inboxes.where(hmac_verified: true).filter_map(&:pubsub_token) : [contact_inbox.pubsub_token]

From a98f10130b092ba4bada0d1f6c1d0ca6edb84646 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 6 Dec 2021 14:38:04 +0530
Subject: [PATCH 54/69] bug: Fix cannot copy text content from sidebar (#3506)

* bug: Fixes cannot copy text content from sidebar .

* fixes cannot copy issue in sidebar

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
---
 .../dashboard/components/Accordion/AccordionItem.vue          | 4 ++--
 .../dashboard/routes/dashboard/conversation/ContactPanel.vue  | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/components/Accordion/AccordionItem.vue b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
index 182e2b464..b24b6f1be 100644
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="cw-accordion">
-    <button class="cw-accordion--title" @click="$emit('click')">
+    <button class="cw-accordion--title drag-handle" @click="$emit('click')">
       <div class="cw-accordion--title-wrap">
         <emoji-or-icon class="icon-or-emoji" :icon="icon" :emoji="emoji" />
         <h5>
@@ -69,7 +69,7 @@ export default {
   background: var(--s-50);
   border-bottom: 1px solid var(--s-100);
   border-top: 1px solid var(--s-100);
-  cursor: pointer;
+  cursor: grab;
   display: flex;
   justify-content: space-between;
   margin: 0;
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
index 70071999a..e5510fd99 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
@@ -11,6 +11,7 @@
       :disabled="!dragEnabled"
       class="list-group"
       ghost-class="ghost"
+      handle=".drag-handle"
       @start="dragging = true"
       @end="onDragEnd"
     >

From 3c72a2759f40775c0acd11a2c0b260e072ebe94c Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 6 Dec 2021 18:16:36 +0530
Subject: [PATCH 55/69] enhancement: Improves sidebar open/close toggle design
 (#3507)

---
 .../widgets/conversation/MessagesView.vue     | 28 +++++++++++++++++++
 .../FluentIcon/dashboard-icons.json           |  5 +++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index b9f3557f6..75adb372c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -52,6 +52,9 @@
       </button>
     </div>
     <ul class="conversation-panel">
+      <button class="action-button__wrap" @click="onToggleContactPanel">
+        <fluent-icon :icon="isRightOrLeftIcon" class="action-button" />
+      </button>
       <transition name="slide-up">
         <li class="spinner--container">
           <span v-if="shouldShowSpinner" class="spinner message" />
@@ -235,6 +238,12 @@ export default {
     twilioWhatsAppReplyPolicy() {
       return REPLY_POLICY.TWILIO_WHATSAPP;
     },
+    isRightOrLeftIcon() {
+      if (this.isContactPanelOpen) {
+        return 'arrow-chevron-right';
+      }
+      return 'arrow-chevron-left';
+    },
   },
 
   watch: {
@@ -427,4 +436,23 @@ export default {
     }
   }
 }
+.action-button__wrap {
+  display: flex;
+  justify-content: flex-end;
+}
+.action-button {
+  position: fixed;
+  background: var(--white);
+  cursor: pointer;
+  width: var(--space-medium);
+  height: var(--space-medium);
+  top: var(--space-mega);
+  z-index: var(--z-index-low);
+  margin-left: var(--space-one);
+  padding: var(--space-micro) var(--space-half) var(--space-micro) 0;
+  border-color: var(--color-border);
+  border-width: 0 0 0 1px;
+  border-style: solid;
+  border-radius: var(--border-radius-rounded);
+}
 </style>
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 5e73456fd..dbef10f58 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -2,6 +2,8 @@
   "add-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17ZM12 7a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 12 7Z",
   "add-outline": "M11.75 3a.75.75 0 0 1 .743.648l.007.102.001 7.25h7.253a.75.75 0 0 1 .102 1.493l-.102.007h-7.253l.002 7.25a.75.75 0 0 1-1.493.101l-.007-.102-.002-7.249H3.752a.75.75 0 0 1-.102-1.493L3.752 11h7.25L11 3.75a.75.75 0 0 1 .75-.75Z",
   "alert-outline": "M12 1.996a7.49 7.49 0 0 1 7.496 7.25l.004.25v4.097l1.38 3.156a1.25 1.25 0 0 1-1.145 1.75L15 18.502a3 3 0 0 1-5.995.177L9 18.499H4.275a1.251 1.251 0 0 1-1.147-1.747L4.5 13.594V9.496c0-4.155 3.352-7.5 7.5-7.5ZM13.5 18.5l-3 .002a1.5 1.5 0 0 0 2.993.145l.006-.147ZM12 3.496c-3.32 0-6 2.674-6 6v4.41L4.656 17h14.697L18 13.907V9.509l-.004-.225A5.988 5.988 0 0 0 12 3.496Z",
+  "arrow-chevron-left-outline": "M15 17.898c0 1.074-1.265 1.648-2.073.941l-6.31-5.522a1.75 1.75 0 0 1 0-2.634l6.31-5.522c.808-.707 2.073-.133 2.073.941v11.796Z",
+  "arrow-chevron-right-outline": "M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796Z",
   "arrow-download-outline": "M18.25 20.5a.75.75 0 1 1 0 1.5l-13 .004a.75.75 0 1 1 0-1.5l13-.004ZM11.648 2.012l.102-.007a.75.75 0 0 1 .743.648l.007.102-.001 13.685 3.722-3.72a.75.75 0 0 1 .976-.073l.085.073a.75.75 0 0 1 .072.976l-.073.084-4.997 4.997a.75.75 0 0 1-.976.073l-.085-.073-5.003-4.996a.75.75 0 0 1 .976-1.134l.084.072 3.719 3.714L11 2.755a.75.75 0 0 1 .648-.743l.102-.007-.102.007Z",
   "arrow-redo-outline": "M19.25 2a.75.75 0 0 0-.743.648l-.007.102v5.69l-4.574-4.56a6.41 6.41 0 0 0-8.878-.179l-.186.18a6.41 6.41 0 0 0 0 9.063l8.845 8.84a.75.75 0 0 0 1.06-1.062l-8.845-8.838a4.91 4.91 0 0 1 6.766-7.112l.178.17L17.438 9.5H11.75a.75.75 0 0 0-.743.648L11 10.25c0 .38.282.694.648.743l.102.007h7.5a.75.75 0 0 0 .743-.648L20 10.25v-7.5a.75.75 0 0 0-.75-.75Z",
   "arrow-reply-outline": "M9.277 16.221a.75.75 0 0 1-1.061 1.06l-4.997-5.003a.75.75 0 0 1 0-1.06L8.217 6.22a.75.75 0 0 1 1.061 1.06L5.557 11h7.842c1.595 0 2.81.242 3.889.764l.246.126a6.203 6.203 0 0 1 2.576 2.576c.61 1.14.89 2.418.89 4.135a.75.75 0 0 1-1.5 0c0-1.484-.228-2.52-.713-3.428a4.702 4.702 0 0 0-1.96-1.96c-.838-.448-1.786-.676-3.094-.709L13.4 12.5H5.562l3.715 3.721Z",
@@ -73,6 +75,7 @@
   "tag-outline": "M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.003-4.596l8.5-8.51A3.25 3.25 0 0 1 14.284 2h5.465Zm0 1.5h-5.465c-.465 0-.91.185-1.239.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75ZM17 5.502a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z",
   "video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
   "warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",
+
   "brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
   "brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
   "brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
@@ -80,7 +83,7 @@
   "brand-sms-outline": "M272.1 204.2v71.1c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.1 0-2.1-.6-2.6-1.3l-32.6-44v42.2c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.8 0-3.2-1.4-3.2-3.2v-71.1c0-1.8 1.4-3.2 3.2-3.2H219c1 0 2.1 .5 2.6 1.4l32.6 44v-42.2c0-1.8 1.4-3.2 3.2-3.2h11.4c1.8-.1 3.3 1.4 3.3 3.1zm-82-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 1.8 1.4 3.2 3.2 3.2h11.4c1.8 0 3.2-1.4 3.2-3.2v-71.1c0-1.7-1.4-3.2-3.2-3.2zm-27.5 59.6h-31.1v-56.4c0-1.8-1.4-3.2-3.2-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 .9 .3 1.6 .9 2.2 .6 .5 1.3 .9 2.2 .9h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.7-1.4-3.2-3.1-3.2zM332.1 201h-45.7c-1.7 0-3.2 1.4-3.2 3.2v71.1c0 1.7 1.4 3.2 3.2 3.2h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2V234c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2v-11.4c-.1-1.7-1.5-3.2-3.2-3.2zM448 113.7V399c-.1 44.8-36.8 81.1-81.7 81H81c-44.8-.1-81.1-36.9-81-81.7V113c.1-44.8 36.9-81.1 81.7-81H367c44.8 .1 81.1 36.8 81 81.7zm-61.6 122.6c0-73-73.2-132.4-163.1-132.4-89.9 0-163.1 59.4-163.1 132.4 0 65.4 58 120.2 136.4 130.6 19.1 4.1 16.9 11.1 12.6 36.8-.7 4.1-3.3 16.1 14.1 8.8 17.4-7.3 93.9-55.3 128.2-94.7 23.6-26 34.9-52.3 34.9-81.5z",
   "brand-telegram-outline": "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
   "brand-sms-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.644-1.142l-4.29 1.117a.85.85 0 0 1-1.037-1.036l1.116-4.289A9.959 9.959 0 0 1 2 12C2 6.477 6.477 2 12 2Zm1.252 11H8.75l-.102.007a.75.75 0 0 0 0 1.486l.102.007h4.502l.101-.007a.75.75 0 0 0 0-1.486L13.252 13Zm1.998-3.5h-6.5l-.102.007a.75.75 0 0 0 0 1.486L8.75 11h6.5l.102-.007a.75.75 0 0 0 0-1.486L15.25 9.5Z",
-  "brand-telegram-outline":"M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
+  "brand-telegram-outline": "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
   "brand-linkedin-outline": "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
   "add-solid": "M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z",
   "subtract-solid": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",

From 6b025816f5d54a955a7562fc860100936073a368 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 6 Dec 2021 22:11:34 +0530
Subject: [PATCH 56/69] fix: Update sidebar toggle icon breaking message view
 (#3512)

---
 .../widgets/conversation/MessagesView.vue     | 51 ++++++++++++-------
 1 file changed, 32 insertions(+), 19 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 75adb372c..0b054b486 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -51,10 +51,18 @@
         />
       </button>
     </div>
+    <div class="sidebar-toggle__wrap">
+      <woot-button
+        variant="smooth"
+        size="tiny"
+        color-scheme="secondary"
+        class="sidebar-toggle--button"
+        :icon="isRightOrLeftIcon"
+        @click="onToggleContactPanel"
+      >
+      </woot-button>
+    </div>
     <ul class="conversation-panel">
-      <button class="action-button__wrap" @click="onToggleContactPanel">
-        <fluent-icon :icon="isRightOrLeftIcon" class="action-button" />
-      </button>
       <transition name="slide-up">
         <li class="spinner--container">
           <span v-if="shouldShowSpinner" class="spinner message" />
@@ -436,23 +444,28 @@ export default {
     }
   }
 }
-.action-button__wrap {
+.sidebar-toggle__wrap {
   display: flex;
   justify-content: flex-end;
-}
-.action-button {
-  position: fixed;
-  background: var(--white);
-  cursor: pointer;
-  width: var(--space-medium);
-  height: var(--space-medium);
-  top: var(--space-mega);
-  z-index: var(--z-index-low);
-  margin-left: var(--space-one);
-  padding: var(--space-micro) var(--space-half) var(--space-micro) 0;
-  border-color: var(--color-border);
-  border-width: 0 0 0 1px;
-  border-style: solid;
-  border-radius: var(--border-radius-rounded);
+
+  .sidebar-toggle--button {
+    position: fixed;
+
+    top: var(--space-mega);
+    z-index: var(--z-index-low);
+
+    background: var(--white);
+
+    padding: inherit 0;
+    border-top-left-radius: calc(
+      var(--space-medium) + 1px
+    ); /* 100px of height + 10px of border */
+    border-bottom-left-radius: calc(
+      var(--space-medium) + 1px
+    ); /* 100px of height + 10px of border */
+    border: 1px solid var(--color-border-light);
+    border-right: 0;
+    box-sizing: border-box;
+  }
 }
 </style>

From 46afcd934836f7ed914cfe339b58f77a2df3daf2 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Tue, 7 Dec 2021 18:20:47 +0530
Subject: [PATCH 57/69] fix: Index custom attribute uniqueness on account
 (#3516)

- Move custom attribute uniqueness validation to account
---
 app/models/custom_attribute_definition.rb                  | 4 ++--
 ...e_attribute_key_index_on_custom_attribute_definition.rb | 7 +++++++
 db/schema.rb                                               | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 db/migrate/20211207113102_remove_attribute_key_index_on_custom_attribute_definition.rb

diff --git a/app/models/custom_attribute_definition.rb b/app/models/custom_attribute_definition.rb
index 94a41beea..cc8590f45 100644
--- a/app/models/custom_attribute_definition.rb
+++ b/app/models/custom_attribute_definition.rb
@@ -16,7 +16,7 @@
 #
 # Indexes
 #
-#  attribute_key_model_index                         (attribute_key,attribute_model) UNIQUE
+#  attribute_key_index                               (attribute_key,account_id) UNIQUE
 #  index_custom_attribute_definitions_on_account_id  (account_id)
 #
 class CustomAttributeDefinition < ApplicationRecord
@@ -25,7 +25,7 @@ class CustomAttributeDefinition < ApplicationRecord
 
   validates :attribute_key,
             presence: true,
-            uniqueness: { scope: :attribute_model }
+            uniqueness: { scope: :account_id }
 
   validates :attribute_display_type, presence: true
   validates :attribute_model, presence: true
diff --git a/db/migrate/20211207113102_remove_attribute_key_index_on_custom_attribute_definition.rb b/db/migrate/20211207113102_remove_attribute_key_index_on_custom_attribute_definition.rb
new file mode 100644
index 000000000..9beed0de6
--- /dev/null
+++ b/db/migrate/20211207113102_remove_attribute_key_index_on_custom_attribute_definition.rb
@@ -0,0 +1,7 @@
+class RemoveAttributeKeyIndexOnCustomAttributeDefinition < ActiveRecord::Migration[6.1]
+  def change
+    remove_index :custom_attribute_definitions, [:attribute_key, :account_id], name: 'attribute_key_model_index',
+                                                                               if_exists: true
+    add_index :custom_attribute_definitions, [:attribute_key, :account_id], unique: true, name: 'attribute_key_index', if_not_exists: true
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 14526629d..5232229ad 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2021_11_29_120040) do
+ActiveRecord::Schema.define(version: 2021_12_07_113102) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
@@ -368,7 +368,7 @@ ActiveRecord::Schema.define(version: 2021_11_29_120040) do
     t.text "attribute_description"
     t.jsonb "attribute_values", default: []
     t.index ["account_id"], name: "index_custom_attribute_definitions_on_account_id"
-    t.index ["attribute_key", "attribute_model"], name: "attribute_key_model_index", unique: true
+    t.index ["attribute_key", "account_id"], name: "attribute_key_index", unique: true
   end
 
   create_table "custom_filters", force: :cascade do |t|

From 824101bc30c703576612414ba7b251fdd81229c9 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 7 Dec 2021 23:44:32 +0530
Subject: [PATCH 58/69] fix: Fixes cc bcc being sent when mail head is empty  
 (#3515)

* fix: Fixes cc bcc being sent wrongly with emails

* fixes values not sycned to parent component

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

* Review fixes
---
 .../widgets/conversation/ReplyBox.vue         | 11 +++---
 .../widgets/conversation/ReplyEmailHead.vue   | 34 ++++++++++++-------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index 952b81bbc..03ed5d260 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -22,8 +22,8 @@
       />
       <reply-email-head
         v-if="showReplyHead"
-        :clear-mails="clearMails"
-        @set-emails="setCcEmails"
+        :cc-emails.sync="ccEmails"
+        :bcc-emails.sync="bccEmails"
       />
       <resizable-text-area
         v-if="!showRichContentEditor"
@@ -142,7 +142,8 @@ export default {
       mentionSearchKey: '',
       hasUserMention: false,
       hasSlashCommand: false,
-      clearMails: false,
+      bccEmails: '',
+      ccEmails: '',
     };
   },
   computed: {
@@ -377,7 +378,6 @@ export default {
           this.showAlert(errorMessage);
         }
         this.hideEmojiPicker();
-        this.clearMails = false;
       }
     },
     replaceText(message) {
@@ -400,7 +400,8 @@ export default {
     clearMessage() {
       this.message = '';
       this.attachedFiles = [];
-      this.clearMails = true;
+      this.ccEmails = '';
+      this.bccEmails = '';
     },
     toggleEmojiPicker() {
       this.showEmojiPicker = !this.showEmojiPicker;
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
index b8e193783..e82fb2ecc 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
@@ -55,9 +55,13 @@
 import { validEmailsByComma } from './helpers/emailHeadHelper';
 export default {
   props: {
-    clearMails: {
-      type: Boolean,
-      default: false,
+    ccEmails: {
+      type: String,
+      default: '',
+    },
+    bccEmails: {
+      type: String,
+      default: '',
     },
   },
   data() {
@@ -67,6 +71,18 @@ export default {
       bccEmailsVal: '',
     };
   },
+  watch: {
+    bccEmails(newVal) {
+      if (newVal !== this.bccEmailsVal) {
+        this.bccEmailsVal = newVal;
+      }
+    },
+    ccEmails(newVal) {
+      if (newVal !== this.ccEmailsVal) {
+        this.ccEmailsVal = newVal;
+      }
+    },
+  },
   validations: {
     ccEmailsVal: {
       hasValidEmails(value) {
@@ -85,18 +101,10 @@ export default {
     },
     onBlur() {
       this.$v.$touch();
-      this.$emit("set-emails", { bccEmails: this.bccEmailsVal, ccEmails: this.ccEmailsVal });
+      this.$emit('update:bccEmails', this.bccEmailsVal);
+      this.$emit('update:ccEmails', this.ccEmailsVal);
     },
   },
-  watch: {
-    clearMails: function(value){
-      if(value) {
-        this.ccEmailsVal = '';
-        this.bccEmailsVal = '';
-        this.clearMails = false;
-      }
-    }
-  }
 };
 </script>
 <style lang="scss" scoped>

From f5d79ffe58bbc08d89d39742041adaa61131936c Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 7 Dec 2021 23:45:36 +0530
Subject: [PATCH 59/69] chore: Updates icon for network disconnect alert
 (#3514)

* chore: Upadates icon for network disconnect alert

* Changes background color

* Review fixes

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../components/NetworkNotification.vue        | 78 +++++--------------
 .../FluentIcon/dashboard-icons.json           |  3 +-
 2 files changed, 22 insertions(+), 59 deletions(-)

diff --git a/app/javascript/dashboard/components/NetworkNotification.vue b/app/javascript/dashboard/components/NetworkNotification.vue
index 980e5ee02..767bb7a84 100644
--- a/app/javascript/dashboard/components/NetworkNotification.vue
+++ b/app/javascript/dashboard/components/NetworkNotification.vue
@@ -2,29 +2,21 @@
   <transition name="network-notification-fade" tag="div">
     <div v-show="showNotification" class="ui-notification-container">
       <div class="ui-notification">
-        <svg
-          class="ui-notification-icon"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
-          />
-        </svg>
+        <fluent-icon icon="wifi-off" />
         <p class="ui-notification-text">
           {{ $t('NETWORK.NOTIFICATION.TEXT') }}
         </p>
-        <button class="ui-refresh-button" @click="refreshPage">
+        <woot-button variant="clear" size="small" @click="refreshPage">
           {{ $t('NETWORK.BUTTON.REFRESH') }}
-        </button>
-        <button class="ui-close-button" @click="closeNotification">
-          <fluent-icon icon="dismiss-circle" class="ui-close-icon " />
-        </button>
+        </woot-button>
+        <woot-button
+          variant="clear"
+          size="small"
+          color-scheme="secondary"
+          icon="dismiss-circle"
+          @click="closeNotification"
+        >
+        </woot-button>
       </div>
     </div>
   </transition>
@@ -72,52 +64,24 @@ export default {
   position: absolute;
   right: var(--space-normal);
   top: var(--space-normal);
-  width: 100%;
-  z-index: 9999;
+  z-index: var(--z-index-very-high);
 }
 
 .ui-notification {
-  @include shadow;
-  align-items: center;
-  background-color: var(--white);
-  border: 1px solid var(--color-border);
-  border-radius: var(--space-one);
   display: flex;
   justify-content: space-between;
-  max-width: 40rem;
-  min-height: 3rem;
+  align-items: center;
+  width: 100%;
+
+  background-color: var(--y-100);
+  border-radius: var(--border-radius-medium);
+  box-shadow: var(--shadow-large);
+
   min-width: 24rem;
-  padding: var(--space-normal) var(--space-two);
-  text-align: left;
+  padding: var(--space-normal);
 }
 
 .ui-notification-text {
-  margin: 0;
-}
-
-.ui-refresh-button {
-  color: var(--color-woot);
-  font-size: var(--font-size-small);
-  font-weight: bold;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.ui-notification-icon {
-  color: var(--b-600);
-  width: var(--font-size-mega);
-}
-
-.ui-close-icon {
-  color: var(--b-600);
-  font-size: var(--font-size-large);
-}
-
-.ui-close-button {
-  &:hover {
-    cursor: pointer;
-  }
+  margin: 0 var(--space-small);
 }
 </style>
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index dbef10f58..35a663080 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -75,13 +75,12 @@
   "tag-outline": "M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.003-4.596l8.5-8.51A3.25 3.25 0 0 1 14.284 2h5.465Zm0 1.5h-5.465c-.465 0-.91.185-1.239.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75ZM17 5.502a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z",
   "video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
   "warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",
+  "wifi-off-outline": "m12.858 14.273 7.434 7.434a1 1 0 0 0 1.414-1.414l-17.999-18a1 1 0 1 0-1.414 1.414L5.39 6.804c-.643.429-1.254.927-1.821 1.495a12.382 12.382 0 0 0-1.39 1.683 1 1 0 0 0 1.644 1.14c.363-.524.761-1.01 1.16-1.41a9.94 9.94 0 0 1 1.855-1.46L7.99 9.405a8.14 8.14 0 0 0-3.203 3.377 1 1 0 0 0 1.784.903 6.08 6.08 0 0 1 1.133-1.563 6.116 6.116 0 0 1 1.77-1.234l1.407 1.407A5.208 5.208 0 0 0 8.336 13.7a5.25 5.25 0 0 0-1.09 1.612 1 1 0 0 0 1.832.802c.167-.381.394-.722.672-1a3.23 3.23 0 0 1 3.108-.841Zm-1.332-5.93 2.228 2.229a6.1 6.1 0 0 1 2.616 1.55c.444.444.837.995 1.137 1.582a1 1 0 1 0 1.78-.911 8.353 8.353 0 0 0-1.503-2.085 8.108 8.108 0 0 0-6.258-2.365ZM8.51 5.327l1.651 1.651a9.904 9.904 0 0 1 10.016 4.148 1 1 0 1 0 1.646-1.136A11.912 11.912 0 0 0 8.51 5.327Zm4.552 11.114a1.501 1.501 0 1 1-2.123 2.123 1.501 1.501 0 0 1 2.123-2.123Z",
 
   "brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
   "brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
   "brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
   "brand-line-outline": "M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314",
-  "brand-sms-outline": "M272.1 204.2v71.1c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.1 0-2.1-.6-2.6-1.3l-32.6-44v42.2c0 1.8-1.4 3.2-3.2 3.2h-11.4c-1.8 0-3.2-1.4-3.2-3.2v-71.1c0-1.8 1.4-3.2 3.2-3.2H219c1 0 2.1 .5 2.6 1.4l32.6 44v-42.2c0-1.8 1.4-3.2 3.2-3.2h11.4c1.8-.1 3.3 1.4 3.3 3.1zm-82-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 1.8 1.4 3.2 3.2 3.2h11.4c1.8 0 3.2-1.4 3.2-3.2v-71.1c0-1.7-1.4-3.2-3.2-3.2zm-27.5 59.6h-31.1v-56.4c0-1.8-1.4-3.2-3.2-3.2h-11.4c-1.8 0-3.2 1.4-3.2 3.2v71.1c0 .9 .3 1.6 .9 2.2 .6 .5 1.3 .9 2.2 .9h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.7-1.4-3.2-3.1-3.2zM332.1 201h-45.7c-1.7 0-3.2 1.4-3.2 3.2v71.1c0 1.7 1.4 3.2 3.2 3.2h45.7c1.8 0 3.2-1.4 3.2-3.2v-11.4c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2V234c0-1.8-1.4-3.2-3.2-3.2H301v-12h31.1c1.8 0 3.2-1.4 3.2-3.2v-11.4c-.1-1.7-1.5-3.2-3.2-3.2zM448 113.7V399c-.1 44.8-36.8 81.1-81.7 81H81c-44.8-.1-81.1-36.9-81-81.7V113c.1-44.8 36.9-81.1 81.7-81H367c44.8 .1 81.1 36.8 81 81.7zm-61.6 122.6c0-73-73.2-132.4-163.1-132.4-89.9 0-163.1 59.4-163.1 132.4 0 65.4 58 120.2 136.4 130.6 19.1 4.1 16.9 11.1 12.6 36.8-.7 4.1-3.3 16.1 14.1 8.8 17.4-7.3 93.9-55.3 128.2-94.7 23.6-26 34.9-52.3 34.9-81.5z",
-  "brand-telegram-outline": "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
   "brand-sms-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.644-1.142l-4.29 1.117a.85.85 0 0 1-1.037-1.036l1.116-4.289A9.959 9.959 0 0 1 2 12C2 6.477 6.477 2 12 2Zm1.252 11H8.75l-.102.007a.75.75 0 0 0 0 1.486l.102.007h4.502l.101-.007a.75.75 0 0 0 0-1.486L13.252 13Zm1.998-3.5h-6.5l-.102.007a.75.75 0 0 0 0 1.486L8.75 11h6.5l.102-.007a.75.75 0 0 0 0-1.486L15.25 9.5Z",
   "brand-telegram-outline": "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
   "brand-linkedin-outline": "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",

From 714c10dc66b837e6069ef182cfcf4809f25c637b Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 8 Dec 2021 14:20:59 +0530
Subject: [PATCH 60/69] bug: Fixes error with the secondary menu. (#3524)

---
 .../components/layout/sidebarComponents/Secondary.vue        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index 956dbf708..bed093042 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="menuConfig.menuItems.length" class="main-nav secondary-menu">
+  <div v-if="hasSecondaryMenu" class="main-nav secondary-menu">
     <transition-group name="menu-list" tag="ul" class="menu vertical">
       <secondary-nav-item
         v-for="menuItem in accessibleMenuItems"
@@ -50,6 +50,9 @@ export default {
     },
   },
   computed: {
+    hasSecondaryMenu() {
+      return this.menuConfig.menuItems && this.menuConfig.menuItems.length;
+    },
     accessibleMenuItems() {
       if (!this.currentRole) {
         return [];

From f609a28c6bf096ae3a7de07105ddbf60fa066121 Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Wed, 8 Dec 2021 16:17:49 +0530
Subject: [PATCH 61/69] Fix: Added facebook login scope with new advanced
 access for page read (#3518)

---
 .../routes/dashboard/settings/inbox/channels/Facebook.vue     | 4 ++--
 .../routes/dashboard/settings/inbox/facebook/Reauthorize.vue  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 25d85b486..820b4631b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -163,7 +163,7 @@ export default {
           FB.init({
             appId: window.chatwootConfig.fbAppId,
             xfbml: true,
-            version: 'v7.0',
+            version: 'v12.0',
             status: true,
           });
           window.fbSDKLoaded = true;
@@ -207,7 +207,7 @@ export default {
         },
         {
           scope:
-            'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,instagram_manage_messages',
+            'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,pages_read_engagement,instagram_manage_messages',
         }
       );
     },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
index c8d12df89..736642f29 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/facebook/Reauthorize.vue
@@ -40,7 +40,7 @@ export default {
           FB.init({
             appId: window.chatwootConfig.fbAppId,
             xfbml: true,
-            version: 'v7.0',
+            version: 'v12.0',
             status: true,
           });
           window.fbSDKLoaded = true;
@@ -80,7 +80,7 @@ export default {
         },
         {
           scope:
-            'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,instagram_manage_messages',
+            'pages_manage_metadata,pages_messaging,instagram_basic,pages_show_list,pages_read_engagement,instagram_manage_messages',
           auth_type: 'reauthorize',
         }
       );

From 35130bc83e9a3ca441ca3e09867a8140f4678d93 Mon Sep 17 00:00:00 2001
From: Tejaswini Chile <tejaswini@chatwoot.com>
Date: Wed, 8 Dec 2021 18:03:27 +0530
Subject: [PATCH 62/69] Fix: Add foreign key with delete cascade for
 destroy_async (#3527)

---
 ...0211208085931_update_contact_inbox_foreign_key.rb | 12 ++++++++++++
 db/schema.rb                                         |  8 ++++----
 2 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 db/migrate/20211208085931_update_contact_inbox_foreign_key.rb

diff --git a/db/migrate/20211208085931_update_contact_inbox_foreign_key.rb b/db/migrate/20211208085931_update_contact_inbox_foreign_key.rb
new file mode 100644
index 000000000..100d410d6
--- /dev/null
+++ b/db/migrate/20211208085931_update_contact_inbox_foreign_key.rb
@@ -0,0 +1,12 @@
+class UpdateContactInboxForeignKey < ActiveRecord::Migration[6.1]
+  def change
+    remove_foreign_key :contact_inboxes, :contacts
+    add_foreign_key :contact_inboxes, :contacts, on_delete: :cascade
+
+    remove_foreign_key :contact_inboxes, :inboxes
+    add_foreign_key :contact_inboxes, :inboxes, on_delete: :cascade
+
+    remove_foreign_key :conversations, :contact_inboxes
+    add_foreign_key :conversations, :contact_inboxes, on_delete: :cascade
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 5232229ad..b172e2bfd 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2021_12_07_113102) do
+ActiveRecord::Schema.define(version: 2021_12_08_085931) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
@@ -753,10 +753,10 @@ ActiveRecord::Schema.define(version: 2021_12_07_113102) do
   add_foreign_key "agent_bots", "accounts"
   add_foreign_key "campaigns", "accounts"
   add_foreign_key "campaigns", "inboxes"
-  add_foreign_key "contact_inboxes", "contacts"
-  add_foreign_key "contact_inboxes", "inboxes"
+  add_foreign_key "contact_inboxes", "contacts", on_delete: :cascade
+  add_foreign_key "contact_inboxes", "inboxes", on_delete: :cascade
   add_foreign_key "conversations", "campaigns"
-  add_foreign_key "conversations", "contact_inboxes"
+  add_foreign_key "conversations", "contact_inboxes", on_delete: :cascade
   add_foreign_key "conversations", "teams"
   add_foreign_key "csat_survey_responses", "accounts"
   add_foreign_key "csat_survey_responses", "contacts"

From 3ee6b7d6e9a2ae330a181cd874a84fb7791050bc Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 8 Dec 2021 20:15:27 +0530
Subject: [PATCH 63/69] chore: Add the ability to use same key for conversation
 and contact (#3526)

---
 app/models/custom_attribute_definition.rb                 | 4 ++--
 ...ttribute_model_index_on_custom_attribute_definition.rb | 8 ++++++++
 db/schema.rb                                              | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 db/migrate/20211208081344_add_attribute_model_index_on_custom_attribute_definition.rb

diff --git a/app/models/custom_attribute_definition.rb b/app/models/custom_attribute_definition.rb
index cc8590f45..72b67ce06 100644
--- a/app/models/custom_attribute_definition.rb
+++ b/app/models/custom_attribute_definition.rb
@@ -16,7 +16,7 @@
 #
 # Indexes
 #
-#  attribute_key_index                               (attribute_key,account_id) UNIQUE
+#  attribute_key_model_index                         (attribute_key,attribute_model,account_id) UNIQUE
 #  index_custom_attribute_definitions_on_account_id  (account_id)
 #
 class CustomAttributeDefinition < ApplicationRecord
@@ -25,7 +25,7 @@ class CustomAttributeDefinition < ApplicationRecord
 
   validates :attribute_key,
             presence: true,
-            uniqueness: { scope: :account_id }
+            uniqueness: { scope: [:account_id, :attribute_model] }
 
   validates :attribute_display_type, presence: true
   validates :attribute_model, presence: true
diff --git a/db/migrate/20211208081344_add_attribute_model_index_on_custom_attribute_definition.rb b/db/migrate/20211208081344_add_attribute_model_index_on_custom_attribute_definition.rb
new file mode 100644
index 000000000..a79826668
--- /dev/null
+++ b/db/migrate/20211208081344_add_attribute_model_index_on_custom_attribute_definition.rb
@@ -0,0 +1,8 @@
+class AddAttributeModelIndexOnCustomAttributeDefinition < ActiveRecord::Migration[6.1]
+  def change
+    remove_index :custom_attribute_definitions, [:attribute_key, :account_id], name: 'attribute_key_index',
+                                                                               if_exists: true
+    add_index :custom_attribute_definitions, [:attribute_key, :attribute_model, :account_id], unique: true, name: 'attribute_key_model_index',
+                                                                                              if_not_exists: true
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index b172e2bfd..06ff9e42c 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -368,7 +368,7 @@ ActiveRecord::Schema.define(version: 2021_12_08_085931) do
     t.text "attribute_description"
     t.jsonb "attribute_values", default: []
     t.index ["account_id"], name: "index_custom_attribute_definitions_on_account_id"
-    t.index ["attribute_key", "account_id"], name: "attribute_key_index", unique: true
+    t.index ["attribute_key", "attribute_model", "account_id"], name: "attribute_key_model_index", unique: true
   end
 
   create_table "custom_filters", force: :cascade do |t|

From 9306b725d8ba952dee2495442375c408c3e7cf60 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 9 Dec 2021 07:02:00 +0530
Subject: [PATCH 64/69] chore: Fix pre-commit hooks (#3525)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 .eslintrc.js                                  |  3 +++
 .husky/pre-commit                             |  5 ++++
 .husky/pre-push                               |  4 +++
 .../dashboard/components/Snackbar.vue         | 11 ++++----
 .../dashboard/components/ui/Switch.vue        | 22 ++++++++++------
 .../components/widgets/EmptyState.vue         |  8 ++++--
 .../components/widgets/LoadingState.vue       |  2 +-
 .../widgets/conversation/OnboardingView.vue   |  7 ++---
 .../widgets/forms/AvatarUploader.vue          |  6 ++---
 .../dashboard/settings/automation/Index.vue   |  2 +-
 .../settings/inbox/channels/Line.vue          | 26 +++++++++++--------
 .../dashboard/settings/inbox/channels/Sms.vue |  4 +--
 .../settings/profile/NotificationSettings.vue |  1 +
 .../dashboard/routes/login/Login.vue          | 12 ++++++---
 .../store/modules/conversations/index.js      | 15 +++--------
 .../shared/components/GreetingsEditor.vue     |  2 +-
 app/javascript/shared/components/TextArea.vue |  3 +--
 package.json                                  |  9 ++++---
 yarn.lock                                     |  8 +++---
 19 files changed, 85 insertions(+), 65 deletions(-)
 create mode 100755 .husky/pre-commit
 create mode 100755 .husky/pre-push

diff --git a/.eslintrc.js b/.eslintrc.js
index c5cbba917..77ea9be7c 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -28,6 +28,9 @@ module.exports = {
     }],
     'vue/html-self-closing': 'off',
     "vue/no-v-html": 'off',
+    'vue/singleline-html-element-content-newline': 'warn',
+    'vue/require-default-prop': 'warn',
+    'vue/require-prop-types': 'warn',
     'import/extensions': ['off']
 
   },
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 000000000..7774f34f5
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+npm run eslint
+bundle exec rubocop -a
+git add
diff --git a/.husky/pre-push b/.husky/pre-push
new file mode 100755
index 000000000..f0e139ad8
--- /dev/null
+++ b/.husky/pre-push
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+sh bin/validate_push
diff --git a/app/javascript/dashboard/components/Snackbar.vue b/app/javascript/dashboard/components/Snackbar.vue
index 62673e02a..d34702ab8 100644
--- a/app/javascript/dashboard/components/Snackbar.vue
+++ b/app/javascript/dashboard/components/Snackbar.vue
@@ -1,13 +1,14 @@
 <template>
   <div>
     <div class="ui-snackbar">
-      <div class="ui-snackbar-text">{{ message }}</div>
+      <div class="ui-snackbar-text">
+        {{ message }}
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
   props: {
     message: String,
@@ -22,9 +23,7 @@ export default {
       toggleAfterTimeout: false,
     };
   },
-  methods: {
-  },
-  mounted() {
-  },
+  mounted() {},
+  methods: {},
 };
 </script>
diff --git a/app/javascript/dashboard/components/ui/Switch.vue b/app/javascript/dashboard/components/ui/Switch.vue
index f28c84998..e1b27df8e 100644
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -1,7 +1,13 @@
-
 <template>
   <label class="switch" :class="classObject">
-    <input class="switch-input" :name="name" :id="id" :disabled="disabled" v-model="value" type="checkbox">
+    <input
+      :id="id"
+      v-model="value"
+      class="switch-input"
+      :name="name"
+      :disabled="disabled"
+      type="checkbox"
+    />
     <div class="switch-paddle" :for="name">
       <span class="show-for-sr">on off</span>
     </div>
@@ -24,12 +30,6 @@ export default {
       value: null,
     };
   },
-  beforeMount() {
-    this.value = this.checked;
-  },
-  mounted() {
-    this.$emit('input', this.value = !!this.checked);
-  },
   computed: {
     classObject() {
       const { type, size, value } = this;
@@ -45,5 +45,11 @@ export default {
       this.$emit('input', val);
     },
   },
+  beforeMount() {
+    this.value = this.checked;
+  },
+  mounted() {
+    this.$emit('input', (this.value = !!this.checked));
+  },
 };
 </script>
diff --git a/app/javascript/dashboard/components/widgets/EmptyState.vue b/app/javascript/dashboard/components/widgets/EmptyState.vue
index 6bb8ecaed..a9fc17087 100644
--- a/app/javascript/dashboard/components/widgets/EmptyState.vue
+++ b/app/javascript/dashboard/components/widgets/EmptyState.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="row empty-state">
-    <h3 class="title">{{ title }}</h3>
-    <p class="message">{{ message }}</p>
+    <h3 class="title">
+      {{ title }}
+    </h3>
+    <p class="message">
+      {{ message }}
+    </p>
     <slot />
   </div>
 </template>
diff --git a/app/javascript/dashboard/components/widgets/LoadingState.vue b/app/javascript/dashboard/components/widgets/LoadingState.vue
index f8d33c961..6ec16fdb1 100644
--- a/app/javascript/dashboard/components/widgets/LoadingState.vue
+++ b/app/javascript/dashboard/components/widgets/LoadingState.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="row loading-state">
-    <h6 class="message">{{message}}<span class="spinner"></span></h6>
+    <h6 class="message">{{ message }}<span class="spinner"></span></h6>
   </div>
 </template>
 <script>
diff --git a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
index 3d3735a1d..9999f3778 100644
--- a/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
@@ -42,7 +42,8 @@
         </div>
         <div class="features-item">
           <h2 class="block-title">
-            <span class="emoji">👥</span>{{ $t('ONBOARDING.TEAM_MEMBERS.TITLE') }}
+            <span class="emoji">👥</span>
+            {{ $t('ONBOARDING.TEAM_MEMBERS.TITLE') }}
           </h2>
           <p class="intro-body">
             {{ $t('ONBOARDING.TEAM_MEMBERS.DESCRIPTION') }}
@@ -55,7 +56,7 @@
           <h2 class="block-title">
             <span class="emoji">📥</span>{{ $t('ONBOARDING.INBOXES.TITLE') }}
           </h2>
-          <p class="intro-body ">
+          <p class="intro-body">
             {{ $t('ONBOARDING.INBOXES.DESCRIPTION') }}
           </p>
           <router-link :to="newInboxURL" class="onboarding--link">
@@ -66,7 +67,7 @@
           <h2 class="block-title">
             <span class="emoji">🏷</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
           </h2>
-          <p class="intro-body ">
+          <p class="intro-body">
             {{ $t('ONBOARDING.LABELS.DESCRIPTION') }}
           </p>
           <router-link :to="newLabelsURL" class="onboarding--link">
diff --git a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
index 705d15ad8..768d9c119 100644
--- a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
+++ b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -10,10 +10,9 @@
         variant="hollow"
         size="tiny"
         @click="onAvatarDelete"
-        >{{
-          this.$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT')
-        }}</woot-button
       >
+        {{ this.$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT') }}
+      </woot-button>
     </div>
     <label>
       <input
@@ -26,7 +25,6 @@
       <slot></slot>
     </label>
   </div>
-
 </template>
 
 <script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
index 36d7d6be6..083b51246 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
@@ -9,4 +9,4 @@
     </woot-button>
   </div>
 </template>
-<script>
+<script></script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
index 339ded821..b6d13fcc0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
@@ -81,7 +81,6 @@ import { required } from 'vuelidate/lib/validators';
 import router from '../../../../index';
 import PageHeader from '../../SettingsSubPageHeader';
 
-
 export default {
   components: {
     PageHeader,
@@ -114,15 +113,18 @@ export default {
       }
 
       try {
-        const lineChannel = await this.$store.dispatch('inboxes/createChannel', {
-          name: this.channelName,
-          channel: {
-            type: 'line',
-            line_channel_id: this.lineChannelId,
-            line_channel_secret: this.lineChannelSecret,
-            line_channel_token: this.lineChannelToken,
-          },
-        });
+        const lineChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            name: this.channelName,
+            channel: {
+              type: 'line',
+              line_channel_id: this.lineChannelId,
+              line_channel_secret: this.lineChannelSecret,
+              line_channel_token: this.lineChannelToken,
+            },
+          }
+        );
 
         router.replace({
           name: 'settings_inboxes_add_agents',
@@ -132,7 +134,9 @@ export default {
           },
         });
       } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.ADD.LINE_CHANNEL.API.ERROR_MESSAGE'));
+        this.showAlert(
+          this.$t('INBOX_MGMT.ADD.LINE_CHANNEL.API.ERROR_MESSAGE')
+        );
       }
     },
   },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
index 5b5c9f09c..cc4d18f1a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
@@ -4,7 +4,7 @@
       :header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
     />
-		<twilio type="sms"></twilio>
+    <twilio type="sms"></twilio>
   </div>
 </template>
 
@@ -15,7 +15,7 @@ import Twilio from './Twilio';
 export default {
   components: {
     PageHeader,
-		Twilio,
+    Twilio,
   },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
index 27c10ecdc..bbf92b43d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
@@ -313,6 +313,7 @@ export default {
               this.hasEnabledPushPermissions = true;
             }
           })
+          // eslint-disable-next-line no-console
           .catch(error => console.log(error))
       );
     },
diff --git a/app/javascript/dashboard/routes/login/Login.vue b/app/javascript/dashboard/routes/login/Login.vue
index a56a02ad6..c31bd5479 100644
--- a/app/javascript/dashboard/routes/login/Login.vue
+++ b/app/javascript/dashboard/routes/login/Login.vue
@@ -149,13 +149,17 @@ export default {
           }
 
           if (response && response.status === 401) {
-						const { errors } = response.data;
-						const hasAuthErrorMsg = errors && errors.length && errors[0] && typeof errors[0] === 'string';
+            const { errors } = response.data;
+            const hasAuthErrorMsg =
+              errors &&
+              errors.length &&
+              errors[0] &&
+              typeof errors[0] === 'string';
             if (hasAuthErrorMsg) {
               this.showAlert(errors[0]);
             } else {
-							this.showAlert(this.$t('LOGIN.API.UNAUTH'));
-						} 
+              this.showAlert(this.$t('LOGIN.API.UNAUTH'));
+            }
             return;
           }
           this.showAlert(this.$t('LOGIN.API.ERROR_MESSAGE'));
diff --git a/app/javascript/dashboard/store/modules/conversations/index.js b/app/javascript/dashboard/store/modules/conversations/index.js
index 07475266c..c8519c253 100644
--- a/app/javascript/dashboard/store/modules/conversations/index.js
+++ b/app/javascript/dashboard/store/modules/conversations/index.js
@@ -68,10 +68,7 @@ export const mutations = {
     Vue.set(chat.meta, 'team', team);
   },
 
-  [types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES](
-    _state,
-    custom_attributes
-  ) {
+  [types.UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES](_state, custom_attributes) {
     const [chat] = getSelectedChatConversation(_state);
     Vue.set(chat, 'custom_attributes', custom_attributes);
   },
@@ -165,10 +162,7 @@ export const mutations = {
     Vue.set(chat.meta, 'assignee', payload.assignee);
   },
 
-  [types.UPDATE_CONVERSATION_CONTACT](
-    _state,
-    { conversationId, ...payload }
-  ) {
+  [types.UPDATE_CONVERSATION_CONTACT](_state, { conversationId, ...payload }) {
     const [chat] = _state.allConversations.filter(c => c.id === conversationId);
     if (chat) {
       Vue.set(chat.meta, 'sender', payload);
@@ -179,10 +173,7 @@ export const mutations = {
     _state.currentInbox = inboxId ? parseInt(inboxId, 10) : null;
   },
 
-  [types.SET_CONVERSATION_CAN_REPLY](
-    _state,
-    { conversationId, canReply }
-  ) {
+  [types.SET_CONVERSATION_CAN_REPLY](_state, { conversationId, canReply }) {
     const [chat] = _state.allConversations.filter(c => c.id === conversationId);
     if (chat) {
       Vue.set(chat, 'can_reply', canReply);
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index 21054f318..86eef8a8c 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -56,7 +56,7 @@ export default {
     };
   },
   watch: {
-    value: function (newValue) {
+    value: function(newValue) {
       this.greetingsMessage = newValue;
     },
   },
diff --git a/app/javascript/shared/components/TextArea.vue b/app/javascript/shared/components/TextArea.vue
index 8d87abc7c..9ab6536bd 100644
--- a/app/javascript/shared/components/TextArea.vue
+++ b/app/javascript/shared/components/TextArea.vue
@@ -23,8 +23,7 @@
         outline-none
       "
       :class="{
-        'border-black-200 hover:border-black-300 focus:border-black-300':
-          !error,
+        'border-black-200 hover:border-black-300 focus:border-black-300': !error,
         'border-red-200 hover:border-red-300 focus:border-red-300': error,
       }"
       :placeholder="placeholder"
diff --git a/package.json b/package.json
index ea76748df..5e193551d 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "1.22.1",
   "license": "MIT",
   "scripts": {
-    "eslint": "eslint app/javascript --fix",
+    "eslint": "eslint app/**/*.{js,vue} --fix",
     "pretest": "rimraf .jest-cache",
     "test": "jest  -w 1 --no-cache",
     "test:watch": "jest -w 1 --watch --no-cache",
@@ -13,7 +13,8 @@
     "start:dev-overmind": "overmind start -f ./Procfile.dev",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "ruby:prettier": "bundle exec rubocop -a"
+    "ruby:prettier": "bundle exec rubocop -a",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@braid/vue-formulate": "^2.5.2",
@@ -100,7 +101,7 @@
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-vue": "^6.2.2",
     "expect-more-jest": "^2.4.2",
-    "husky": "6.0.0",
+    "husky": "^7.0.0",
     "jest": "26.6.3",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
@@ -129,7 +130,7 @@
     ]
   },
   "lint-staged": {
-    "*.{js,vue}": [
+    "app/**/*.{js,vue}": [
       "eslint --fix",
       "git add"
     ],
diff --git a/yarn.lock b/yarn.lock
index a0a662bac..d1bed0704 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7828,10 +7828,10 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-husky@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-6.0.0.tgz#810f11869adf51604c32ea577edbc377d7f9319e"
-  integrity sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==
+husky@^7.0.0:
+  version "7.0.4"
+  resolved "https://registry.npmjs.org/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
+  integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==
 
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"

From 1db82f235df266de566fc6dea7307fbd91c324e5 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 9 Dec 2021 11:11:46 +0530
Subject: [PATCH 65/69] Chore: Improve confirmation flow for agents (#3519)

- Agents are redirected to the password reset page which confirms the agent as well as sets a new password.
---
 .../confirmations_controller.rb               |  7 ++-----
 .../mailer/confirmation_instructions.html.erb |  4 ++++
 .../mailers/confirmation_instructions_spec.rb | 19 +++++++++++++++++--
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/controllers/devise_overrides/confirmations_controller.rb b/app/controllers/devise_overrides/confirmations_controller.rb
index 02d412cb1..1a6dc4209 100644
--- a/app/controllers/devise_overrides/confirmations_controller.rb
+++ b/app/controllers/devise_overrides/confirmations_controller.rb
@@ -28,10 +28,7 @@ class DeviseOverrides::ConfirmationsController < Devise::ConfirmationsController
   end
 
   def create_reset_token_link(user)
-    raw, enc = Devise.token_generator.generate(user.class, :reset_password_token)
-    user.reset_password_token   = enc
-    user.reset_password_sent_at = Time.now.utc
-    user.save(validate: false)
-    "/app/auth/password/edit?config=default&redirect_url=&reset_password_token=#{raw}"
+    token = user.send(:set_reset_password_token)
+    "/app/auth/password/edit?config=default&redirect_url=&reset_password_token=#{token}"
   end
 end
diff --git a/app/views/devise/mailer/confirmation_instructions.html.erb b/app/views/devise/mailer/confirmation_instructions.html.erb
index 79f838dbb..cf956463e 100644
--- a/app/views/devise/mailer/confirmation_instructions.html.erb
+++ b/app/views/devise/mailer/confirmation_instructions.html.erb
@@ -7,4 +7,8 @@
 
 <p>You can confirm your account email through the link below:</p>
 
+<% if account_user&.inviter.present? %>
+<p><%= link_to 'Confirm my account', frontend_url('auth/password/edit', reset_password_token: @resource.send(:set_reset_password_token)) %></p>
+<% else %>
 <p><%= link_to 'Confirm my account', frontend_url('auth/confirmation', confirmation_token: @token) %></p>
+<% end %>
\ No newline at end of file
diff --git a/spec/mailers/confirmation_instructions_spec.rb b/spec/mailers/confirmation_instructions_spec.rb
index 8310ab714..e322d9351 100644
--- a/spec/mailers/confirmation_instructions_spec.rb
+++ b/spec/mailers/confirmation_instructions_spec.rb
@@ -5,9 +5,14 @@ require 'rails_helper'
 RSpec.describe 'Confirmation Instructions', type: :mailer do
   describe :notify do
     let(:account) { create(:account) }
-    let(:confirmable_user) { create(:user, inviter: inviter_val, account: account) }
+    let!(:confirmable_user) { create(:user, inviter: inviter_val, account: account) }
     let(:inviter_val) { nil }
-    let(:mail) { Devise::Mailer.confirmation_instructions(confirmable_user, nil, {}) }
+    let(:mail) { Devise::Mailer.confirmation_instructions(confirmable_user.reload, nil, {}) }
+
+    before do
+      # to verify the token in email
+      confirmable_user.send(:generate_confirmation_token)
+    end
 
     it 'has the correct header data' do
       expect(mail.reply_to).to contain_exactly('accounts@chatwoot.com')
@@ -23,6 +28,11 @@ RSpec.describe 'Confirmation Instructions', type: :mailer do
       expect(mail.body).to_not match('has invited you to try out Chatwoot!')
     end
 
+    it 'sends a confirmation link' do
+      expect(mail.body).to include("app/auth/confirmation?confirmation_token=#{confirmable_user.confirmation_token}")
+      expect(mail.body).not_to include('app/auth/password/edit')
+    end
+
     context 'when there is an inviter' do
       let(:inviter_val) { create(:user, :administrator, skip_confirmation: true, account: account) }
 
@@ -31,6 +41,11 @@ RSpec.describe 'Confirmation Instructions', type: :mailer do
           "#{CGI.escapeHTML(inviter_val.name)}, with #{CGI.escapeHTML(account.name)}, has invited you to try out Chatwoot!"
         )
       end
+
+      it 'sends a password reset link' do
+        expect(mail.body).to include('app/auth/password/edit?reset_password_token')
+        expect(mail.body).not_to include('app/auth/confirmation')
+      end
     end
   end
 end

From 2be71e73dc0076f21d58b6bfd6057fbd51810522 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Wed, 8 Dec 2021 21:50:14 -0800
Subject: [PATCH 66/69] feat: Add a view for mentions (#3505)

- Added a new table mentions for saving user mentions
- Added a filter conversation_type in the API
- Added a view to see the mentions
---
 app/finders/conversation_finder.rb            | 13 +++-
 .../dashboard/api/inbox/conversation.js       | 14 ++++-
 .../dashboard/components/ChatList.vue         | 14 +++++
 .../config/sidebarItems/conversations.js      |  9 +++
 .../components/specs/SidemenuIcon.spec.js     |  4 +-
 .../widgets/conversation/ConversationCard.vue |  5 ++
 .../conversation/specs/MoreActions.spec.js    |  3 +-
 app/javascript/dashboard/helper/URLHelper.js  | 18 +++---
 .../dashboard/helper/actionCable.js           |  5 ++
 .../dashboard/i18n/locale/en/chatlist.json    |  1 +
 .../dashboard/i18n/locale/en/settings.json    |  1 +
 .../conversation/ConversationView.vue         |  5 ++
 .../conversation/conversation.routes.js       | 37 +++++++++---
 .../store/modules/conversations/actions.js    | 55 ++++++-----------
 .../conversations/helpers/actionHelpers.js    | 46 +++++++++++++++
 .../helpers/specs/actionHelpers.spec.js       | 12 ++++
 .../specs/conversations/actions.spec.js       | 59 ++++++++++++++++++-
 .../FluentIcon/dashboard-icons.json           | 18 +++---
 app/jobs/conversations/user_mention_job.rb    | 24 ++++++++
 app/listeners/action_cable_listener.rb        |  7 +++
 app/listeners/notification_listener.rb        |  5 +-
 app/models/account.rb                         | 45 +++++++-------
 app/models/conversation.rb                    |  1 +
 app/models/mention.rb                         | 50 ++++++++++++++++
 app/models/user.rb                            |  7 ++-
 db/migrate/20211201224513_create_mentions.rb  | 13 ++++
 db/schema.rb                                  | 15 +++++
 lib/events/types.rb                           |  1 +
 28 files changed, 389 insertions(+), 98 deletions(-)
 create mode 100644 app/javascript/dashboard/store/modules/conversations/helpers/actionHelpers.js
 create mode 100644 app/javascript/dashboard/store/modules/conversations/helpers/specs/actionHelpers.spec.js
 create mode 100644 app/jobs/conversations/user_mention_job.rb
 create mode 100644 app/models/mention.rb
 create mode 100644 db/migrate/20211201224513_create_mentions.rb

diff --git a/app/finders/conversation_finder.rb b/app/finders/conversation_finder.rb
index f2641dde0..3409a2450 100644
--- a/app/finders/conversation_finder.rb
+++ b/app/finders/conversation_finder.rb
@@ -70,7 +70,12 @@ class ConversationFinder
   end
 
   def find_all_conversations
-    @conversations = current_account.conversations.where(inbox_id: @inbox_ids)
+    if params[:conversation_type] == 'mention'
+      conversation_ids = current_account.mentions.where(user: current_user).pluck(:conversation_id)
+      @conversations = current_account.conversations.where(id: conversation_ids)
+    else
+      @conversations = current_account.conversations.where(inbox_id: @inbox_ids)
+    end
   end
 
   def filter_by_assignee_type
@@ -123,6 +128,10 @@ class ConversationFinder
     @conversations = @conversations.includes(
       :taggings, :inbox, { assignee: { avatar_attachment: [:blob] } }, { contact: { avatar_attachment: [:blob] } }, :team, :contact_inbox
     )
-    @conversations.latest.page(current_page)
+    if params[:conversation_type] == 'mention'
+      @conversations.page(current_page)
+    else
+      @conversations.latest.page(current_page)
+    end
   end
 end
diff --git a/app/javascript/dashboard/api/inbox/conversation.js b/app/javascript/dashboard/api/inbox/conversation.js
index 8fca2b83c..9f6b8baf1 100644
--- a/app/javascript/dashboard/api/inbox/conversation.js
+++ b/app/javascript/dashboard/api/inbox/conversation.js
@@ -6,7 +6,15 @@ class ConversationApi extends ApiClient {
     super('conversations', { accountScoped: true });
   }
 
-  get({ inboxId, status, assigneeType, page, labels, teamId }) {
+  get({
+    inboxId,
+    status,
+    assigneeType,
+    page,
+    labels,
+    teamId,
+    conversationType,
+  }) {
     return axios.get(this.url, {
       params: {
         inbox_id: inboxId,
@@ -15,6 +23,7 @@ class ConversationApi extends ApiClient {
         assignee_type: assigneeType,
         page,
         labels,
+        conversation_type: conversationType,
       },
     });
   }
@@ -74,7 +83,7 @@ class ConversationApi extends ApiClient {
     return axios.post(`${this.url}/${conversationId}/unmute`);
   }
 
-  meta({ inboxId, status, assigneeType, labels, teamId }) {
+  meta({ inboxId, status, assigneeType, labels, teamId, conversationType }) {
     return axios.get(`${this.url}/meta`, {
       params: {
         inbox_id: inboxId,
@@ -82,6 +91,7 @@ class ConversationApi extends ApiClient {
         assignee_type: assigneeType,
         labels,
         team_id: teamId,
+        conversation_type: conversationType,
       },
     });
   }
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 1517105df..2abffb1c8 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -51,6 +51,7 @@ l<template>
         :active-label="label"
         :team-id="teamId"
         :chat="chat"
+        :conversation-type="conversationType"
         :show-assignee="showAssigneeInConversationCard"
       />
 
@@ -133,6 +134,10 @@ export default {
       type: String,
       default: '',
     },
+    conversationType: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -203,6 +208,9 @@ export default {
         page: this.currentPage + 1,
         labels: this.label ? [this.label] : undefined,
         teamId: this.teamId ? this.teamId : undefined,
+        conversationType: this.conversationType
+          ? this.conversationType
+          : undefined,
       };
     },
     pageTitle() {
@@ -215,6 +223,9 @@ export default {
       if (this.label) {
         return `#${this.label}`;
       }
+      if (this.conversationType === 'mention') {
+        return this.$t('CHAT_LIST.MENTION_HEADING');
+      }
       return this.$t('CHAT_LIST.TAB_HEADING');
     },
     conversationList() {
@@ -251,6 +262,9 @@ export default {
     label() {
       this.resetAndFetchData();
     },
+    conversationType() {
+      this.resetAndFetchData();
+    },
   },
   mounted() {
     this.$store.dispatch('setChatFilter', this.activeStatus);
diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js b/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
index 4def32a08..550a9f1d5 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js
@@ -12,6 +12,8 @@ const conversations = accountId => ({
     'conversations_through_label',
     'team_conversations',
     'conversations_through_team',
+    'conversation_mentions',
+    'conversation_through_mentions',
   ],
   menuItems: [
     {
@@ -22,6 +24,13 @@ const conversations = accountId => ({
       toolTip: 'Conversation from all subscribed inboxes',
       toStateName: 'home',
     },
+    {
+      icon: 'mention',
+      label: 'MENTIONED_CONVERSATIONS',
+      key: 'conversation_mentions',
+      toState: frontendURL(`accounts/${accountId}/mentions/conversations`),
+      toStateName: 'conversation_mentions',
+    },
   ],
 });
 
diff --git a/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js b/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
index 3efc75a02..726c80de2 100644
--- a/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
+++ b/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
@@ -1,9 +1,9 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import SidemenuIcon from '../SidemenuIcon';
 
 describe('SidemenuIcon', () => {
   test('matches snapshot', () => {
-    const wrapper = mount(SidemenuIcon);
+    const wrapper = shallowMount(SidemenuIcon);
     expect(wrapper.vm).toBeTruthy();
     expect(wrapper.element).toMatchSnapshot();
   });
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index f99c18e0f..21ba47d9b 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -133,6 +133,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    conversationType: {
+      type: String,
+      default: '',
+    },
   },
 
   computed: {
@@ -243,6 +247,7 @@ export default {
         id: chat.id,
         label: this.activeLabel,
         teamId: this.teamId,
+        conversationType: this.conversationType,
       });
       router.push({ path: frontendURL(path) });
     },
diff --git a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js b/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
index ad20a82b1..639dc239a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
+++ b/app/javascript/dashboard/components/widgets/conversation/specs/MoreActions.spec.js
@@ -5,7 +5,7 @@ import VTooltip from 'v-tooltip';
 
 import Button from 'dashboard/components/buttons/Button';
 import i18n from 'dashboard/i18n';
-
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 import MoreActions from '../MoreActions';
 
 const localVue = createLocalVue();
@@ -13,6 +13,7 @@ localVue.use(Vuex);
 localVue.use(VueI18n);
 localVue.use(VTooltip);
 
+localVue.component('fluent-icon', FluentIcon);
 localVue.component('woot-button', Button);
 
 const i18nConfig = new VueI18n({
diff --git a/app/javascript/dashboard/helper/URLHelper.js b/app/javascript/dashboard/helper/URLHelper.js
index e9124e097..f50b3f6dc 100644
--- a/app/javascript/dashboard/helper/URLHelper.js
+++ b/app/javascript/dashboard/helper/URLHelper.js
@@ -11,17 +11,19 @@ export const conversationUrl = ({
   id,
   label,
   teamId,
+  conversationType = '',
 }) => {
+  let url = `accounts/${accountId}/conversations/${id}`;
   if (activeInbox) {
-    return `accounts/${accountId}/inbox/${activeInbox}/conversations/${id}`;
+    url = `accounts/${accountId}/inbox/${activeInbox}/conversations/${id}`;
+  } else if (label) {
+    url = `accounts/${accountId}/label/${label}/conversations/${id}`;
+  } else if (teamId) {
+    url = `accounts/${accountId}/team/${teamId}/conversations/${id}`;
+  } else if (conversationType === 'mention') {
+    url = `accounts/${accountId}/mentions/conversations/${id}`;
   }
-  if (label) {
-    return `accounts/${accountId}/label/${label}/conversations/${id}`;
-  }
-  if (teamId) {
-    return `accounts/${accountId}/team/${teamId}/conversations/${id}`;
-  }
-  return `accounts/${accountId}/conversations/${id}`;
+  return url;
 };
 
 export const accountIdFromPathname = pathname => {
diff --git a/app/javascript/dashboard/helper/actionCable.js b/app/javascript/dashboard/helper/actionCable.js
index 2da5fcb4a..1dd656659 100644
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/app/javascript/dashboard/helper/actionCable.js
@@ -21,6 +21,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'presence.update': this.onPresenceUpdate,
       'contact.deleted': this.onContactDelete,
       'contact.updated': this.onContactUpdate,
+      'conversation.mentioned': this.onConversationMentioned,
     };
   }
 
@@ -97,6 +98,10 @@ class ActionCableConnector extends BaseActionCableConnector {
     });
   };
 
+  onConversationMentioned = data => {
+    this.app.$store.dispatch('addMentions', data);
+  };
+
   clearTimer = conversationId => {
     const timerEvent = this.CancelTyping[conversationId];
 
diff --git a/app/javascript/dashboard/i18n/locale/en/chatlist.json b/app/javascript/dashboard/i18n/locale/en/chatlist.json
index ae9d81ba3..c1ff81c2d 100644
--- a/app/javascript/dashboard/i18n/locale/en/chatlist.json
+++ b/app/javascript/dashboard/i18n/locale/en/chatlist.json
@@ -7,6 +7,7 @@
       "404": "There are no active conversations in this group."
     },
     "TAB_HEADING": "Conversations",
+    "MENTION_HEADING": "Mentions",
     "SEARCH": {
       "INPUT": "Search for People, Chats, Saved Replies .."
     },
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index b27bd548c..4d338baa7 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -136,6 +136,7 @@
   "SIDEBAR": {
     "CONVERSATIONS": "Conversations",
     "ALL_CONVERSATIONS": "All Conversations",
+    "MENTIONED_CONVERSATIONS": "Mentions",
     "REPORTS": "Reports",
     "SETTINGS": "Settings",
     "CONTACTS": "Contacts",
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
index e81b29c1c..72aa2d44b 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
@@ -4,6 +4,7 @@
       :conversation-inbox="inboxId"
       :label="label"
       :team-id="teamId"
+      :conversation-type="conversationType"
       @conversation-load="onConversationLoad"
     >
       <pop-over-search />
@@ -49,6 +50,10 @@ export default {
       type: String,
       default: '',
     },
+    conversationType: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
index fef8d7f1b..01efb32ba 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js
@@ -13,15 +13,6 @@ export default {
         return { inboxId: 0 };
       },
     },
-    {
-      path: frontendURL('accounts/:accountId/inbox/:inbox_id'),
-      name: 'inbox_dashboard',
-      roles: ['administrator', 'agent'],
-      component: ConversationView,
-      props: route => {
-        return { inboxId: route.params.inbox_id };
-      },
-    },
     {
       path: frontendURL('accounts/:accountId/conversations/:conversation_id'),
       name: 'inbox_conversation',
@@ -31,6 +22,15 @@ export default {
         return { inboxId: 0, conversationId: route.params.conversation_id };
       },
     },
+    {
+      path: frontendURL('accounts/:accountId/inbox/:inbox_id'),
+      name: 'inbox_dashboard',
+      roles: ['administrator', 'agent'],
+      component: ConversationView,
+      props: route => {
+        return { inboxId: route.params.inbox_id };
+      },
+    },
     {
       path: frontendURL(
         'accounts/:accountId/inbox/:inbox_id/conversations/:conversation_id'
@@ -83,5 +83,24 @@ export default {
         teamId: route.params.teamId,
       }),
     },
+    {
+      path: frontendURL('accounts/:accountId/mentions/conversations'),
+      name: 'conversation_mentions',
+      roles: ['administrator', 'agent'],
+      component: ConversationView,
+      props: () => ({ conversationType: 'mention' }),
+    },
+    {
+      path: frontendURL(
+        'accounts/:accountId/mentions/conversations/:conversationId'
+      ),
+      name: 'conversation_through_mentions',
+      roles: ['administrator', 'agent'],
+      component: ConversationView,
+      props: route => ({
+        conversationId: route.params.conversationId,
+        conversationType: 'mention',
+      }),
+    },
   ],
 };
diff --git a/app/javascript/dashboard/store/modules/conversations/actions.js b/app/javascript/dashboard/store/modules/conversations/actions.js
index aba6e9ece..9b6f3b034 100644
--- a/app/javascript/dashboard/store/modules/conversations/actions.js
+++ b/app/javascript/dashboard/store/modules/conversations/actions.js
@@ -4,43 +4,11 @@ import ConversationApi from '../../../api/inbox/conversation';
 import MessageApi from '../../../api/inbox/message';
 import { MESSAGE_STATUS, MESSAGE_TYPE } from 'shared/constants/messages';
 import { createPendingMessage } from 'dashboard/helper/commons';
+import {
+  buildConversationList,
+  isOnMentionsView,
+} from './helpers/actionHelpers';
 
-const setPageFilter = ({ dispatch, filter, page, markEndReached }) => {
-  dispatch('conversationPage/setCurrentPage', { filter, page }, { root: true });
-  if (markEndReached) {
-    dispatch('conversationPage/setEndReached', { filter }, { root: true });
-  }
-};
-
-const setContacts = (commit, chatList) => {
-  commit(
-    `contacts/${types.SET_CONTACTS}`,
-    chatList.map(chat => chat.meta.sender)
-  );
-};
-
-const buildConversationList = (
-  context,
-  requestPayload,
-  responseData,
-  filterType
-) => {
-  const { payload: conversationList, meta: metaData } = responseData;
-  context.commit(types.SET_ALL_CONVERSATION, conversationList);
-  context.dispatch('conversationStats/set', metaData);
-  context.dispatch(
-    'conversationLabels/setBulkConversationLabels',
-    conversationList
-  );
-  context.commit(types.CLEAR_LIST_LOADING_STATUS);
-  setContacts(context.commit, conversationList);
-  setPageFilter({
-    dispatch: context.dispatch,
-    filter: filterType,
-    page: requestPayload.page,
-    markEndReached: !conversationList.length,
-  });
-};
 // actions
 const actions = {
   getConversation: async ({ commit }, conversationId) => {
@@ -233,21 +201,32 @@ const actions = {
     }
   },
 
-  addConversation({ commit, state, dispatch }, conversation) {
+  addConversation({ commit, state, dispatch, rootState }, conversation) {
     const { currentInbox, appliedFilters } = state;
     const {
       inbox_id: inboxId,
       meta: { sender },
     } = conversation;
+
     const hasAppliedFilters = !!appliedFilters.length;
     const isMatchingInboxFilter =
       !currentInbox || Number(currentInbox) === inboxId;
-    if (!hasAppliedFilters && isMatchingInboxFilter) {
+    if (
+      !hasAppliedFilters &&
+      !isOnMentionsView(rootState) &&
+      isMatchingInboxFilter
+    ) {
       commit(types.ADD_CONVERSATION, conversation);
       dispatch('contacts/setContact', sender);
     }
   },
 
+  addMentions({ dispatch, rootState }, conversation) {
+    if (isOnMentionsView(rootState)) {
+      dispatch('updateConversation', conversation);
+    }
+  },
+
   updateConversation({ commit, dispatch }, conversation) {
     const {
       meta: { sender },
diff --git a/app/javascript/dashboard/store/modules/conversations/helpers/actionHelpers.js b/app/javascript/dashboard/store/modules/conversations/helpers/actionHelpers.js
new file mode 100644
index 000000000..57c50c619
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/conversations/helpers/actionHelpers.js
@@ -0,0 +1,46 @@
+import types from '../../../mutation-types';
+
+export const setPageFilter = ({ dispatch, filter, page, markEndReached }) => {
+  dispatch('conversationPage/setCurrentPage', { filter, page }, { root: true });
+  if (markEndReached) {
+    dispatch('conversationPage/setEndReached', { filter }, { root: true });
+  }
+};
+
+export const setContacts = (commit, chatList) => {
+  commit(
+    `contacts/${types.SET_CONTACTS}`,
+    chatList.map(chat => chat.meta.sender)
+  );
+};
+
+export const isOnMentionsView = ({ route: { name: routeName } }) => {
+  const MENTION_ROUTES = [
+    'conversation_mentions',
+    'conversation_through_mentions',
+  ];
+  return MENTION_ROUTES.includes(routeName);
+};
+
+export const buildConversationList = (
+  context,
+  requestPayload,
+  responseData,
+  filterType
+) => {
+  const { payload: conversationList, meta: metaData } = responseData;
+  context.commit(types.SET_ALL_CONVERSATION, conversationList);
+  context.dispatch('conversationStats/set', metaData);
+  context.dispatch(
+    'conversationLabels/setBulkConversationLabels',
+    conversationList
+  );
+  context.commit(types.CLEAR_LIST_LOADING_STATUS);
+  setContacts(context.commit, conversationList);
+  setPageFilter({
+    dispatch: context.dispatch,
+    filter: filterType,
+    page: requestPayload.page,
+    markEndReached: !conversationList.length,
+  });
+};
diff --git a/app/javascript/dashboard/store/modules/conversations/helpers/specs/actionHelpers.spec.js b/app/javascript/dashboard/store/modules/conversations/helpers/specs/actionHelpers.spec.js
new file mode 100644
index 000000000..32c6ff373
--- /dev/null
+++ b/app/javascript/dashboard/store/modules/conversations/helpers/specs/actionHelpers.spec.js
@@ -0,0 +1,12 @@
+import { isOnMentionsView } from '../actionHelpers';
+
+describe('#isOnMentionsView', () => {
+  it('return valid responses when passing the state', () => {
+    expect(isOnMentionsView({ route: { name: 'conversation_mentions' } })).toBe(
+      true
+    );
+    expect(isOnMentionsView({ route: { name: 'conversation_messages' } })).toBe(
+      false
+    );
+  });
+});
diff --git a/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
index ad52d8808..680b6dbec 100644
--- a/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
@@ -59,7 +59,10 @@ describe('#actions', () => {
         messages: [],
         meta: { sender: { id: 1, name: 'john-doe' } },
       };
-      actions.updateConversation({ commit, dispatch }, conversation);
+      actions.updateConversation(
+        { commit, rootState: { route: { name: 'home' } }, dispatch },
+        conversation
+      );
       expect(commit.mock.calls).toEqual([
         [types.UPDATE_CONVERSATION, conversation],
       ]);
@@ -86,6 +89,7 @@ describe('#actions', () => {
       actions.addConversation(
         {
           commit,
+          rootState: { route: { name: 'home' } },
           dispatch,
           state: { currentInbox: 1, appliedFilters: [] },
         },
@@ -105,6 +109,27 @@ describe('#actions', () => {
       actions.addConversation(
         {
           commit,
+          rootState: { route: { name: 'home' } },
+          dispatch,
+          state: { currentInbox: 1, appliedFilters: [{ id: 'random-filter' }] },
+        },
+        conversation
+      );
+      expect(commit.mock.calls).toEqual([]);
+      expect(dispatch.mock.calls).toEqual([]);
+    });
+
+    it('doesnot send mutation if the view is conversation mentions', () => {
+      const conversation = {
+        id: 1,
+        messages: [],
+        meta: { sender: { id: 1, name: 'john-doe' } },
+        inbox_id: 1,
+      };
+      actions.addConversation(
+        {
+          commit,
+          rootState: { route: { name: 'conversation_mentions' } },
           dispatch,
           state: { currentInbox: 1, appliedFilters: [{ id: 'random-filter' }] },
         },
@@ -124,6 +149,7 @@ describe('#actions', () => {
       actions.addConversation(
         {
           commit,
+          rootState: { route: { name: 'home' } },
           dispatch,
           state: { currentInbox: 1, appliedFilters: [] },
         },
@@ -151,7 +177,12 @@ describe('#actions', () => {
         inbox_id: 1,
       };
       actions.addConversation(
-        { commit, dispatch, state: { appliedFilters: [] } },
+        {
+          commit,
+          rootState: { route: { name: 'home' } },
+          dispatch,
+          state: { appliedFilters: [] },
+        },
         conversation
       );
       expect(commit.mock.calls).toEqual([
@@ -379,3 +410,27 @@ describe('#deleteMessage', () => {
     });
   });
 });
+
+describe('#addMentions', () => {
+  it('does not send mutations if the view is not mentions', () => {
+    actions.addMentions(
+      { commit, dispatch, rootState: { route: { name: 'home' } } },
+      { id: 1 }
+    );
+    expect(commit.mock.calls).toEqual([]);
+    expect(dispatch.mock.calls).toEqual([]);
+  });
+
+  it('send mutations if the view is mentions', () => {
+    actions.addMentions(
+      {
+        dispatch,
+        rootState: { route: { name: 'conversation_mentions' } },
+      },
+      { id: 1, meta: { sender: { id: 1 } } }
+    );
+    expect(dispatch.mock.calls).toEqual([
+      ['updateConversation', { id: 1, meta: { sender: { id: 1 } } }],
+    ]);
+  });
+});
diff --git a/app/javascript/shared/components/FluentIcon/dashboard-icons.json b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
index 35a663080..f8746294f 100644
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@@ -20,6 +20,7 @@
   "chat-multiple-outline": "M9.562 3a7.5 7.5 0 0 0-6.798 10.673l-.724 2.842a1.25 1.25 0 0 0 1.504 1.524c.75-.18 1.903-.457 2.93-.702A7.5 7.5 0 1 0 9.561 3Zm-6 7.5a6 6 0 1 1 3.33 5.375l-.244-.121-.264.063c-.923.22-1.99.475-2.788.667l.69-2.708.07-.276-.13-.253a5.971 5.971 0 0 1-.664-2.747Zm11 10.5c-1.97 0-3.762-.759-5.1-2h.1c.718 0 1.415-.089 2.08-.257.865.482 1.86.757 2.92.757.96 0 1.866-.225 2.67-.625l.243-.121.264.063c.922.22 1.966.445 2.74.61-.175-.751-.414-1.756-.642-2.651l-.07-.276.13-.253a5.971 5.971 0 0 0 .665-2.747 5.995 5.995 0 0 0-2.747-5.042 8.44 8.44 0 0 0-.8-2.047 7.503 7.503 0 0 1 4.344 10.263c.253 1.008.509 2.1.671 2.803a1.244 1.244 0 0 1-1.467 1.5 132.62 132.62 0 0 1-2.913-.64 7.476 7.476 0 0 1-3.088.663Z",
   "chat-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.587-1.112l-3.826 1.067a1.25 1.25 0 0 1-1.54-1.54l1.068-3.823A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2Zm0 1.5A8.5 8.5 0 0 0 3.5 12c0 1.47.373 2.883 1.073 4.137l.15.27-1.112 3.984 3.987-1.112.27.15A8.5 8.5 0 1 0 12 3.5ZM8.75 13h4.498a.75.75 0 0 1 .102 1.493l-.102.007H8.75a.75.75 0 0 1-.102-1.493L8.75 13h4.498H8.75Zm0-3.5h6.505a.75.75 0 0 1 .101 1.493l-.101.007H8.75a.75.75 0 0 1-.102-1.493L8.75 9.5h6.505H8.75Z",
   "checkmark-circle-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-1.25 9.94 4.47-4.47a.75.75 0 0 1 1.133.976l-.073.084-5 5a.75.75 0 0 1-.976.073l-.084-.073-2.5-2.5a.75.75 0 0 1 .976-1.133l.084.073 1.97 1.97 4.47-4.47-4.47 4.47Z",
+  "checkmark-circle-solid": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z",
   "checkmark-outline": "M4.53 12.97a.75.75 0 0 0-1.06 1.06l4.5 4.5a.75.75 0 0 0 1.06 0l11-11a.75.75 0 0 0-1.06-1.06L8.5 16.94l-3.97-3.97Z",
   "chevron-down-outline": "M4.22 8.47a.75.75 0 0 1 1.06 0L12 15.19l6.72-6.72a.75.75 0 1 1 1.06 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L4.22 9.53a.75.75 0 0 1 0-1.06Z",
   "chevron-left-outline": "M15.53 4.22a.75.75 0 0 1 0 1.06L8.81 12l6.72 6.72a.75.75 0 1 1-1.06 1.06l-7.25-7.25a.75.75 0 0 1 0-1.06l7.25-7.25a.75.75 0 0 1 1.06 0Z",
@@ -53,6 +54,7 @@
   "mail-outline": "M5.25 4h13.5a3.25 3.25 0 0 1 3.245 3.066L22 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5-13.5ZM20.5 9.373l-8.15 4.29a.75.75 0 0 1-.603.043l-.096-.042L3.5 9.374v7.376a1.75 1.75 0 0 0 1.606 1.744l.144.006h13.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.373ZM18.75 5.5H5.25a1.75 1.75 0 0 0-1.744 1.606L3.5 7.25v.429l8.5 4.473 8.5-4.474V7.25a1.75 1.75 0 0 0-1.607-1.744L18.75 5.5Z",
   "map-outline": "m9.203 4 .047-.002.046.001a.73.73 0 0 1 .067.007l.016.004c.086.014.17.044.252.092l.051.034 5.07 3.565L19.82 4.14a.75.75 0 0 1 1.174.51l.007.104v10.632a.75.75 0 0 1-.238.548l-.08.066-5.5 3.866a.744.744 0 0 1-.828.023L9.25 16.297l-5.07 3.565a.75.75 0 0 1-1.174-.51l-.007-.104V8.616a.75.75 0 0 1 .238-.548l.08-.066 5.5-3.866a.762.762 0 0 1 .2-.101l.122-.028.064-.008Zm10.298 2.197-4 2.812v8.799l4-2.812v-8.8ZM8.5 6.193l-4 2.812v8.8l4-2.813V6.193Zm1.502 0v8.8l4 2.811V9.005l-4-2.812Z",
   "megaphone-outline": "M21.907 5.622c.062.208.093.424.093.641V17.74a2.25 2.25 0 0 1-2.891 2.156l-5.514-1.64a4.002 4.002 0 0 1-7.59-1.556L6 16.5l-.001-.5-2.39-.711A2.25 2.25 0 0 1 2 13.131V10.87a2.25 2.25 0 0 1 1.61-2.156l15.5-4.606a2.25 2.25 0 0 1 2.797 1.515ZM7.499 16.445l.001.054a2.5 2.5 0 0 0 4.624 1.321l-4.625-1.375Zm12.037-10.9-15.5 4.605a.75.75 0 0 0-.536.72v2.261a.75.75 0 0 0 .536.72l15.5 4.607a.75.75 0 0 0 .964-.72V6.264a.75.75 0 0 0-.964-.719Z",
+  "mention-outline": "M22 12v1.75a3.75 3.75 0 0 1-7.149 1.586C14.033 16.356 12.84 17 11.5 17 8.992 17 7 14.742 7 12s1.992-5 4.5-5c1.159 0 2.208.482 3.001 1.272L14.5 7.75a.75.75 0 0 1 1.493-.102L16 7.75v6a2.25 2.25 0 0 0 4.495.154l.005-.154V12a8.5 8.5 0 1 0-5.515 7.961.75.75 0 0 1 .527 1.405A9.98 9.98 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2c5.43 0 9.848 4.327 9.996 9.72L22 12v1.75V12ZM11.5 8.5c-1.635 0-3 1.548-3 3.5s1.365 3.5 3 3.5c1.634 0 3-1.548 3-3.5s-1.366-3.5-3-3.5Z",
   "merge-outline": "M3 6.75A.75.75 0 0 1 3.75 6h4.5a.75.75 0 0 1 .53.22L13.56 11h5.878L15.72 7.28a.75.75 0 1 1 1.06-1.06l4.998 5a.75.75 0 0 1 0 1.06l-4.998 5a.75.75 0 1 1-1.06-1.06l3.718-3.72H13.56l-4.78 4.78a.75.75 0 0 1-.531.22h-4.5a.75.75 0 0 1 0-1.5h4.19l4.25-4.25L7.94 7.5H3.75A.75.75 0 0 1 3 6.75Z",
   "more-horizontal-outline": "M7.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM13.75 12a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0ZM18 13.75a1.75 1.75 0 1 0 0-3.5 1.75 1.75 0 0 0 0 3.5Z",
   "more-vertical-outline": "M12 7.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5ZM12 13.75a1.75 1.75 0 1 1 0-3.5 1.75 1.75 0 0 1 0 3.5ZM10.25 18a1.75 1.75 0 1 0 3.5 0 1.75 1.75 0 0 0-3.5 0Z",
@@ -60,6 +62,7 @@
   "open-outline": "M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z",
   "people-outline": "M4 13.999 13 14a2 2 0 0 1 1.995 1.85L15 16v1.5C14.999 21 11.284 22 8.5 22c-2.722 0-6.335-.956-6.495-4.27L2 17.5v-1.501c0-1.054.816-1.918 1.85-1.995L4 14ZM15.22 14H20c1.054 0 1.918.816 1.994 1.85L22 16v1c-.001 3.062-2.858 4-5 4a7.16 7.16 0 0 1-2.14-.322c.336-.386.607-.827.802-1.327A6.19 6.19 0 0 0 17 19.5l.267-.006c.985-.043 3.086-.363 3.226-2.289L20.5 17v-1a.501.501 0 0 0-.41-.492L20 15.5h-4.051a2.957 2.957 0 0 0-.595-1.34L15.22 14H20h-4.78ZM4 15.499l-.1.01a.51.51 0 0 0-.254.136.506.506 0 0 0-.136.253l-.01.101V17.5c0 1.009.45 1.722 1.417 2.242.826.445 2.003.714 3.266.753l.317.005.317-.005c1.263-.039 2.439-.308 3.266-.753.906-.488 1.359-1.145 1.412-2.057l.005-.186V16a.501.501 0 0 0-.41-.492L13 15.5l-9-.001ZM8.5 3a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm9 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7Zm-9-.5c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3Zm9 2c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2Z",
   "people-team-outline": "M14.754 10c.966 0 1.75.784 1.75 1.75v4.749a4.501 4.501 0 0 1-9.002 0V11.75c0-.966.783-1.75 1.75-1.75h5.502Zm0 1.5H9.252a.25.25 0 0 0-.25.25v4.749a3.001 3.001 0 0 0 6.002 0V11.75a.25.25 0 0 0-.25-.25ZM3.75 10h3.381a2.738 2.738 0 0 0-.618 1.5H3.75a.25.25 0 0 0-.25.25v3.249a2.501 2.501 0 0 0 3.082 2.433c.085.504.24.985.453 1.432A4.001 4.001 0 0 1 2 14.999V11.75c0-.966.784-1.75 1.75-1.75Zm13.125 0h3.375c.966 0 1.75.784 1.75 1.75V15a4 4 0 0 1-5.03 3.866c.214-.448.369-.929.455-1.433A2.5 2.5 0 0 0 20.5 15v-3.25a.25.25 0 0 0-.25-.25h-2.757a2.738 2.738 0 0 0-.618-1.5ZM12 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm6.5 1a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm-13 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm6.5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6.5 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-13 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z",
+  "person-add-outline": "M17.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zm-5.477 2a6.47 6.47 0 0 0-.709 1.5H4.253a.749.749 0 0 0-.75.75v.577c0 .535.192 1.053.54 1.46c1.253 1.469 3.22 2.214 5.957 2.214c.597 0 1.157-.035 1.68-.106c.246.495.553.954.912 1.367c-.795.16-1.66.24-2.592.24c-3.146 0-5.532-.906-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.578A2.249 2.249 0 0 1 4.253 14h7.77zm5.477 0l-.09.008a.5.5 0 0 0-.402.402L17 14.5V17h-2.496l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008H17L17 20.5l.008.09a.5.5 0 0 0 .402.402l.09.008l.09-.008a.5.5 0 0 0 .402-.402L18 20.5V18h2.504l.09-.008a.5.5 0 0 0 .402-.402l.008-.09l-.008-.09a.5.5 0 0 0-.402-.402l-.09-.008H18L18 14.5l-.008-.09a.5.5 0 0 0-.402-.402L17.5 14zM10 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10zm0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7z",
   "person-outline": "M17.754 14a2.249 2.249 0 0 1 2.25 2.249v.575c0 .894-.32 1.76-.902 2.438-1.57 1.834-3.957 2.739-7.102 2.739-3.146 0-5.532-.905-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.577a2.249 2.249 0 0 1 2.249-2.25h11.501Zm0 1.5H6.253a.749.749 0 0 0-.75.749v.577c0 .536.192 1.054.54 1.461 1.253 1.468 3.219 2.214 5.957 2.214s4.706-.746 5.962-2.214a2.25 2.25 0 0 0 .541-1.463v-.575a.749.749 0 0 0-.749-.75ZM12 2.004a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 1.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Z",
   "power-outline": "M8.204 4.82a.75.75 0 0 1 .634 1.36A7.51 7.51 0 0 0 4.5 12.991c0 4.148 3.358 7.51 7.499 7.51s7.499-3.362 7.499-7.51a7.51 7.51 0 0 0-4.323-6.804.75.75 0 1 1 .637-1.358 9.01 9.01 0 0 1 5.186 8.162c0 4.976-4.029 9.01-9 9.01C7.029 22 3 17.966 3 12.99a9.01 9.01 0 0 1 5.204-8.17ZM12 2.496a.75.75 0 0 1 .743.648l.007.102v7.5a.75.75 0 0 1-1.493.102l-.007-.102v-7.5a.75.75 0 0 1 .75-.75Z",
   "quote-outline": "M7.5 6a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.555-1.24 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.64-1.737 2.66-3.674 3.077-5.859A2.5 2.5 0 1 1 7.5 6Zm9 0a2.5 2.5 0 0 1 2.495 2.336l.005.206c-.01 3.56-1.238 6.614-3.705 9.223a.75.75 0 1 1-1.09-1.03c1.643-1.738 2.662-3.672 3.078-5.859A2.5 2.5 0 1 1 16.5 6Zm-9 1.5a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Zm9 0a1 1 0 1 0 .993 1.117l.007-.124a1 1 0 0 0-1-.993Z",
@@ -72,22 +75,21 @@
   "speaker-1-outline": "M14.704 3.442c.191.226.296.512.296.808v15.502a1.25 1.25 0 0 1-2.058.954L7.975 16.5H4.25A2.25 2.25 0 0 1 2 14.25v-4.5A2.25 2.25 0 0 1 4.25 7.5h3.725l4.968-4.204a1.25 1.25 0 0 1 1.761.147ZM13.5 4.79 8.525 9H4.25a.75.75 0 0 0-.75.75v4.5c0 .415.336.75.75.75h4.275l4.975 4.213V4.79Zm3.604 3.851a.75.75 0 0 1 1.03.25c.574.94.862 1.992.862 3.14 0 1.149-.288 2.201-.862 3.141a.75.75 0 1 1-1.28-.781c.428-.702.642-1.483.642-2.36 0-.876-.214-1.657-.642-2.359a.75.75 0 0 1 .25-1.03Z",
   "speaker-mute-outline": "M12.92 3.316c.806-.717 2.08-.145 2.08.934v15.496c0 1.078-1.274 1.65-2.08.934l-4.492-3.994a.75.75 0 0 0-.498-.19H4.25A2.25 2.25 0 0 1 2 14.247V9.75a2.25 2.25 0 0 1 2.25-2.25h3.68a.75.75 0 0 0 .498-.19l4.491-3.993Zm.58 1.49L9.425 8.43A2.25 2.25 0 0 1 7.93 9H4.25a.75.75 0 0 0-.75.75v4.497c0 .415.336.75.75.75h3.68a2.25 2.25 0 0 1 1.495.57l4.075 3.623V4.807ZM16.22 9.22a.75.75 0 0 1 1.06 0L19 10.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L20.06 12l1.72 1.72a.75.75 0 1 1-1.06 1.06L19 13.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L17.94 12l-1.72-1.72a.75.75 0 0 1 0-1.06Z",
   "star-emphasis-outline": "M13.209 3.103c-.495-1.004-1.926-1.004-2.421 0L8.43 7.88l-5.273.766c-1.107.161-1.55 1.522-.748 2.303l3.815 3.72-.9 5.25c-.19 1.103.968 1.944 1.959 1.424l4.715-2.48 4.716 2.48c.99.52 2.148-.32 1.96-1.424l-.902-5.25 3.816-3.72c.8-.78.359-2.142-.748-2.303l-5.273-.766-2.358-4.777ZM9.74 8.615l2.258-4.576 2.259 4.576a1.35 1.35 0 0 0 1.016.738l5.05.734-3.654 3.562a1.35 1.35 0 0 0-.388 1.195l.862 5.03-4.516-2.375a1.35 1.35 0 0 0-1.257 0l-4.516 2.374.862-5.029a1.35 1.35 0 0 0-.388-1.195l-3.654-3.562 5.05-.734c.44-.063.82-.34 1.016-.738ZM1.164 3.782a.75.75 0 0 0 .118 1.054l2.5 2a.75.75 0 1 0 .937-1.172l-2.5-2a.75.75 0 0 0-1.055.118Z M22.836 18.218a.75.75 0 0 0-.117-1.054l-2.5-2a.75.75 0 0 0-.938 1.172l2.5 2a.75.75 0 0 0 1.055-.117ZM1.282 17.164a.75.75 0 1 0 .937 1.172l2.5-2a.75.75 0 0 0-.937-1.172l-2.5 2ZM22.836 3.782a.75.75 0 0 1-.117 1.054l-2.5 2a.75.75 0 0 1-.938-1.172l2.5-2a.75.75 0 0 1 1.055.118Z",
+  "subtract-outline": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
   "tag-outline": "M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.003-4.596l8.5-8.51A3.25 3.25 0 0 1 14.284 2h5.465Zm0 1.5h-5.465c-.465 0-.91.185-1.239.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75ZM17 5.502a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z",
+  "upload-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-6-1.793V19.5a.5.5 0 0 0 1 0v-4.793l1.646 1.647a.5.5 0 0 0 .708-.708l-2.5-2.5a.5.5 0 0 0-.708 0l-2.5 2.5a.5.5 0 0 0 .708.708L16 14.707Z",
   "video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
   "warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",
   "wifi-off-outline": "m12.858 14.273 7.434 7.434a1 1 0 0 0 1.414-1.414l-17.999-18a1 1 0 1 0-1.414 1.414L5.39 6.804c-.643.429-1.254.927-1.821 1.495a12.382 12.382 0 0 0-1.39 1.683 1 1 0 0 0 1.644 1.14c.363-.524.761-1.01 1.16-1.41a9.94 9.94 0 0 1 1.855-1.46L7.99 9.405a8.14 8.14 0 0 0-3.203 3.377 1 1 0 0 0 1.784.903 6.08 6.08 0 0 1 1.133-1.563 6.116 6.116 0 0 1 1.77-1.234l1.407 1.407A5.208 5.208 0 0 0 8.336 13.7a5.25 5.25 0 0 0-1.09 1.612 1 1 0 0 0 1.832.802c.167-.381.394-.722.672-1a3.23 3.23 0 0 1 3.108-.841Zm-1.332-5.93 2.228 2.229a6.1 6.1 0 0 1 2.616 1.55c.444.444.837.995 1.137 1.582a1 1 0 1 0 1.78-.911 8.353 8.353 0 0 0-1.503-2.085 8.108 8.108 0 0 0-6.258-2.365ZM8.51 5.327l1.651 1.651a9.904 9.904 0 0 1 10.016 4.148 1 1 0 1 0 1.646-1.136A11.912 11.912 0 0 0 8.51 5.327Zm4.552 11.114a1.501 1.501 0 1 1-2.123 2.123 1.501 1.501 0 0 1 2.123-2.123Z",
 
-  "brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
-  "brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
   "brand-facebook-outline": "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z",
   "brand-line-outline": "M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314",
+  "brand-linkedin-outline": "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
   "brand-sms-outline": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.644-1.142l-4.29 1.117a.85.85 0 0 1-1.037-1.036l1.116-4.289A9.959 9.959 0 0 1 2 12C2 6.477 6.477 2 12 2Zm1.252 11H8.75l-.102.007a.75.75 0 0 0 0 1.486l.102.007h4.502l.101-.007a.75.75 0 0 0 0-1.486L13.252 13Zm1.998-3.5h-6.5l-.102.007a.75.75 0 0 0 0 1.486L8.75 11h6.5l.102-.007a.75.75 0 0 0 0-1.486L15.25 9.5Z",
   "brand-telegram-outline": "M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z",
-  "brand-linkedin-outline": "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z",
+  "brand-twitter-outline": "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z",
+  "brand-whatsapp-outline": "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z",
+
   "add-solid": "M11.883 3.007 12 3a1 1 0 0 1 .993.883L13 4v7h7a1 1 0 0 1 .993.883L21 12a1 1 0 0 1-.883.993L20 13h-7v7a1 1 0 0 1-.883.993L12 21a1 1 0 0 1-.993-.883L11 20v-7H4a1 1 0 0 1-.993-.883L3 12a1 1 0 0 1 .883-.993L4 11h7V4a1 1 0 0 1 .883-.993L12 3l-.117.007Z",
-  "subtract-solid": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
-  "subtract-outline": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
-  "checkmark-circle-solid": "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z",
-  "person-add-outline": "M17.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zm-5.477 2a6.47 6.47 0 0 0-.709 1.5H4.253a.749.749 0 0 0-.75.75v.577c0 .535.192 1.053.54 1.46c1.253 1.469 3.22 2.214 5.957 2.214c.597 0 1.157-.035 1.68-.106c.246.495.553.954.912 1.367c-.795.16-1.66.24-2.592.24c-3.146 0-5.532-.906-7.098-2.74a3.75 3.75 0 0 1-.898-2.435v-.578A2.249 2.249 0 0 1 4.253 14h7.77zm5.477 0l-.09.008a.5.5 0 0 0-.402.402L17 14.5V17h-2.496l-.09.008a.5.5 0 0 0-.402.402l-.008.09l.008.09a.5.5 0 0 0 .402.402l.09.008H17L17 20.5l.008.09a.5.5 0 0 0 .402.402l.09.008l.09-.008a.5.5 0 0 0 .402-.402L18 20.5V18h2.504l.09-.008a.5.5 0 0 0 .402-.402l.008-.09l-.008-.09a.5.5 0 0 0-.402-.402l-.09-.008H18L18 14.5l-.008-.09a.5.5 0 0 0-.402-.402L17.5 14zM10 2.005a5 5 0 1 1 0 10a5 5 0 0 1 0-10zm0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7z",
-  "upload-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-6-1.793V19.5a.5.5 0 0 0 1 0v-4.793l1.646 1.647a.5.5 0 0 0 .708-.708l-2.5-2.5a.5.5 0 0 0-.708 0l-2.5 2.5a.5.5 0 0 0 .708.708L16 14.707Z"
+  "subtract-solid": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z"
 }
diff --git a/app/jobs/conversations/user_mention_job.rb b/app/jobs/conversations/user_mention_job.rb
new file mode 100644
index 000000000..1eed044a5
--- /dev/null
+++ b/app/jobs/conversations/user_mention_job.rb
@@ -0,0 +1,24 @@
+class Conversations::UserMentionJob < ApplicationJob
+  queue_as :default
+
+  def perform(mentioned_user_ids, conversation_id, account_id)
+    mentioned_user_ids.each do |mentioned_user_id|
+      mention = Mention.find_by(
+        user_id: mentioned_user_id,
+        conversation_id: conversation_id,
+        account_id: account_id
+      )
+
+      if mention.nil?
+        Mention.create(
+          user_id: mentioned_user_id,
+          conversation_id: conversation_id,
+          mentioned_at: Time.zone.now,
+          account_id: account_id
+        )
+      else
+        mention.update(mentioned_at: Time.zone.now)
+      end
+    end
+  end
+end
diff --git a/app/listeners/action_cable_listener.rb b/app/listeners/action_cable_listener.rb
index 4edf62f50..5f2b1702e 100644
--- a/app/listeners/action_cable_listener.rb
+++ b/app/listeners/action_cable_listener.rb
@@ -120,6 +120,13 @@ class ActionCableListener < BaseListener
     broadcast(account, tokens, CONTACT_DELETED, contact.push_event_data)
   end
 
+  def conversation_mentioned(event)
+    conversation, account = extract_conversation_and_account(event)
+    user = event.data[:user]
+
+    broadcast(account, [user.pubsub_token], CONVERSATION_MENTIONED, conversation.push_event_data)
+  end
+
   private
 
   def typing_event_listener_tokens(account, conversation, user)
diff --git a/app/listeners/notification_listener.rb b/app/listeners/notification_listener.rb
index cf2490606..7fc0505a9 100644
--- a/app/listeners/notification_listener.rb
+++ b/app/listeners/notification_listener.rb
@@ -62,7 +62,10 @@ class NotificationListener < BaseListener
 
     return if mentioned_ids.blank?
 
-    get_valid_mentioned_ids(mentioned_ids, message.inbox).each do |user_id|
+    valid_mentioned_ids = get_valid_mentioned_ids(mentioned_ids, message.inbox)
+    Conversations::UserMentionJob.perform_later(valid_mentioned_ids, message.conversation.id, account.id)
+
+    valid_mentioned_ids.each do |user_id|
       NotificationBuilder.new(
         notification_type: 'conversation_mention',
         user: User.find(user_id),
diff --git a/app/models/account.rb b/app/models/account.rb
index d16194e40..e23723611 100644
--- a/app/models/account.rb
+++ b/app/models/account.rb
@@ -35,37 +35,38 @@ class Account < ApplicationRecord
   has_many :account_users, dependent: :destroy_async
   has_many :agent_bot_inboxes, dependent: :destroy_async
   has_many :agent_bots, dependent: :destroy_async
-  has_many :csat_survey_responses, dependent: :destroy_async
-  has_many :data_imports, dependent: :destroy_async
-  has_many :users, through: :account_users
-  has_many :inboxes, dependent: :destroy_async
-  has_many :notes, dependent: :destroy_async
+  has_many :api_channels, dependent: :destroy_async, class_name: '::Channel::Api'
   has_many :campaigns, dependent: :destroy_async
-  has_many :conversations, dependent: :destroy_async
-  has_many :messages, dependent: :destroy_async
+  has_many :canned_responses, dependent: :destroy_async
   has_many :contacts, dependent: :destroy_async
+  has_many :conversations, dependent: :destroy_async
+  has_many :csat_survey_responses, dependent: :destroy_async
+  has_many :custom_attribute_definitions, dependent: :destroy_async
+  has_many :custom_filters, dependent: :destroy_async
+  has_many :data_imports, dependent: :destroy_async
+  has_many :email_channels, dependent: :destroy_async, class_name: '::Channel::Email'
   has_many :facebook_pages, dependent: :destroy_async, class_name: '::Channel::FacebookPage'
+  has_many :hooks, dependent: :destroy_async, class_name: 'Integrations::Hook'
+  has_many :inboxes, dependent: :destroy_async
+  has_many :kbase_articles, dependent: :destroy_async, class_name: '::Kbase::Article'
+  has_many :kbase_categories, dependent: :destroy_async, class_name: '::Kbase::Category'
+  has_many :kbase_portals, dependent: :destroy_async, class_name: '::Kbase::Portal'
+  has_many :labels, dependent: :destroy_async
+  has_many :line_channels, dependent: :destroy_async, class_name: '::Channel::Line'
+  has_many :mentions, dependent: :destroy_async
+  has_many :messages, dependent: :destroy_async
+  has_many :notes, dependent: :destroy_async
+  has_many :notification_settings, dependent: :destroy_async
+  has_many :teams, dependent: :destroy_async
   has_many :telegram_bots, dependent: :destroy_async
+  has_many :telegram_channels, dependent: :destroy_async, class_name: '::Channel::Telegram'
   has_many :twilio_sms, dependent: :destroy_async, class_name: '::Channel::TwilioSms'
   has_many :twitter_profiles, dependent: :destroy_async, class_name: '::Channel::TwitterProfile'
+  has_many :users, through: :account_users
   has_many :web_widgets, dependent: :destroy_async, class_name: '::Channel::WebWidget'
-  has_many :email_channels, dependent: :destroy_async, class_name: '::Channel::Email'
-  has_many :api_channels, dependent: :destroy_async, class_name: '::Channel::Api'
-  has_many :line_channels, dependent: :destroy_async, class_name: '::Channel::Line'
-  has_many :telegram_channels, dependent: :destroy_async, class_name: '::Channel::Telegram'
-  has_many :whatsapp_channels, dependent: :destroy_async, class_name: '::Channel::Whatsapp'
-  has_many :canned_responses, dependent: :destroy_async
   has_many :webhooks, dependent: :destroy_async
-  has_many :labels, dependent: :destroy_async
-  has_many :notification_settings, dependent: :destroy_async
-  has_many :hooks, dependent: :destroy_async, class_name: 'Integrations::Hook'
+  has_many :whatsapp_channels, dependent: :destroy_async, class_name: '::Channel::Whatsapp'
   has_many :working_hours, dependent: :destroy_async
-  has_many :kbase_portals, dependent: :destroy_async, class_name: '::Kbase::Portal'
-  has_many :kbase_categories, dependent: :destroy_async, class_name: '::Kbase::Category'
-  has_many :kbase_articles, dependent: :destroy_async, class_name: '::Kbase::Article'
-  has_many :teams, dependent: :destroy_async
-  has_many :custom_filters, dependent: :destroy_async
-  has_many :custom_attribute_definitions, dependent: :destroy_async
 
   has_flags ACCOUNT_SETTINGS_FLAGS.merge(column: 'settings_flags').merge(DEFAULT_QUERY_SETTING)
 
diff --git a/app/models/conversation.rb b/app/models/conversation.rb
index 1e5945431..457ebe145 100644
--- a/app/models/conversation.rb
+++ b/app/models/conversation.rb
@@ -71,6 +71,7 @@ class Conversation < ApplicationRecord
   belongs_to :team, optional: true
   belongs_to :campaign, optional: true
 
+  has_many :mentions, dependent: :destroy_async
   has_many :messages, dependent: :destroy_async, autosave: true
   has_one :csat_survey_response, dependent: :destroy_async
   has_many :notifications, as: :primary_actor, dependent: :destroy
diff --git a/app/models/mention.rb b/app/models/mention.rb
new file mode 100644
index 000000000..14eaed504
--- /dev/null
+++ b/app/models/mention.rb
@@ -0,0 +1,50 @@
+# == Schema Information
+#
+# Table name: mentions
+#
+#  id              :bigint           not null, primary key
+#  mentioned_at    :datetime         not null
+#  created_at      :datetime         not null
+#  updated_at      :datetime         not null
+#  account_id      :bigint           not null
+#  conversation_id :bigint           not null
+#  user_id         :bigint           not null
+#
+# Indexes
+#
+#  index_mentions_on_account_id                   (account_id)
+#  index_mentions_on_conversation_id              (conversation_id)
+#  index_mentions_on_user_id                      (user_id)
+#  index_mentions_on_user_id_and_conversation_id  (user_id,conversation_id) UNIQUE
+#
+# Foreign Keys
+#
+#  fk_rails_...  (conversation_id => conversations.id)
+#  fk_rails_...  (user_id => users.id)
+#
+class Mention < ApplicationRecord
+  before_validation :ensure_account_id
+  validates :mentioned_at, presence: true
+  validates :account_id, presence: true
+  validates :conversation_id, presence: true
+  validates :user_id, presence: true
+  validates :user, uniqueness: { scope: :conversation }
+
+  belongs_to :account
+  belongs_to :conversation
+  belongs_to :user
+
+  after_commit :notify_mentioned_user
+
+  scope :latest, -> { order(mentioned_at: :desc) }
+
+  private
+
+  def ensure_account_id
+    self.account_id = conversation&.account_id
+  end
+
+  def notify_mentioned_user
+    Rails.configuration.dispatcher.dispatch(CONVERSATION_MENTIONED, Time.zone.now, user: user, conversation: conversation)
+  end
+end
diff --git a/app/models/user.rb b/app/models/user.rb
index c73aad20c..81a4f6cd0 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -80,13 +80,14 @@ class User < ApplicationRecord
   has_many :messages, as: :sender
   has_many :invitees, through: :account_users, class_name: 'User', foreign_key: 'inviter_id', source: :inviter, dependent: :nullify
 
-  has_many :notifications, dependent: :destroy_async
+  has_many :custom_filters, dependent: :destroy_async
+  has_many :mentions, dependent: :destroy_async
+  has_many :notes, dependent: :nullify
   has_many :notification_settings, dependent: :destroy_async
   has_many :notification_subscriptions, dependent: :destroy_async
+  has_many :notifications, dependent: :destroy_async
   has_many :team_members, dependent: :destroy_async
   has_many :teams, through: :team_members
-  has_many :notes, dependent: :nullify
-  has_many :custom_filters, dependent: :destroy_async
 
   before_validation :set_password_and_uid, on: :create
 
diff --git a/db/migrate/20211201224513_create_mentions.rb b/db/migrate/20211201224513_create_mentions.rb
new file mode 100644
index 000000000..736be1ccf
--- /dev/null
+++ b/db/migrate/20211201224513_create_mentions.rb
@@ -0,0 +1,13 @@
+class CreateMentions < ActiveRecord::Migration[6.1]
+  def change
+    create_table :mentions do |t|
+      t.references :user, null: false, foreign_key: true
+      t.references :conversation, null: false, foreign_key: true
+      t.references :account, index: true, null: false
+      t.datetime :mentioned_at, null: false
+      t.timestamps
+    end
+
+    add_index :mentions, [:user_id, :conversation_id], unique: true
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 06ff9e42c..10756d5c0 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -531,6 +531,19 @@ ActiveRecord::Schema.define(version: 2021_12_08_085931) do
     t.index ["title", "account_id"], name: "index_labels_on_title_and_account_id", unique: true
   end
 
+  create_table "mentions", force: :cascade do |t|
+    t.bigint "user_id", null: false
+    t.bigint "conversation_id", null: false
+    t.bigint "account_id", null: false
+    t.datetime "mentioned_at", null: false
+    t.datetime "created_at", precision: 6, null: false
+    t.datetime "updated_at", precision: 6, null: false
+    t.index ["account_id"], name: "index_mentions_on_account_id"
+    t.index ["conversation_id"], name: "index_mentions_on_conversation_id"
+    t.index ["user_id", "conversation_id"], name: "index_mentions_on_user_id_and_conversation_id", unique: true
+    t.index ["user_id"], name: "index_mentions_on_user_id"
+  end
+
   create_table "messages", id: :serial, force: :cascade do |t|
     t.text "content"
     t.integer "account_id", null: false
@@ -764,6 +777,8 @@ ActiveRecord::Schema.define(version: 2021_12_08_085931) do
   add_foreign_key "csat_survey_responses", "messages"
   add_foreign_key "csat_survey_responses", "users", column: "assigned_agent_id"
   add_foreign_key "data_imports", "accounts"
+  add_foreign_key "mentions", "conversations"
+  add_foreign_key "mentions", "users"
   add_foreign_key "notes", "accounts"
   add_foreign_key "notes", "contacts"
   add_foreign_key "notes", "users"
diff --git a/lib/events/types.rb b/lib/events/types.rb
index 9c0f04fce..d6837d10f 100644
--- a/lib/events/types.rb
+++ b/lib/events/types.rb
@@ -25,6 +25,7 @@ module Events::Types
   TEAM_CHANGED = 'team.changed'
   CONVERSATION_TYPING_ON = 'conversation.typing_on'
   CONVERSATION_TYPING_OFF = 'conversation.typing_off'
+  CONVERSATION_MENTIONED = 'conversation.mentioned'
 
   # message events
   MESSAGE_CREATED = 'message.created'

From 2f63ebb8a60d2e313ff5b2b80219dd751522b157 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Wed, 8 Dec 2021 22:20:28 -0800
Subject: [PATCH 67/69] fix: Add fixes for sentry errors (#3522)

- Add fixes for sentry errors
---
 .../api/v1/widget/contacts_controller.rb      |  15 +-
 app/drops/conversation_drop.rb                |   2 +-
 app/drops/message_drop.rb                     |   4 +-
 app/helpers/message_format_helper.rb          |   7 +
 .../widgets/conversation/MoreActions.vue      |   1 -
 app/javascript/sdk/IFrameHelper.js            |   4 +
 .../v1/widget/contacts/update.json.jbuilder   |   3 +
 app/views/layouts/mailer/base.liquid          | 178 ++++++++----------
 .../conversation_mention.liquid               |   8 +-
 .../api/v1/widget/contacts_controller_spec.rb |   4 +-
 spec/helpers/message_format_helper_spec.rb    |   8 +
 11 files changed, 124 insertions(+), 110 deletions(-)
 create mode 100644 app/views/api/v1/widget/contacts/update.json.jbuilder

diff --git a/app/controllers/api/v1/widget/contacts_controller.rb b/app/controllers/api/v1/widget/contacts_controller.rb
index eafc220a3..d745c4153 100644
--- a/app/controllers/api/v1/widget/contacts_controller.rb
+++ b/app/controllers/api/v1/widget/contacts_controller.rb
@@ -1,5 +1,5 @@
 class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
-  before_action :process_hmac
+  before_action :process_hmac, only: [:update]
 
   def show; end
 
@@ -8,7 +8,7 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
       contact: @contact,
       params: permitted_params.to_h.deep_symbolize_keys
     )
-    render json: contact_identify_action.perform
+    @contact = contact_identify_action.perform
   end
 
   # TODO : clean up this with proper routes delete contacts/custom_attributes
@@ -21,13 +21,22 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
   private
 
   def process_hmac
-    return if params[:identifier_hash].blank? && !@web_widget.hmac_mandatory
+    return unless should_verify_hmac?
 
     render json: { error: 'HMAC failed: Invalid Identifier Hash Provided' }, status: :unauthorized unless valid_hmac?
 
     @contact_inbox.update(hmac_verified: true)
   end
 
+  def should_verify_hmac?
+    return false if params[:identifier_hash].blank? && !@web_widget.hmac_mandatory
+
+    # Taking an extra caution that the hmac is triggered whenever identifier is present
+    return false if params[:custom_attributes].present? && params[:identifier].blank?
+
+    true
+  end
+
   def valid_hmac?
     params[:identifier_hash] == OpenSSL::HMAC.hexdigest(
       'sha256',
diff --git a/app/drops/conversation_drop.rb b/app/drops/conversation_drop.rb
index b24586c30..ffd664659 100644
--- a/app/drops/conversation_drop.rb
+++ b/app/drops/conversation_drop.rb
@@ -13,7 +13,7 @@ class ConversationDrop < BaseDrop
     @obj.try(:recent_messages).map do |message|
       {
         'sender' => message_sender_name(message.sender),
-        'content' => transform_user_mention_content(message.content),
+        'content' => render_message_content(transform_user_mention_content(message.content)),
         'attachments' => message.attachments.map(&:file_url)
       }
     end
diff --git a/app/drops/message_drop.rb b/app/drops/message_drop.rb
index cbb3f1782..3423f0623 100644
--- a/app/drops/message_drop.rb
+++ b/app/drops/message_drop.rb
@@ -6,7 +6,7 @@ class MessageDrop < BaseDrop
   end
 
   def text_content
-    content = @obj.try(:content)
-    transform_user_mention_content content
+    content = @obj.try(:content) || ''
+    render_message_content(transform_user_mention_content(content))
   end
 end
diff --git a/app/helpers/message_format_helper.rb b/app/helpers/message_format_helper.rb
index e27e61fce..3dd8d8f23 100644
--- a/app/helpers/message_format_helper.rb
+++ b/app/helpers/message_format_helper.rb
@@ -1,6 +1,13 @@
 module MessageFormatHelper
   include RegexHelper
+
   def transform_user_mention_content(message_content)
     message_content.gsub(MENTION_REGEX, '\1')
   end
+
+  def render_message_content(message_content)
+    # rubocop:disable Rails/OutputSafety
+    CommonMarker.render_html(message_content).html_safe
+    # rubocop:enable Rails/OutputSafety
+  end
 end
diff --git a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
index 8882f7919..a166f7b5d 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -85,7 +85,6 @@ export default {
     },
     toggleEmailActionsModal() {
       this.showEmailActionsModal = !this.showEmailActionsModal;
-      this.hideConversationActions();
     },
   },
 };
diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
index 21cd923ff..ff9bcca91 100644
--- a/app/javascript/sdk/IFrameHelper.js
+++ b/app/javascript/sdk/IFrameHelper.js
@@ -199,6 +199,10 @@ export const IFrameHelper = {
     },
 
     handleNotificationDot: event => {
+      if (window.$chatwoot.hideMessageBubble) {
+        return;
+      }
+
       const bubbleElement = document.querySelector('.woot-widget-bubble');
       if (
         event.unreadMessageCount > 0 &&
diff --git a/app/views/api/v1/widget/contacts/update.json.jbuilder b/app/views/api/v1/widget/contacts/update.json.jbuilder
new file mode 100644
index 000000000..9853ccbee
--- /dev/null
+++ b/app/views/api/v1/widget/contacts/update.json.jbuilder
@@ -0,0 +1,3 @@
+json.id @contact.id
+json.name @contact.name
+json.email @contact.email
diff --git a/app/views/layouts/mailer/base.liquid b/app/views/layouts/mailer/base.liquid
index e836cdbb6..5fa07e139 100644
--- a/app/views/layouts/mailer/base.liquid
+++ b/app/views/layouts/mailer/base.liquid
@@ -1,112 +1,94 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
-
-<head>
+<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
+  <head>
     <meta name="viewport" content="width=device-width" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title></title>
-
     <style type="text/css">
-        img {
-            max-width: 100%;
-        }
+      img {
+        max-width: 100%;
+      }
 
+      body {
+        -webkit-font-smoothing: antialiased;
+        -webkit-text-size-adjust: none;
+        height: 100%;
+        line-height: 1.6em;
+        width: 100% !important;
+      }
+
+      body {
+        background-color: #F8FAFC;
+      }
+
+      @media only screen and (max-width: 640px) {
         body {
-            -webkit-font-smoothing: antialiased;
-            -webkit-text-size-adjust: none;
-            width: 100% !important;
-            height: 100%;
-            line-height: 1.6em;
+          padding: 0 !important;
         }
-
-        body {
-            background-color: #f6f6f6;
+        h1 {
+          font-size: 22px !important;
+          font-weight: 800 !important;
+          margin: 20px 0 5px !important;
         }
-
-        @media only screen and (max-width: 640px) {
-            body {
-                padding: 0 !important;
-            }
-            h1 {
-                font-weight: 800 !important;
-                margin: 20px 0 5px !important;
-            }
-            h2 {
-                font-weight: 800 !important;
-                margin: 20px 0 5px !important;
-            }
-            h3 {
-                font-weight: 800 !important;
-                margin: 20px 0 5px !important;
-            }
-            h4 {
-                font-weight: 800 !important;
-                margin: 20px 0 5px !important;
-            }
-            h1 {
-                font-size: 22px !important;
-            }
-            h2 {
-                font-size: 18px !important;
-            }
-            h3 {
-                font-size: 16px !important;
-            }
-            .container {
-                padding: 0 !important;
-                width: 100% !important;
-            }
-            .content {
-                padding: 0 !important;
-            }
-            .content-wrap {
-                padding: 10px !important;
-            }
-            .invoice {
-                width: 100% !important;
-            }
+        h2 {
+          font-size: 18px !important;
+          font-weight: 800 !important;
+          margin: 20px 0 5px !important;
         }
+        h3 {
+          font-size: 16px !important;
+          font-weight: 800 !important;
+          margin: 20px 0 5px !important;
+        }
+        h4 {
+          font-weight: 800 !important;
+          margin: 20px 0 5px !important;
+        }
+        .container {
+          padding: 0 !important;
+          width: 100% !important;
+        }
+        .content {
+          padding: 0 !important;
+        }
+        .content-wrap {
+          padding: 10px !important;
+        }
+      }
     </style>
-</head>
+  </head>
 
-<body itemscope itemtype="http://schema.org/EmailMessage" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em; background-color: #f6f6f6; margin: 0;" bgcolor="#f6f6f6">
-
-    <table class="body-wrap" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; background-color: #f6f6f6; margin: 0;" bgcolor="#f6f6f6">
-        <tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
-            <td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;" valign="top"></td>
-            <td class="container" width="600" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;" valign="top">
-                <div class="content" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; max-width: 600px; display: block; margin: 0 auto; padding: 20px; text-align:center;">
-                    <table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action" itemscope itemtype="http://schema.org/ConfirmAction" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; border-radius: 4px; background-color: #fff; text-align:left; margin: 0; border: 1px solid #e9e9e9; box-shadow:0 2px 11px 0 rgba(0,0,0,0.15)" bgcolor="#fff">
-                        <tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
-                            <td class="content-wrap" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 20px;" valign="top">
-                                <meta itemprop="name" content="Confirm Email" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;" />
-                                <table width="100%" cellpadding="0" cellspacing="0" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
-                                    {{ content_for_layout }}
-                                </table>
-                            </td>
-                        </tr>
-                    </table>
-                    <div class="footer" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; width: 100%; clear: both; color: #999; margin: 0; padding: 20px;">
-                        <table width="100%" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
-                            <tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
-                                {% if global_config['BRAND_NAME'] != '' %}
-                                    <tr style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
-                                        <td class="content-block" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
-                                            Powered by
-                                            <a href="{{ global_config['BRAND_URL'] }}" style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; color: #999; text-align: center; margin: 0; padding: 0 0 20px;" align="center" valign="top">
-                                                {{ global_config['BRAND_NAME'] }}
-                                            </a>
-                                        </td>
-                                    </tr>
-                                {% endif %}
-                            </tr>
-                        </table>
-                    </div>
-                </div>
-            </td>
-            <td style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0;" valign="top"></td>
-        </tr>
+  <body itemscope itemtype="http://schema.org/EmailMessage" style="font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; line-height: 1.6em; background-color: #F8FAFC; margin: 0;" bgcolor="#F8FAFC">
+    <table class="body-wrap" style="width: 100%; background-color: #F8FAFC; margin: 0;" bgcolor="#F8FAFC">
+      <tr style="margin: 0;">
+        <td class="container" width="600" style="display: block !important; max-width: 600px !important; clear: both !important; margin: 0 auto;" valign="top">
+          <div class="content" style="display: block; margin: 0 auto; padding: 20px; text-align:center;">
+            <table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action" itemscope itemtype="http://schema.org/ConfirmAction" style="border-radius: 6px;  background-color: #fff; text-align:left; margin: 0; border: 1px solid #e9e9e9; border-top:3px solid #0080f8;" bgcolor="#fff">
+              <tr style="margin: 0;">
+                <td class="content-wrap" style="vertical-align: top; margin: 0; padding: 20px; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;" valign="top">
+                  <table width="100%" cellpadding="0" cellspacing="0" style="margin: 0;">
+                    {{ content_for_layout }}
+                  </table>
+                </td>
+              </tr>
+            </table>
+          </div>
+          <div class="footer" style="color: #93AFC8; margin: 0; padding: 0 20px 40px; text-align: center">
+            <table width="100%" style="margin: 0;">
+              <tr style="margin: 0;">
+                {% if global_config['BRAND_NAME'] != '' %}
+                  <td class="content-block" style="font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; vertical-align: top; margin: 0; padding: 0 0 20px;" valign="top">
+                    Powered by
+                    <a href="{{ global_config['BRAND_URL'] }}" style="vertical-align: top; color: #93AFC8; text-align: center; margin: 0; padding: 0 0 20px;" align="center" valign="top">
+                      {{ global_config['BRAND_NAME'] }}
+                    </a>
+                  </td>
+                {% endif %}
+              </tr>
+            </table>
+          </div>
+        </td>
+      </tr>
     </table>
-</body>
-
+  </body>
 </html>
diff --git a/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_mention.liquid b/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_mention.liquid
index 9a30e6e09..00cb13e1e 100644
--- a/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_mention.liquid
+++ b/app/views/mailers/agent_notifications/conversation_notifications_mailer/conversation_mention.liquid
@@ -5,6 +5,7 @@
   {{message.text_content}}
 </blockquote>
 
+<p><b>Previous messages:</b></p>
 {% for chat_message in conversation.recent_messages %}
   <div>
     {% if chat_message.sender == user.available_name %}
@@ -15,7 +16,7 @@
   </div>
 
   <div>
-    <p style="padding: 10px 20px; margin: 5px 0 20px 0; background: #F2F3F7; border-radius: 10px; display: inline-block; font-family: "Helvetica Neue",Tahoma,Arial,sans-serif; text-align: start; unicode-bidi: plaintext;">
+    <p style="padding: 10px 20px; margin: 5px 0 20px 0; background: #F2F3F7; border-radius: 10px; display: inline-block; text-align: start; unicode-bidi: plaintext;">
       {% if chat_message.content %}
         {{chat_message.content}}
       {% endif %}
@@ -28,5 +29,6 @@
     </p>
   </div>
 {% endfor %}
-
-<p><a href="{{ action_url }}">View Message</a></p>
+<p>
+  <a href="{{ action_url }}">View Message</a>
+</p>
diff --git a/spec/controllers/api/v1/widget/contacts_controller_spec.rb b/spec/controllers/api/v1/widget/contacts_controller_spec.rb
index 854f2ab24..9364dbb3a 100644
--- a/spec/controllers/api/v1/widget/contacts_controller_spec.rb
+++ b/spec/controllers/api/v1/widget/contacts_controller_spec.rb
@@ -23,7 +23,7 @@ RSpec.describe '/api/v1/widget/contacts', type: :request do
 
       before do
         allow(ContactIdentifyAction).to receive(:new).and_return(identify_action)
-        allow(identify_action).to receive(:perform)
+        allow(identify_action).to receive(:perform).and_return(contact)
       end
 
       it 'calls contact identify' do
@@ -47,7 +47,7 @@ RSpec.describe '/api/v1/widget/contacts', type: :request do
 
       before do
         allow(ContactIdentifyAction).to receive(:new).and_return(identify_action)
-        allow(identify_action).to receive(:perform)
+        allow(identify_action).to receive(:perform).and_return(contact)
       end
 
       it 'returns success when correct identifier hash is provided' do
diff --git a/spec/helpers/message_format_helper_spec.rb b/spec/helpers/message_format_helper_spec.rb
index a2edc38c0..a2e0c5f45 100644
--- a/spec/helpers/message_format_helper_spec.rb
+++ b/spec/helpers/message_format_helper_spec.rb
@@ -8,4 +8,12 @@ describe MessageFormatHelper, type: :helper do
       end
     end
   end
+
+  describe '#render_message_content' do
+    context 'when render_message_content called' do
+      it 'render text correctly' do
+        expect(helper.render_message_content('Hi *there*, I am mostly text!')).to eq "<p>Hi <em>there</em>, I am mostly text!</p>\n"
+      end
+    end
+  end
 end

From b1eea7f7d14839996c5a605df249c1ee1820900d Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 9 Dec 2021 12:07:48 +0530
Subject: [PATCH 68/69] chore: Introduce enterprise edition license (#3209)

- Initialize an "enterprise" folder that is copyrighted.
- You can remove this folder and the system will continue functioning normally, in case you want a purely MIT licensed product.
- Enable limit on the number of user accounts in enterprise code.
- Use enterprise edition injector methods (inspired from Gitlab).
- SaaS software would run enterprise edition software always.

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
---
 LICENSE                                       |  8 +-
 .../api/v1/accounts/agents_controller.rb      |  5 ++
 .../concerns/request_exception_handler.rb     |  4 +
 app/models/account.rb                         |  9 ++
 config/application.rb                         |  5 +-
 .../01_inject_enterprise_edition_module.rb    | 87 +++++++++++++++++++
 .../20211012135050_add_limits_to_accounts.rb  |  5 ++
 db/schema.rb                                  |  1 +
 enterprise/LICENSE                            | 36 ++++++++
 enterprise/app/models/enterprise/account.rb   | 15 ++++
 enterprise/lib/enterprise.rb                  |  2 +
 lib/chatwoot_app.rb                           | 33 +++++++
 lib/custom_exceptions/account.rb              |  6 ++
 spec/enterprise/models/account_spec.rb        | 32 +++++++
 spec/models/account_spec.rb                   |  8 ++
 15 files changed, 253 insertions(+), 3 deletions(-)
 create mode 100644 config/initializers/01_inject_enterprise_edition_module.rb
 create mode 100644 db/migrate/20211012135050_add_limits_to_accounts.rb
 create mode 100644 enterprise/LICENSE
 create mode 100644 enterprise/app/models/enterprise/account.rb
 create mode 100644 enterprise/lib/enterprise.rb
 create mode 100644 lib/chatwoot_app.rb
 create mode 100644 spec/enterprise/models/account_spec.rb

diff --git a/LICENSE b/LICENSE
index 037ad7885..f36fc7c53 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,7 +1,11 @@
-The MIT License (MIT)
-
 Copyright (c) 2017-2021 Chatwoot Inc.
 
+Portions of this software are licensed as follows:
+
+* All content that resides under the "enterprise/" directory of this repository, if that directory exists, is licensed under the license defined in "enterprise/LICENSE".
+* All third party components incorporated into the Chatwoot Software are licensed under the original license provided by the owner of the applicable component.
+* Content outside of the above mentioned directories or restrictions above is available under the "MIT Expat" license as defined below.
+
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
diff --git a/app/controllers/api/v1/accounts/agents_controller.rb b/app/controllers/api/v1/accounts/agents_controller.rb
index a406e0cf3..a666d1a67 100644
--- a/app/controllers/api/v1/accounts/agents_controller.rb
+++ b/app/controllers/api/v1/accounts/agents_controller.rb
@@ -2,6 +2,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
   before_action :fetch_agent, except: [:create, :index]
   before_action :check_authorization
   before_action :find_user, only: [:create]
+  before_action :validate_limit, only: [:create]
   before_action :create_user, only: [:create]
   before_action :save_account_user, only: [:create]
 
@@ -69,4 +70,8 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
   def agents
     @agents ||= Current.account.users.order_by_full_name.includes({ avatar_attachment: [:blob] })
   end
+
+  def validate_limit
+    render_payment_required('Account limit exceeded. Upgrade to a higher plan') if agents.count >= Current.account.usage_limits[:agents]
+  end
 end
diff --git a/app/controllers/concerns/request_exception_handler.rb b/app/controllers/concerns/request_exception_handler.rb
index 1f96de737..51061017e 100644
--- a/app/controllers/concerns/request_exception_handler.rb
+++ b/app/controllers/concerns/request_exception_handler.rb
@@ -31,6 +31,10 @@ module RequestExceptionHandler
     render json: { error: message }, status: :unprocessable_entity
   end
 
+  def render_payment_required(message)
+    render json: { error: message }, status: :payment_required
+  end
+
   def render_internal_server_error(message)
     render json: { error: message }, status: :internal_server_error
   end
diff --git a/app/models/account.rb b/app/models/account.rb
index e23723611..657517c8d 100644
--- a/app/models/account.rb
+++ b/app/models/account.rb
@@ -6,6 +6,7 @@
 #  auto_resolve_duration :integer
 #  domain                :string(100)
 #  feature_flags         :integer          default(0), not null
+#  limits                :jsonb
 #  locale                :integer          default("en")
 #  name                  :string           not null
 #  settings_flags        :integer          default(0), not null
@@ -19,6 +20,7 @@ class Account < ApplicationRecord
   include FlagShihTzu
   include Reportable
   include Featurable
+  prepend_mod_with('Account')
 
   DEFAULT_QUERY_SETTING = {
     flag_query_mode: :bit_operator,
@@ -107,6 +109,13 @@ class Account < ApplicationRecord
     super || GlobalConfig.get('MAILER_SUPPORT_EMAIL')['MAILER_SUPPORT_EMAIL'] || ENV.fetch('MAILER_SENDER_EMAIL', 'Chatwoot <accounts@chatwoot.com>')
   end
 
+  def usage_limits
+    {
+      agents: ChatwootApp.max_limit,
+      inboxes: ChatwootApp.max_limit
+    }
+  end
+
   private
 
   def notify_creation
diff --git a/config/application.rb b/config/application.rb
index 074a2f744..0c7490dd7 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -13,8 +13,11 @@ module Chatwoot
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 6.0
 
-    config.autoload_paths << Rails.root.join('lib')
     config.eager_load_paths << Rails.root.join('lib')
+    config.eager_load_paths << Rails.root.join('enterprise/lib')
+    # rubocop:disable Rails/FilePath
+    config.eager_load_paths += Dir["#{Rails.root}/enterprise/app/**"]
+    # rubocop:enable Rails/FilePath
 
     # Settings in config/environments/* take precedence over those specified here.
     # Application configuration can go into files in config/initializers
diff --git a/config/initializers/01_inject_enterprise_edition_module.rb b/config/initializers/01_inject_enterprise_edition_module.rb
new file mode 100644
index 000000000..ecbcbe491
--- /dev/null
+++ b/config/initializers/01_inject_enterprise_edition_module.rb
@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+# original Authors: Gitlab
+# https://gitlab.com/gitlab-org/gitlab/-/blob/master/config/initializers/0_inject_enterprise_edition_module.rb
+#
+
+### Ref: https://medium.com/@leo_hetsch/ruby-modules-include-vs-prepend-vs-extend-f09837a5b073
+# Ancestors chain : it holds a list of constant names which are its ancestors
+#  example, by calling ancestors on the String class,
+#  String.ancestors => [String, Comparable, Object, PP::ObjectMixin, Kernel, BasicObject]
+#
+# Include: Ruby will insert the module into the ancestors chain of the class, just after its superclass
+# ancestor chain : [OriginalClass, IncludedModule, ...]
+#
+# Extend: class will actually import the module methods as class methods
+#
+# Prepend: Ruby will look into the module methods before looking into the class.
+# ancestor chain : [PrependedModule, OriginalClass, ...]
+########
+
+require 'active_support/inflector'
+
+module InjectEnterpriseEditionModule
+  def prepend_mod_with(constant_name, namespace: Object, with_descendants: false)
+    each_extension_for(constant_name, namespace) do |constant|
+      prepend_module(constant, with_descendants)
+    end
+  end
+
+  def extend_mod_with(constant_name, namespace: Object)
+    # rubocop:disable Performance/MethodObjectAsBlock
+    each_extension_for(
+      constant_name,
+      namespace,
+      &method(:extend)
+    )
+    # rubocop:enable Performance/MethodObjectAsBlock
+  end
+
+  def include_mod_with(constant_name, namespace: Object)
+    # rubocop:disable Performance/MethodObjectAsBlock
+    each_extension_for(
+      constant_name,
+      namespace,
+      &method(:include)
+    )
+    # rubocop:enable Performance/MethodObjectAsBlock
+  end
+
+  def prepend_mod(with_descendants: false)
+    prepend_mod_with(name, with_descendants: with_descendants)
+  end
+
+  def extend_mod
+    extend_mod_with(name)
+  end
+
+  def include_mod
+    include_mod_with(name)
+  end
+
+  private
+
+  def prepend_module(mod, with_descendants)
+    prepend(mod)
+
+    descendants.each { |descendant| descendant.prepend(mod) } if with_descendants
+  end
+
+  def each_extension_for(constant_name, namespace)
+    ChatwootApp.extensions.each do |extension_name|
+      extension_namespace =
+        const_get_maybe_false(namespace, extension_name.camelize)
+
+      extension_module =
+        const_get_maybe_false(extension_namespace, constant_name)
+
+      yield(extension_module) if extension_module
+    end
+  end
+
+  def const_get_maybe_false(mod, name)
+    mod&.const_defined?(name, false) && mod&.const_get(name, false)
+  end
+end
+
+Module.prepend(InjectEnterpriseEditionModule)
diff --git a/db/migrate/20211012135050_add_limits_to_accounts.rb b/db/migrate/20211012135050_add_limits_to_accounts.rb
new file mode 100644
index 000000000..8f5b28c25
--- /dev/null
+++ b/db/migrate/20211012135050_add_limits_to_accounts.rb
@@ -0,0 +1,5 @@
+class AddLimitsToAccounts < ActiveRecord::Migration[6.1]
+  def change
+    add_column :accounts, :limits, :jsonb, default: {}
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 10756d5c0..80e526555 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -52,6 +52,7 @@ ActiveRecord::Schema.define(version: 2021_12_08_085931) do
     t.integer "settings_flags", default: 0, null: false
     t.integer "feature_flags", default: 0, null: false
     t.integer "auto_resolve_duration"
+    t.jsonb "limits", default: {}
   end
 
   create_table "action_mailbox_inbound_emails", force: :cascade do |t|
diff --git a/enterprise/LICENSE b/enterprise/LICENSE
new file mode 100644
index 000000000..16d5eb94e
--- /dev/null
+++ b/enterprise/LICENSE
@@ -0,0 +1,36 @@
+The Chatwoot Enterprise license (the “Enterprise License”)
+Copyright (c) 2017-2021 Chatwoot Inc
+
+With regard to the Chatwoot Software:
+
+This software and associated documentation files (the "Software") may only be
+used in production, if you (and any entity that you represent) have agreed to,
+and are in compliance with, the Chatwoot Subscription Terms of Service, available
+at https://www.chatwoot.com/terms-of-service/ (the “Enterprise Terms”), or other
+agreement governing the use of the Software, as agreed by you and Chatwoot,
+and otherwise have a valid Chatwoot Enterprise License for for the
+correct number of user seats. Subject to the foregoing sentence, you are free to
+modify this Software and publish patches to the Software. You agree that Chatwoot
+and/or its licensors (as applicable) retain all right, title and interest in and
+to all such modifications and/or patches, and all such modifications and/or
+patches may only be used, copied, modified, displayed, distributed, or otherwise
+exploited with a valid Chatwoot Enterprise subscription for the correct
+number of user seats. Notwithstanding the foregoing, you may copy and modify
+the Software for development and testing purposes, without requiring a
+subscription. You agree that Chatwoot and/or its licensors (as applicable) retain
+all right, title and interest in and to all such modifications. You are not
+granted any other rights beyond what is expressly stated herein. Subject to the
+foregoing, it is forbidden to copy, merge, publish, distribute, sublicense,
+and/or sell the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+For all third party components incorporated into the Chatwoot Software, those
+components are licensed under the original license provided by the owner of the
+applicable component.
diff --git a/enterprise/app/models/enterprise/account.rb b/enterprise/app/models/enterprise/account.rb
new file mode 100644
index 000000000..84d72e0b3
--- /dev/null
+++ b/enterprise/app/models/enterprise/account.rb
@@ -0,0 +1,15 @@
+module Enterprise::Account
+  def usage_limits
+    {
+      agents: get_limits(:agents),
+      inboxes: get_limits(:inboxes)
+    }
+  end
+
+  private
+
+  def get_limits(limit_name)
+    config_name = "ACCOUNT_#{limit_name.to_s.upcase}_LIMIT"
+    self[:limits][limit_name.to_s] || GlobalConfig.get(config_name)[config_name] || ChatwootApp.max_limit
+  end
+end
diff --git a/enterprise/lib/enterprise.rb b/enterprise/lib/enterprise.rb
new file mode 100644
index 000000000..50fc8f63c
--- /dev/null
+++ b/enterprise/lib/enterprise.rb
@@ -0,0 +1,2 @@
+module Enterprise
+end
diff --git a/lib/chatwoot_app.rb b/lib/chatwoot_app.rb
new file mode 100644
index 000000000..842ecc479
--- /dev/null
+++ b/lib/chatwoot_app.rb
@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require 'pathname'
+
+module ChatwootApp
+  def self.root
+    Pathname.new(File.expand_path('..', __dir__))
+  end
+
+  def self.max_limit
+    100_000
+  end
+
+  def self.enterprise?
+    return if ENV.fetch('DISABLE_ENTERPRISE', false)
+
+    @enterprise ||= root.join('enterprise').exist?
+  end
+
+  def self.custom?
+    @custom ||= root.join('custom').exist?
+  end
+
+  def self.extensions
+    if custom?
+      %w[enterprise custom]
+    elsif enterprise?
+      %w[enterprise]
+    else
+      %w[]
+    end
+  end
+end
diff --git a/lib/custom_exceptions/account.rb b/lib/custom_exceptions/account.rb
index 84d57cd20..bd77c5a78 100644
--- a/lib/custom_exceptions/account.rb
+++ b/lib/custom_exceptions/account.rb
@@ -28,4 +28,10 @@ module CustomExceptions::Account
       I18n.t 'errors.signup.failed'
     end
   end
+
+  class PlanUpgradeRequired < CustomExceptions::Base
+    def message
+      I18n.t 'errors.plan_upgrade_required.failed'
+    end
+  end
 end
diff --git a/spec/enterprise/models/account_spec.rb b/spec/enterprise/models/account_spec.rb
new file mode 100644
index 000000000..6f0fa5aa7
--- /dev/null
+++ b/spec/enterprise/models/account_spec.rb
@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe Account do
+  describe 'usage_limits' do
+    before do
+      create(:installation_config, name: 'ACCOUNT_AGENTS_LIMIT', value: 20)
+    end
+
+    let!(:account) { create(:account) }
+
+    it 'returns max limits from global config when enterprise version' do
+      expect(account.usage_limits).to eq(
+        {
+          agents: 20,
+          inboxes: ChatwootApp.max_limit
+        }
+      )
+    end
+
+    it 'returns max limits from account when enterprise version' do
+      account.update(limits: { agents: 10 })
+      expect(account.usage_limits).to eq(
+        {
+          agents: 10,
+          inboxes: ChatwootApp.max_limit
+        }
+      )
+    end
+  end
+end
diff --git a/spec/models/account_spec.rb b/spec/models/account_spec.rb
index 20ebf4bfd..03d8c8937 100644
--- a/spec/models/account_spec.rb
+++ b/spec/models/account_spec.rb
@@ -21,4 +21,12 @@ RSpec.describe Account do
   it { is_expected.to have_many(:kbase_portals).dependent(:destroy_async) }
   it { is_expected.to have_many(:kbase_categories).dependent(:destroy_async) }
   it { is_expected.to have_many(:teams).dependent(:destroy_async) }
+
+  describe 'usage_limits' do
+    let(:account) { create(:account) }
+
+    it 'returns ChatwootApp.max limits' do
+      expect(account.usage_limits).to eq({ agents: ChatwootApp.max_limit, inboxes: ChatwootApp.max_limit })
+    end
+  end
 end

From d268f155e4abedf5de20785124d05ddd9b768858 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 9 Dec 2021 06:59:23 +0000
Subject: [PATCH 69/69] Bump version to 2.0.0

---
 config/app.yml | 2 +-
 package.json   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/app.yml b/config/app.yml
index b883f6deb..2d32ef434 100644
--- a/config/app.yml
+++ b/config/app.yml
@@ -1,5 +1,5 @@
 shared: &shared
-  version: '1.22.1'
+  version: '2.0.0'
 
 development:
   <<: *shared
diff --git a/package.json b/package.json
index 5e193551d..86b9af2de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/chatwoot",
-  "version": "1.22.1",
+  "version": "2.0.0",
   "license": "MIT",
   "scripts": {
     "eslint": "eslint app/**/*.{js,vue} --fix",