Merge branch 'release/2.1.0'

Priority to GlobalConfig changes are reverted and for the time being, env vars will take precedence if set.

Fixes #3699

.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

.codeclimate.yml

@@ -1,4 +1,4 @@
-version: "2"
+version: '2'
 plugins:
   rubocop:
     enabled: false
@@ -17,22 +17,30 @@ checks:
   method-count:
     enabled: true
     config:
-      threshold: 25
+      threshold: 32
+  file-lines:
+    enabled: true
+    config:
+      threshold: 300
 exclude_patterns:
-  - "spec/"
-  - "**/specs/"
-  - "db/*"
-  - "bin/**/*"
-  - "db/**/*"
-  - "config/**/*"
-  - "public/**/*"
-  - "vendor/**/*"
-  - "node_modules/**/*"
-  - "lib/tasks/auto_annotate_models.rake"
-  - "app/test-matchers.js"
-  - "docs/*"
-  - "**/*.md"
-  - "**/*.yml"
-  - "app/javascript/dashboard/i18n/locale"
-  - "**/*.stories.js"
-  - "stories/"
+  - 'spec/'
+  - '**/specs/'
+  - 'db/*'
+  - 'bin/**/*'
+  - 'db/**/*'
+  - 'config/**/*'
+  - 'public/**/*'
+  - 'vendor/**/*'
+  - 'node_modules/**/*'
+  - 'lib/tasks/auto_annotate_models.rake'
+  - 'app/test-matchers.js'
+  - 'docs/*'
+  - '**/*.md'
+  - '**/*.yml'
+  - 'app/javascript/dashboard/i18n/locale'
+  - '**/*.stories.js'
+  - 'stories/'
+  - 'app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.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'

.env.example

@@ -41,7 +41,7 @@ RAILS_MAX_THREADS=5
 
 # The email from which all outgoing emails are sent
 # could user either  `email@yourdomain.com` or `BrandName <email@yourdomain.com>`
-MAILER_SENDER_EMAIL=Chatwoot <accounts@chatwoot.com>
+MAILER_SENDER_EMAIL="Chatwoot <accounts@chatwoot.com>"
 
 
 #SMTP domain key is set up for HELO checking
@@ -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

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
     }],
     'vue/html-self-closing': 'off',
     "vue/no-v-html": 'off',
+    'vue/singleline-html-element-content-newline': 'off',
     'import/extensions': ['off']
 
   },

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+npm run eslint
+bundle exec rubocop -a
+git add

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+sh bin/validate_push

.rubocop.yml

@@ -11,9 +11,11 @@ Metrics/ClassLength:
   Max: 125
   Exclude:
     - 'app/models/conversation.rb'
+    - 'app/models/contact.rb'
     - 'app/mailers/conversation_reply_mailer.rb'
     - 'app/models/message.rb'
     - 'app/builders/messages/facebook/message_builder.rb'
+    - 'app/controllers/api/v1/accounts/contacts_controller.rb'
 RSpec/ExampleLength:
   Max: 25
 Style/Documentation:
@@ -56,7 +58,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'
@@ -86,6 +88,7 @@ Naming/VariableNumber:
 Metrics/MethodLength:
   Exclude:
     - 'db/migrate/20161123131628_devise_token_auth_create_users.rb'
+    - 'db/migrate/20211219031453_update_foreign_keys_on_delete.rb'
 Rails/CreateTableWithTimestamps:
   Exclude:
     - 'db/migrate/20170207092002_acts_as_taggable_on_migration.acts_as_taggable_on_engine.rb'
@@ -101,6 +104,7 @@ Metrics/AbcSize:
     - 'db/migrate/20190819005836_add_missing_indexes_on_taggings.acts_as_taggable_on_engine.rb'
     - 'db/migrate/20161123131628_devise_token_auth_create_users.rb'
     - 'app/controllers/api/v1/accounts/inboxes_controller.rb'
+    - 'db/migrate/20211219031453_update_foreign_keys_on_delete.rb'
 Metrics/CyclomaticComplexity:
   Max: 7
   Exclude:

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.

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 on how to contribute.

Gemfile

@@ -121,6 +121,10 @@ gem 'hairtrigger'
 
 gem 'procore-sift'
 
+# parse email
+gem 'email_reply_trimmer'
+gem 'html2text'
+
 group :production, :staging do
   # we dont want request timing out in development while using byebug
   gem 'rack-timeout'
@@ -144,6 +148,8 @@ group :test do
   gem 'cypress-on-rails', '~> 1.0'
   # fast cleaning of database
   gem 'database_cleaner'
+  # mock http calls
+  gem 'webmock'
 end
 
 group :development, :test do
@@ -155,6 +161,7 @@ group :development, :test do
   gem 'active_record_query_trace'
   gem 'bundle-audit', require: false
   gem 'byebug', platform: :mri
+  gem 'climate_control'
   gem 'factory_bot_rails'
   gem 'faker'
   gem 'listen'
@@ -170,5 +177,4 @@ group :development, :test do
   gem 'simplecov', '0.17.1', require: false
   gem 'spring'
   gem 'spring-watcher-listen'
-  gem 'webmock'
 end

Gemfile.lock

@@ -9,63 +9,63 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actioncable (6.1.4.3)
+      actionpack (= 6.1.4.3)
+      activesupport (= 6.1.4.3)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activestorage (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionmailbox (6.1.4.3)
+      actionpack (= 6.1.4.3)
+      activejob (= 6.1.4.3)
+      activerecord (= 6.1.4.3)
+      activestorage (= 6.1.4.3)
+      activesupport (= 6.1.4.3)
       mail (>= 2.7.1)
-    actionmailer (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      actionview (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionmailer (6.1.4.3)
+      actionpack (= 6.1.4.3)
+      actionview (= 6.1.4.3)
+      activejob (= 6.1.4.3)
+      activesupport (= 6.1.4.3)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (6.1.4.1)
-      actionview (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionpack (6.1.4.3)
+      actionview (= 6.1.4.3)
+      activesupport (= 6.1.4.3)
       rack (~> 2.0, >= 2.0.9)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activestorage (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actiontext (6.1.4.3)
+      actionpack (= 6.1.4.3)
+      activerecord (= 6.1.4.3)
+      activestorage (= 6.1.4.3)
+      activesupport (= 6.1.4.3)
       nokogiri (>= 1.8.5)
-    actionview (6.1.4.1)
-      activesupport (= 6.1.4.1)
+    actionview (6.1.4.3)
+      activesupport (= 6.1.4.3)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_record_query_trace (1.8)
-    activejob (6.1.4.1)
-      activesupport (= 6.1.4.1)
+    activejob (6.1.4.3)
+      activesupport (= 6.1.4.3)
       globalid (>= 0.3.6)
-    activemodel (6.1.4.1)
-      activesupport (= 6.1.4.1)
-    activerecord (6.1.4.1)
-      activemodel (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    activemodel (6.1.4.3)
+      activesupport (= 6.1.4.3)
+    activerecord (6.1.4.3)
+      activemodel (= 6.1.4.3)
+      activesupport (= 6.1.4.3)
     activerecord-import (1.2.0)
       activerecord (>= 3.2)
-    activestorage (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    activestorage (6.1.4.3)
+      actionpack (= 6.1.4.3)
+      activejob (= 6.1.4.3)
+      activerecord (= 6.1.4.3)
+      activesupport (= 6.1.4.3)
       marcel (~> 1.0.0)
       mini_mime (>= 1.1.0)
-    activesupport (6.1.4.1)
+    activesupport (6.1.4.3)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -133,6 +133,7 @@ GEM
       bundler (>= 1.2.0, < 3)
       thor (~> 1.0)
     byebug (11.1.3)
+    climate_control (1.0.1)
     coderay (1.1.3)
     commonmarker (0.23.2)
     concurrent-ruby (1.1.9)
@@ -178,6 +179,7 @@ GEM
       addressable (~> 2.8)
     ecma-re-validator (0.3.0)
       regexp_parser (~> 2.0)
+    email_reply_trimmer (0.1.13)
     erubi (1.10.0)
     erubis (2.7.0)
     et-orbi (1.2.5)
@@ -218,7 +220,7 @@ GEM
       grpc (~> 1.25)
     geocoder (1.7.0)
     gli (2.20.1)
-    globalid (0.5.2)
+    globalid (1.0.0)
       activesupport (>= 5.0)
     google-apis-core (0.4.1)
       addressable (~> 2.5, >= 2.5.1)
@@ -253,9 +255,9 @@ GEM
       google-cloud-core (~> 1.6)
       googleauth (>= 0.16.2, < 2.a)
       mini_mime (~> 1.0)
-    google-protobuf (3.18.1)
-    google-protobuf (3.18.1-universal-darwin)
-    google-protobuf (3.18.1-x86_64-linux)
+    google-protobuf (3.19.2)
+    google-protobuf (3.19.2-x86_64-darwin)
+    google-protobuf (3.19.2-x86_64-linux)
     googleapis-common-protos (1.3.12)
       google-protobuf (~> 3.14)
       googleapis-common-protos-types (~> 1.2)
@@ -289,6 +291,8 @@ GEM
     hashdiff (1.0.1)
     hashie (4.1.0)
     hkdf (0.3.0)
+    html2text (0.2.1)
+      nokogiri (~> 1.6)
     http-accept (1.7.0)
     http-cookie (1.0.4)
       domain_name (~> 0.5)
@@ -296,7 +300,7 @@ GEM
       mime-types (~> 3.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.8.10)
+    i18n (1.8.11)
       concurrent-ruby (~> 1.0)
     image_processing (1.12.1)
       mini_magick (>= 4.9.5, < 5)
@@ -342,7 +346,7 @@ GEM
     listen (3.7.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.12.0)
+    loofah (2.13.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -357,7 +361,7 @@ GEM
     mini_magick (4.11.0)
     mini_mime (1.1.2)
     mini_portile2 (2.5.3)
-    minitest (5.14.4)
+    minitest (5.15.0)
     mock_redis (0.29.0)
       ruby2_keywords
     momentjs-rails (2.20.1)
@@ -396,12 +400,12 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (4.0.6)
-    puma (5.5.1)
+    puma (5.5.2)
       nio4r (~> 2.0)
     pundit (2.1.1)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
-    racc (1.5.2)
+    racc (1.6.0)
     rack (2.2.3)
     rack-attack (6.5.0)
       rack (>= 1.0, < 3)
@@ -412,29 +416,29 @@ GEM
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rack-timeout (0.6.0)
-    rails (6.1.4.1)
-      actioncable (= 6.1.4.1)
-      actionmailbox (= 6.1.4.1)
-      actionmailer (= 6.1.4.1)
-      actionpack (= 6.1.4.1)
-      actiontext (= 6.1.4.1)
-      actionview (= 6.1.4.1)
-      activejob (= 6.1.4.1)
-      activemodel (= 6.1.4.1)
-      activerecord (= 6.1.4.1)
-      activestorage (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    rails (6.1.4.3)
+      actioncable (= 6.1.4.3)
+      actionmailbox (= 6.1.4.3)
+      actionmailer (= 6.1.4.3)
+      actionpack (= 6.1.4.3)
+      actiontext (= 6.1.4.3)
+      actionview (= 6.1.4.3)
+      activejob (= 6.1.4.3)
+      activemodel (= 6.1.4.3)
+      activerecord (= 6.1.4.3)
+      activestorage (= 6.1.4.3)
+      activesupport (= 6.1.4.3)
       bundler (>= 1.15.0)
-      railties (= 6.1.4.1)
+      railties (= 6.1.4.3)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.4.2)
       loofah (~> 2.3)
-    railties (6.1.4.1)
-      actionpack (= 6.1.4.1)
-      activesupport (= 6.1.4.1)
+    railties (6.1.4.3)
+      actionpack (= 6.1.4.3)
+      activesupport (= 6.1.4.3)
       method_source
       rake (>= 0.13)
       thor (~> 1.0)
@@ -572,9 +576,9 @@ GEM
     sprockets (4.0.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    sprockets-rails (3.2.2)
-      actionpack (>= 4.0)
-      activesupport (>= 4.0)
+    sprockets-rails (3.4.2)
+      actionpack (>= 5.2)
+      activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     squasher (0.6.2)
     statsd-ruby (1.5.0)
@@ -631,7 +635,7 @@ GEM
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     wisper (2.0.0)
-    zeitwerk (2.4.2)
+    zeitwerk (2.5.1)
 
 PLATFORMS
   arm64-darwin-20
@@ -657,6 +661,7 @@ DEPENDENCIES
   bullet
   bundle-audit
   byebug
+  climate_control
   commonmarker
   cypress-on-rails (~> 1.0)
   database_cleaner
@@ -666,6 +671,7 @@ DEPENDENCIES
   devise_token_auth
   dotenv-rails
   down (~> 5.0)
+  email_reply_trimmer
   facebook-messenger
   factory_bot_rails
   faker
@@ -680,6 +686,7 @@ DEPENDENCIES
   haikunator
   hairtrigger
   hashie
+  html2text
   image_processing
   jbuilder
   json_refs

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

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>
 
@@ -17,7 +20,6 @@ ___
   <img src="https://img.shields.io/circleci/build/github/chatwoot/chatwoot" alt="CircleCI Badge">
     <a href="https://hub.docker.com/r/chatwoot/chatwoot/"><img src="https://img.shields.io/docker/pulls/chatwoot/chatwoot" alt="Docker Pull Badge"></a>
   <a href="https://hub.docker.com/r/chatwoot/chatwoot/"><img src="https://img.shields.io/docker/cloud/build/chatwoot/chatwoot" alt="Docker Build Badge"></a>
-  <img src="https://img.shields.io/github/license/chatwoot/chatwoot" alt="License">
   <img src="https://img.shields.io/github/commit-activity/m/chatwoot/chatwoot" alt="Commits-per-month">
   <a title="Crowdin" target="_self" href="https://chatwoot.crowdin.com/chatwoot"><img src="https://badges.crowdin.net/e/37ced7eba411064bd792feb3b7a28b16/localized.svg"></a>
   <a href="https://discord.gg/cJXdrwS"><img src="https://img.shields.io/discord/647412545203994635" alt="Discord"></a>
@@ -26,34 +28,39 @@ ___
   <a href="https://status.chatwoot.com"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fchatwoot%2Fstatus%2Fmaster%2Fapi%2Fchatwoot%2Fresponse-time.json" alt="response time"></a>
 </p>
 
-<img src="https://s3.us-west-2.amazonaws.com/gh-assets.chatwoot.com/chatwoot-dashboard-assets.png" width="100%" alt="Chat dashboard"/>
+<img src="https://chatwoot-public-assets.s3.amazonaws.com/github/screenshot.png" width="100%" alt="Chat dashboard"/>
 
-Chatwoot is an open-source omnichannel customer support software. The development of Chatwoot started in 2016. It failed to succeed as a business and eventually shut up shop in 2017. During 2019 #Hacktoberfest, the maintainers decided to make it open-source, instead of letting the code rust in a private repo. With a pleasant surprise, Chatwoot became a trending project on Hacker News and best of all, got lots of love from the community.
-Now, a failed project is back on track and the prospects are looking great. The team is back to working on the project and this time, we are building it in the open. Thanks to the ideas and contributions from the community.
 
 
+Chatwoot is an open-source, self-hosted customer engagement suite. Chatwoot lets you view and manage your customer data, communicate with them irrespective of which medium they use, and re-engage them based on their profile.
+
 ## Features
 
-Chatwoot gives an integrated view of conversations happening in different communication channels.
-
-It supports the following conversation channels:
+Chatwoot supports the following conversation channels:
 
  - **Website**: Talk to your customers using our live chat widget and make use of our SDK to identify a user and provide contextual support.
  - **Facebook**: Connect your Facebook pages and start replying to the direct messages to your page.
+ - **Instagram**: Connect your Instagram profile and start replying to the direct messages.
  - **Twitter**: Connect your Twitter profiles and reply to direct messages or the tweets where you are mentioned.
- - **Whatsapp**: Connect your Whatsapp business account and manage the conversation in Chatwoot
- - **SMS**: Connect your Twilio SMS account and reply to the SMS queries in Chatwoot
+ - **Telegram**: Connect your Telegram bot and reply to your customers right from a single dashboard.
+ - **WhatsApp**: Connect your WhatsApp business account and manage the conversation in Chatwoot.
+ - **Line**: Connect your Line account and manage the conversations in Chatwoot.
+ - **SMS**: Connect your Twilio SMS account and reply to the SMS queries in Chatwoot.
  - **API Channel**: Build custom communication channels using our API channel.
- - **Email (beta)**: Forward all your email queries to Chatwoot and view it in our integrated dashboard.
+ - **Email**: Forward all your email queries to Chatwoot and view it in our integrated dashboard.
+
+And more.
 
 Other features include:
 
-- **Multi-brand inboxes**: Manage multiple brands or pages using a single dashboard.
-- **Private notes**: Inter team communication is possible using private notes in a conversation.
+- **CRM**: Save all your customer information right inside Chatwoot, use contact notes to log emails, phone calls, or meeting notes.
+- **Custom Attributes**: Define custom attribute attributes to store information about a contact or a conversation and extend the product to match your workflow.
+- **Shared multi-brand inboxes**: Manage multiple brands or pages using a shared inbox.
+- **Private notes**: Use @mentions and private notes to communicate internally about a conversation.
 - **Canned responses (Saved replies)**: Improve the response rate by adding saved replies for frequently asked questions.
-- **Conversation Labels**: Use conversation labelling to create custom workflows.
+- **Conversation Labels**: Use conversation labels to create custom workflows.
 - **Auto assignment**: Chatwoot intelligently assigns a ticket to the agents who have access to the inbox depending on their availability and load.
-- **Conversation continuity**: If the user has provided an email address through the chat widget, Chatwoot would send an email to the customer under the agent name so that the user can continue the conversation over the email.
+- **Conversation continuity**: If the user has provided an email address through the chat widget, Chatwoot will send an email to the customer under the agent name so that the user can continue the conversation over the email.
 - **Multi-lingual support**: Chatwoot supports 10+ languages.
 - **Powerful API & Webhooks**: Extend the capability of the software using Chatwoot’s webhooks and APIs.
 - **Integrations**: Chatwoot natively integrates with Slack right now. Manage your conversations in Slack without logging into the dashboard.
@@ -81,9 +88,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
 
@@ -102,4 +118,4 @@ Thanks goes to all these [wonderful people](https://www.chatwoot.com/docs/contri
 <a href="https://github.com/chatwoot/chatwoot/graphs/contributors"><img src="https://opencollective.com/chatwoot/contributors.svg?width=890&button=false" /></a>
 
 
-*Chatwoot* &copy; 2017-2021, Chatwoot Inc - Released under the MIT License.
+*Chatwoot* &copy; 2017-2022, Chatwoot Inc - Released under the MIT License.

app/actions/contact_merge_action.rb

@@ -48,11 +48,10 @@ class ContactMergeAction
 
     # attributes in base contact are given preference
     merged_attributes = mergee_contact_attributes.deep_merge(base_contact_attributes)
-    # retaining old pubsub token to notify the contacts that are listening
-    mergee_pubsub_token = mergee_contact.pubsub_token
 
     @mergee_contact.destroy!
-    Rails.configuration.dispatcher.dispatch(CONTACT_MERGED, Time.zone.now, contact: @base_contact, tokens: [mergee_pubsub_token])
+    Rails.configuration.dispatcher.dispatch(CONTACT_MERGED, Time.zone.now, contact: @base_contact,
+                                                                           tokens: [@base_contact.contact_inboxes.filter_map(&:pubsub_token)])
     @base_contact.update!(merged_attributes)
   end
 end

app/builders/contact_builder.rb

@@ -33,7 +33,8 @@ class ContactBuilder
       phone_number: contact_attributes[:phone_number],
       email: contact_attributes[:email],
       identifier: contact_attributes[:identifier],
-      additional_attributes: contact_attributes[:additional_attributes]
+      additional_attributes: contact_attributes[:additional_attributes],
+      custom_attributes: contact_attributes[:custom_attributes]
     )
   end
 

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
 

app/builders/messages/instagram/message_builder.rb

@@ -38,6 +38,10 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
     @outgoing_echo ? :outgoing : :incoming
   end
 
+  def message_identifier
+    message[:mid]
+  end
+
   def message_source_id
     @outgoing_echo ? recipient_id : sender_id
   end
@@ -66,10 +70,6 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
     @messaging[:message][:text]
   end
 
-  def content_attributes
-    { message_id: @messaging[:message][:mid] }
-  end
-
   def build_message
     return if @outgoing_echo && already_sent_from_chatwoot?
 
@@ -103,22 +103,17 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
       account_id: conversation.account_id,
       inbox_id: conversation.inbox_id,
       message_type: message_type,
-      source_id: message_source_id,
+      source_id: message_identifier,
       content: message_content,
-      content_attributes: content_attributes,
       sender: @outgoing_echo ? nil : contact
     }
   end
 
   def already_sent_from_chatwoot?
     cw_message = conversation.messages.where(
-      source_id: nil,
-      message_type: 'outgoing',
-      content: message_content,
-      private: false,
-      status: :sent
+      source_id: @messaging[:message][:mid]
     ).first
-    cw_message.update(content_attributes: content_attributes) if cw_message.present?
+
     cw_message.present?
   end
 

app/builders/messages/message_builder.rb

@@ -8,9 +8,11 @@ class Messages::MessageBuilder
     @conversation = conversation
     @user = user
     @message_type = params[:message_type] || 'outgoing'
-    @items = params.to_unsafe_h&.dig(:content_attributes, :items)
     @attachments = params[:attachments]
+    return unless params.instance_of?(ActionController::Parameters)
+
     @in_reply_to = params.to_unsafe_h&.dig(:content_attributes, :in_reply_to)
+    @items = params.to_unsafe_h&.dig(:content_attributes, :items)
   end
 
   def perform

app/channels/room_channel.rb

@@ -31,7 +31,7 @@ class RoomChannel < ApplicationCable::Channel
 
   def current_user
     @current_user ||= if params[:user_id].blank?
-                        Contact.find_by!(pubsub_token: @pubsub_token)
+                        ContactInbox.find_by!(pubsub_token: @pubsub_token).contact
                       else
                         User.find_by!(pubsub_token: @pubsub_token, id: params[:user_id])
                       end

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

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

@@ -0,0 +1,21 @@
+class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseController
+  before_action :check_authorization
+
+  def index
+    @automation_rules = Current.account.automation_rules
+  end
+
+  def create
+    @automation_rule = Current.account.automation_rules.create(automation_rules_permit)
+  end
+
+  private
+
+  def automation_rules_permit
+    params.permit(
+      :name, :description, :event_name, :account_id,
+      conditions: [:attribute_key, :filter_operator, :query_operator, { values: [] }],
+      actions: [:action_name, { action_params: [:intiated_at] }]
+    )
+  end
+end

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

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

app/controllers/api/v1/accounts/contacts/base_controller.rb

@@ -0,0 +1,9 @@
+class Api::V1::Accounts::Contacts::BaseController < Api::V1::Accounts::BaseController
+  before_action :ensure_contact
+
+  private
+
+  def ensure_contact
+    @contact = Current.account.contacts.find(params[:contact_id])
+  end
+end

app/controllers/api/v1/accounts/contacts/contact_inboxes_controller.rb

@@ -1,5 +1,4 @@
-class Api::V1::Accounts::Contacts::ContactInboxesController < Api::V1::Accounts::BaseController
-  before_action :ensure_contact
+class Api::V1::Accounts::Contacts::ContactInboxesController < Api::V1::Accounts::Contacts::BaseController
   before_action :ensure_inbox, only: [:create]
 
   def create
@@ -13,8 +12,4 @@ class Api::V1::Accounts::Contacts::ContactInboxesController < Api::V1::Accounts:
     @inbox = Current.account.inboxes.find(params[:inbox_id])
     authorize @inbox, :show?
   end
-
-  def ensure_contact
-    @contact = Current.account.contacts.find(params[:contact_id])
-  end
 end

app/controllers/api/v1/accounts/contacts/conversations_controller.rb

@@ -1,8 +1,8 @@
-class Api::V1::Accounts::Contacts::ConversationsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Contacts::ConversationsController < Api::V1::Accounts::Contacts::BaseController
   def index
     @conversations = Current.account.conversations.includes(
       :assignee, :contact, :inbox, :taggings
-    ).where(inbox_id: inbox_ids, contact_id: permitted_params[:contact_id])
+    ).where(inbox_id: inbox_ids, contact_id: @contact.id)
   end
 
   private
@@ -14,8 +14,4 @@ class Api::V1::Accounts::Contacts::ConversationsController < Api::V1::Accounts::
       []
     end
   end
-
-  def permitted_params
-    params.permit(:contact_id)
-  end
 end

app/controllers/api/v1/accounts/contacts/labels_controller.rb

@@ -1,13 +1,13 @@
-class Api::V1::Accounts::Contacts::LabelsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Contacts::LabelsController < Api::V1::Accounts::Contacts::BaseController
   include LabelConcern
 
   private
 
   def model
-    @model ||= Current.account.contacts.find(permitted_params[:contact_id])
+    @model ||= @contact
   end
 
   def permitted_params
-    params.permit(:contact_id, labels: [])
+    params.permit(labels: [])
   end
 end

app/controllers/api/v1/accounts/contacts/notes_controller.rb

@@ -0,0 +1,32 @@
+class Api::V1::Accounts::Contacts::NotesController < Api::V1::Accounts::Contacts::BaseController
+  before_action :note, except: [:index, :create]
+
+  def index
+    @notes = @contact.notes.latest.includes(:user)
+  end
+
+  def create
+    @note = @contact.notes.create!(note_params)
+  end
+
+  def destroy
+    @note.destroy
+    head :ok
+  end
+
+  def show; end
+
+  def update
+    @note.update(note_params)
+  end
+
+  private
+
+  def note
+    @note ||= @contact.notes.find(params[:id])
+  end
+
+  def note_params
+    params.require(:note).permit(:content).merge({ contact_id: @contact.id, user_id: Current.user.id })
+  end
+end

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

@@ -1,17 +1,19 @@
 class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   include Sift
-
   sort_on :email, type: :string
-  sort_on :name, type: :string
+  sort_on :name, internal_name: :order_on_name, type: :scope, scope_params: [:direction]
   sort_on :phone_number, type: :string
-  sort_on :last_activity_at, type: :datetime
+  sort_on :last_activity_at, internal_name: :order_on_last_activity_at, type: :scope, scope_params: [:direction]
+  sort_on :company, internal_name: :order_on_company_name, type: :scope, scope_params: [:direction]
+  sort_on :city, internal_name: :order_on_city, type: :scope, scope_params: [:direction]
+  sort_on :country, internal_name: :order_on_country_name, type: :scope, scope_params: [:direction]
 
   RESULTS_PER_PAGE = 15
 
   before_action :check_authorization
-  before_action :set_current_page, only: [:index, :active, :search]
-  before_action :fetch_contact, only: [:show, :update, :destroy, :contactable_inboxes]
-  before_action :set_include_contact_inboxes, only: [:index, :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, :filter]
 
   def index
     @contacts_count = resolved_contacts.count
@@ -50,11 +52,24 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
 
   def show; end
 
+  def filter
+    result = ::Contacts::FilterService.new(params.permit!, current_user).perform
+    contacts = result[:contacts]
+    @contacts_count = result[:count]
+    @contacts = fetch_contacts_with_conversation_count(contacts)
+  end
+
   def contactable_inboxes
     @all_contactable_inboxes = Contacts::ContactableInboxesService.new(contact: @contact).get
     @contactable_inboxes = @all_contactable_inboxes.select { |contactable_inbox| policy(contactable_inbox[:inbox]).show? }
   end
 
+  # TODO : refactor this method into dedicated contacts/custom_attributes controller class and routes
+  def destroy_custom_attributes
+    @contact.custom_attributes = @contact.custom_attributes.excluding(params[:custom_attributes])
+    @contact.save!
+  end
+
   def create
     ActiveRecord::Base.transaction do
       @contact = Current.account.contacts.new(contact_params)
@@ -66,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
@@ -91,10 +101,8 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   def resolved_contacts
     return @resolved_contacts if @resolved_contacts
 
-    @resolved_contacts = Current.account.contacts
-                                .where.not(email: [nil, ''])
-                                .or(Current.account.contacts.where.not(phone_number: [nil, '']))
-                                .or(Current.account.contacts.where.not(identifier: [nil, '']))
+    @resolved_contacts = Current.account.contacts.resolved_contacts
+
     @resolved_contacts = @resolved_contacts.tagged_with(params[:labels], any: true) if params[:labels].present?
     @resolved_contacts
   end

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

@@ -2,7 +2,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   include Events::Types
   include DateRangeHelper
 
-  before_action :conversation, except: [:index, :meta, :search, :create]
+  before_action :conversation, except: [:index, :meta, :search, :create, :filter]
   before_action :contact_inbox, only: [:create]
 
   def index
@@ -31,6 +31,12 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
 
   def show; end
 
+  def filter
+    result = ::Conversations::FilterService.new(params.permit!, current_user).perform
+    @conversations = result[:conversations]
+    @conversations_count = result[:count]
+  end
+
   def mute
     @conversation.mute!
     head :ok
@@ -60,17 +66,18 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   def toggle_typing_status
     case params[:typing_status]
     when 'on'
-      trigger_typing_event(CONVERSATION_TYPING_ON)
+      trigger_typing_event(CONVERSATION_TYPING_ON, params[:is_private])
     when 'off'
-      trigger_typing_event(CONVERSATION_TYPING_OFF)
+      trigger_typing_event(CONVERSATION_TYPING_OFF, params[:is_private])
     end
     head :ok
   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
@@ -86,9 +93,9 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     @conversation.snoozed_until = parse_date_time(params[:snoozed_until].to_s) if params[:snoozed_until]
   end
 
-  def trigger_typing_event(event)
+  def trigger_typing_event(event, is_private)
     user = current_user.presence || @resource
-    Rails.configuration.dispatcher.dispatch(event, Time.zone.now, conversation: @conversation, user: user)
+    Rails.configuration.dispatcher.dispatch(event, Time.zone.now, conversation: @conversation, user: user, is_private: is_private)
   end
 
   def conversation

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

@@ -25,9 +25,7 @@ class Api::V1::Accounts::CustomAttributeDefinitionsController < Api::V1::Account
   private
 
   def fetch_custom_attributes_definitions
-    @custom_attribute_definitions = Current.account.custom_attribute_definitions.where(
-      attribute_model: permitted_params[:attribute_model] || DEFAULT_ATTRIBUTE_MODEL
-    )
+    @custom_attribute_definitions = Current.account.custom_attribute_definitions.with_attribute_model(permitted_params[:attribute_model])
   end
 
   def fetch_custom_attribute_definition
@@ -41,7 +39,7 @@ class Api::V1::Accounts::CustomAttributeDefinitionsController < Api::V1::Account
       :attribute_display_type,
       :attribute_key,
       :attribute_model,
-      :default_value
+      attribute_values: []
     )
   end
 

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

@@ -1,11 +1,11 @@
 class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseController
   before_action :fetch_inbox
-  before_action :current_agents_ids, only: [:update]
+  before_action :current_agents_ids, only: [:create, :update]
 
   def create
     authorize @inbox, :create?
     ActiveRecord::Base.transaction do
-      params[:user_ids].map { |user_id| @inbox.add_member(user_id) }
+      agents_to_be_added_ids.map { |user_id| @inbox.add_member(user_id) }
     end
     fetch_updated_agents
   end

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,9 +42,14 @@ 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.channel.update!(permitted_params(channel_attributes)[:channel]) if permitted_params(channel_attributes)[:channel].present?
+
+    # 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
 
@@ -112,23 +118,14 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   def permitted_params(channel_attributes = [])
     params.permit(
       :name, :avatar, :greeting_enabled, :greeting_message, :enable_email_collect, :csat_survey_enabled,
-      :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone,
+      :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved,
       channel: [:type, *channel_attributes]
     )
   end
 
   def get_channel_attributes(channel_type)
-    case channel_type
-    when 'Channel::WebWidget'
-      Channel::WebWidget::EDITABLE_ATTRS
-    when 'Channel::Api'
-      Channel::Api::EDITABLE_ATTRS
-    when 'Channel::Email'
-      Channel::Email::EDITABLE_ATTRS
-    when 'Channel::Telegram'
-      Channel::Telegram::EDITABLE_ATTRS
-    when 'Channel::Line'
-      Channel::Line::EDITABLE_ATTRS
+    if channel_type.constantize.const_defined?('EDITABLE_ATTRS')
+      channel_type.constantize::EDITABLE_ATTRS.presence
     else
       []
     end

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

@@ -8,7 +8,7 @@ class Api::V1::Accounts::TeamMembersController < Api::V1::Accounts::BaseControll
 
   def create
     ActiveRecord::Base.transaction do
-      @team_members = params[:user_ids].map { |user_id| @team.add_member(user_id) }
+      @team_members = members_to_be_added_ids.map { |user_id| @team.add_member(user_id) }
     end
   end
 

app/controllers/api/v1/accounts_controller.rb

@@ -55,7 +55,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def check_signup_enabled
-    raise ActionController::RoutingError, 'Not Found' if ENV.fetch('ENABLE_ACCOUNT_SIGNUP', true) == 'false'
+    raise ActionController::RoutingError, 'Not Found' if GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') == 'false'
   end
 
   def pundit_user

app/controllers/api/v1/notification_subscriptions_controller.rb

@@ -7,6 +7,12 @@ class Api::V1::NotificationSubscriptionsController < Api::BaseController
     render json: notification_subscription
   end
 
+  def destroy
+    notification_subscription = NotificationSubscription.where(["subscription_attributes->>'push_token' = ?", params[:push_token]]).first
+    notification_subscription.destroy
+    head :ok
+  end
+
   private
 
   def set_user

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

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,18 +8,35 @@ 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
+  def destroy_custom_attributes
+    @contact.custom_attributes = @contact.custom_attributes.excluding(params[:custom_attributes])
+    @contact.save!
+    render json: @contact
   end
 
   private
 
   def process_hmac
-    return if params[:identifier_hash].blank?
-    raise StandardError, 'HMAC failed: Invalid Identifier Hash Provided' unless valid_hmac?
+    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',

app/controllers/concerns/request_exception_handler.rb

@@ -31,13 +31,18 @@ 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
 
   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
 

app/controllers/dashboard_controller.rb

@@ -26,12 +26,17 @@ class DashboardController < ActionController::Base
       'API_CHANNEL_THUMBNAIL',
       'ANALYTICS_TOKEN',
       'ANALYTICS_HOST'
-    ).merge(
-      APP_VERSION: Chatwoot.config[:version]
-    )
+    ).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

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

app/controllers/super_admin/app_configs_controller.rb

@@ -0,0 +1,21 @@
+class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
+  def show
+    @allowed_configs = %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET]
+    # ref: https://github.com/rubocop/rubocop/issues/7767
+    # rubocop:disable Style/HashTransformValues
+    @fb_config = InstallationConfig.where(name: @allowed_configs)
+                                   .pluck(:name, :serialized_value)
+                                   .map { |name, serialized_value| [name, serialized_value['value']] }
+                                   .to_h
+    # rubocop:enable Style/HashTransformValues
+  end
+
+  def create
+    params['app_config'].each do |key, value|
+      i = InstallationConfig.where(name: key).first_or_create(value: value, locked: false)
+      i.value = value
+      i.save!
+    end
+    redirect_to super_admin_app_config_url
+  end
+end

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

app/controllers/widgets_controller.rb

@@ -29,21 +29,21 @@ class WidgetsController < ActionController::Base
   def set_contact
     return if @auth_token_params[:source_id].nil?
 
-    contact_inbox = ::ContactInbox.find_by(
+    @contact_inbox = ::ContactInbox.find_by(
       inbox_id: @web_widget.inbox.id,
       source_id: @auth_token_params[:source_id]
     )
 
-    @contact = contact_inbox ? contact_inbox.contact : nil
+    @contact = @contact_inbox ? @contact_inbox.contact : nil
   end
 
   def build_contact
     return if @contact.present?
 
-    contact_inbox = @web_widget.create_contact_inbox(additional_attributes)
-    @contact = contact_inbox.contact
+    @contact_inbox = @web_widget.create_contact_inbox(additional_attributes)
+    @contact = @contact_inbox.contact
 
-    payload = { source_id: contact_inbox.source_id, inbox_id: @web_widget.inbox.id }
+    payload = { source_id: @contact_inbox.source_id, inbox_id: @web_widget.inbox.id }
     @token = ::Widget::TokenService.new(payload: payload).generate_token
   end
 

app/dashboards/agent_bot_dashboard.rb

@@ -12,6 +12,7 @@ class AgentBotDashboard < Administrate::BaseDashboard
     avatar_url: AvatarField,
     id: Field::Number,
     name: Field::String,
+    account: Field::BelongsTo.with_options(searchable: true, searchable_field: 'name', order: 'id DESC'),
     description: Field::String,
     outgoing_url: Field::String,
     created_at: Field::DateTime,
@@ -26,6 +27,7 @@ class AgentBotDashboard < Administrate::BaseDashboard
   COLLECTION_ATTRIBUTES = %i[
     id
     avatar_url
+    account
     name
     outgoing_url
   ].freeze
@@ -34,7 +36,7 @@ class AgentBotDashboard < Administrate::BaseDashboard
   # an array of attributes that will be displayed on the model's show page.
   SHOW_PAGE_ATTRIBUTES = %i[
     id
-    avatar_url
+    account
     name
     description
     outgoing_url
@@ -45,6 +47,7 @@ class AgentBotDashboard < Administrate::BaseDashboard
   # on the model's form (`new` and `edit`) pages.
   FORM_ATTRIBUTES = %i[
     name
+    account
     description
     outgoing_url
   ].freeze

app/dispatchers/async_dispatcher.rb

@@ -15,7 +15,9 @@ class AsyncDispatcher < BaseDispatcher
       EventListener.instance,
       HookListener.instance,
       InstallationWebhookListener.instance,
-      WebhookListener.instance
+      NotificationListener.instance,
+      WebhookListener.instance,
+      AutomationRuleListener.instance
     ]
   end
 end

app/dispatchers/sync_dispatcher.rb

@@ -5,6 +5,6 @@ class SyncDispatcher < BaseDispatcher
   end
 
   def listeners
-    [ActionCableListener.instance, AgentBotListener.instance, NotificationListener.instance]
+    [ActionCableListener.instance, AgentBotListener.instance]
   end
 end

app/drops/conversation_drop.rb

@@ -1,5 +1,30 @@
 class ConversationDrop < BaseDrop
+  include MessageFormatHelper
+
   def display_id
     @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_name(message.sender),
+        'content' => render_message_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

app/drops/inbox_drop.rb

@@ -1,2 +1,5 @@
 class InboxDrop < BaseDrop
+  def name
+    @obj.try(:name)
+  end
 end

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

app/fields/avatar_field.rb

@@ -2,6 +2,6 @@ require 'administrate/field/base'
 
 class AvatarField < Administrate::Field::Base
   def avatar_url
-    data.presence || '/admin/avatar.png'
+    data.presence&.gsub('?d=404', '?d=mp')
   end
 end

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
@@ -121,8 +126,12 @@ class ConversationFinder
 
   def conversations
     @conversations = @conversations.includes(
-      :taggings, :inbox, { assignee: { avatar_attachment: [:blob] } }, { contact: { avatar_attachment: [:blob] } }, :team
+      :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

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

app/helpers/file_type_helper.rb

@@ -1,16 +1,29 @@
 module FileTypeHelper
+  # NOTE: video, audio, image, etc are filetypes previewable in frontend
   def file_type(content_type)
-    return :image if [
-      'image/jpeg',
-      'image/png',
-      'image/gif',
-      'image/tiff',
-      'image/bmp'
-    ].include?(content_type)
-
-    return :video if content_type.include?('video/')
+    return :image if image_file?(content_type)
+    return :video if video_file?(content_type)
     return :audio if content_type.include?('audio/')
 
     :file
   end
+
+  def image_file?(content_type)
+    [
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/bmp',
+      'image/webp'
+    ].include?(content_type)
+  end
+
+  def video_file?(content_type)
+    [
+      'video/ogg',
+      'video/mp4',
+      'video/webm',
+      'video/quicktime'
+    ].include?(content_type)
+  end
 end

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

app/javascript/dashboard/api/attributes.js

@@ -6,8 +6,8 @@ class AttributeAPI extends ApiClient {
     super('custom_attribute_definitions', { accountScoped: true });
   }
 
-  getAttributesByModel(modelId) {
-    return axios.get(`${this.url}?attribute_model=${modelId}`);
+  getAttributesByModel() {
+    return axios.get(this.url);
   }
 }
 

app/javascript/dashboard/api/auth.js

@@ -166,4 +166,8 @@ export default {
       profile: { ...availabilityData },
     });
   },
+
+  deleteAvatar() {
+    return axios.delete(endPoints('deleteAvatar').url);
+  },
 };

app/javascript/dashboard/api/contactNotes.js

@@ -2,7 +2,27 @@ import ApiClient from './ApiClient';
 
 class ContactNotes extends ApiClient {
   constructor() {
-    super('contact_notes', { accountScoped: true });
+    super('notes', { accountScoped: true });
+    this.contactId = null;
+  }
+
+  get url() {
+    return `${this.baseUrl()}/contacts/${this.contactId}/notes`;
+  }
+
+  get(contactId) {
+    this.contactId = contactId;
+    return super.get();
+  }
+
+  create(contactId, content) {
+    this.contactId = contactId;
+    return super.create({ content });
+  }
+
+  delete(contactId, id) {
+    this.contactId = contactId;
+    return super.delete(id);
   }
 }
 

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);
@@ -60,6 +65,12 @@ class ContactAPI extends ApiClient {
       headers: { 'Content-Type': 'multipart/form-data' },
     });
   }
+
+  destroyCustomAttributes(contactId, customAttributes) {
+    return axios.post(`${this.url}/${contactId}/destroy_custom_attributes`, {
+      custom_attributes: customAttributes,
+    });
+  }
 }
 
 export default new ContactAPI();

app/javascript/dashboard/api/endPoints.js

@@ -36,6 +36,10 @@ const endPoints = {
     },
     params: { omniauth_token: '' },
   },
+
+  deleteAvatar: {
+    url: '/api/v1/profile/avatar',
+  },
 };
 
 export default page => {

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,15 @@ class ConversationApi extends ApiClient {
         assignee_type: assigneeType,
         page,
         labels,
+        conversation_type: conversationType,
+      },
+    });
+  }
+
+  filter(payload) {
+    return axios.post(`${this.url}/filter`, payload.queryData, {
+      params: {
+        page: payload.page,
       },
     });
   }
@@ -51,9 +68,10 @@ class ConversationApi extends ApiClient {
     return axios.post(`${this.url}/${id}/update_last_seen`);
   }
 
-  toggleTyping({ conversationId, status }) {
+  toggleTyping({ conversationId, status, isPrivate }) {
     return axios.post(`${this.url}/${conversationId}/toggle_typing_status`, {
       typing_status: status,
+      is_private: isPrivate,
     });
   }
 
@@ -65,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,
@@ -73,6 +91,7 @@ class ConversationApi extends ApiClient {
         assignee_type: assigneeType,
         labels,
         team_id: teamId,
+        conversation_type: conversationType,
       },
     });
   }
@@ -80,6 +99,12 @@ class ConversationApi extends ApiClient {
   sendEmailTranscript({ conversationId, email }) {
     return axios.post(`${this.url}/${conversationId}/transcript`, { email });
   }
+
+  updateCustomAttributes({ conversationId, customAttributes }) {
+    return axios.post(`${this.url}/${conversationId}/custom_attributes`, {
+      custom_attributes: customAttributes,
+    });
+  }
 }
 
 export default new ConversationApi();

app/javascript/dashboard/api/inbox/message.js

@@ -8,8 +8,8 @@ export const buildCreatePayload = ({
   contentAttributes,
   echoId,
   file,
-  ccEmails,
-  bccEmails,
+  ccEmails = '',
+  bccEmails = '',
 }) => {
   let payload;
   if (file) {
@@ -47,8 +47,8 @@ class MessageApi extends ApiClient {
     contentAttributes,
     echo_id: echoId,
     file,
-    ccEmails,
-    bccEmails,
+    ccEmails = '',
+    bccEmails = '',
   }) {
     return axios({
       method: 'post',

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 => {
@@ -60,6 +61,16 @@ describe('#ContactsAPI', () => {
       );
     });
 
+    it('#destroyCustomAttributes', () => {
+      contactAPI.destroyCustomAttributes(1, ['cloudCustomer']);
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/contacts/1/destroy_custom_attributes',
+        {
+          custom_attributes: ['cloudCustomer'],
+        }
+      );
+    });
+
     it('#importContacts', () => {
       const file = 'file';
       contactAPI.importContacts(file);
@@ -71,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
+      );
+    });
   });
 });
 

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 => {
@@ -160,5 +161,54 @@ describe('#ConversationAPI', () => {
         }
       );
     });
+
+    it('#updateCustomAttributes', () => {
+      conversationAPI.updateCustomAttributes({
+        conversationId: 45,
+        customAttributes: { order_d: '1001' },
+      });
+      expect(context.axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/conversations/45/custom_attributes',
+        {
+          custom_attributes: { order_d: '1001' },
+        }
+      );
+    });
+
+    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 } }
+      );
+    });
   });
 });

app/javascript/dashboard/api/specs/inbox/message.spec.js

@@ -35,12 +35,14 @@ describe('#ConversationAPI', () => {
         message: 'test content',
         echoId: 12,
         isPrivate: true,
+
         file: new Blob(['test-content'], { type: 'application/pdf' }),
       });
       expect(formPayload).toBeInstanceOf(FormData);
       expect(formPayload.get('content')).toEqual('test content');
       expect(formPayload.get('echo_id')).toEqual('12');
       expect(formPayload.get('private')).toEqual('true');
+      expect(formPayload.get('cc_emails')).toEqual('');
     });
 
     it('builds object payload if file is not available', () => {
@@ -56,6 +58,8 @@ describe('#ConversationAPI', () => {
         private: false,
         echo_id: 12,
         content_attributes: { in_reply_to: 12 },
+        bcc_emails: '',
+        cc_emails: '',
       });
     });
   });

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;
 }
 

app/javascript/dashboard/assets/scss/_foundation-custom.scss

@@ -9,10 +9,10 @@
 
 .card {
   margin-bottom: var(--space-small);
-  padding: var(--space-small);
+  padding: var(--space-normal);
 }
 
-.button-wrapper .button.link.grey-btn {
+.button-wrapper .button.grey-btn {
   margin-left: var(--space-normal);
 }
 
@@ -21,7 +21,7 @@
   font-size: $font-size-mini;
   max-width: 15rem;
   padding: $space-smaller $space-small;
-  z-index: 9999;
+  z-index: 999;
 }
 
 code {
@@ -49,7 +49,21 @@ code {
 .cursor-pointer {
   cursor: pointer;
 }
+
 // remove when grid gutters are fixed
 .columns.with-right-space {
   padding-right: var(--space-normal);
 }
+
+
+.badge {
+  border-radius: var(--border-radius-normal);
+}
+
+.padding-right-small {
+  padding-right: var(--space-one);
+}
+
+.margin-right-small {
+  margin-right: var(--space-small);
+}

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -45,6 +45,9 @@
 // 1. Global
 // ---------
 
+// Disable contrast warnings in Foundation.
+$contrast-warnings: false;
+
 $global-font-size: 10px;
 $global-width: 100%;
 $global-lineheight: 1.5;
@@ -219,9 +222,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 +403,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;

app/javascript/dashboard/assets/scss/_helper-classes.scss

@@ -55,6 +55,10 @@
   justify-content: space-between;
 }
 
-.w-100 {
+.w-full {
   width: 100%;
 }
+
+.h-full {
+  height: 100%;
+}

app/javascript/dashboard/assets/scss/_utility-helpers.scss

@@ -1,3 +1,56 @@
 .margin-right-small {
   margin-right: var(--space-small);
 }
+
+.margin-right-smaller {
+  margin-right: var(--space-smaller);
+}
+
+.margin-left-minus-slab {
+  margin-left: var(--space-minus-slab);
+}
+
+.fs-small {
+  font-size: var(--font-size-small);
+}
+
+.fs-default {
+  font-size: var(--font-size-default);
+}
+
+.fw-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.p-normal {
+  padding: var(--space-normal);
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+
+.border-right {
+  border-right: 1px solid var(--color-border);
+}
+
+.border-left {
+  border-left: 1px solid var(--color-border);
+}
+
+.bg-white {
+  background-color: var(--white);
+}
+
+.text-y-800 {
+  color: var(--y-800);
+}

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;

app/javascript/dashboard/assets/scss/_woot.scss

@@ -14,7 +14,6 @@
 @import 'helper-classes';
 @import 'formulate';
 @import 'date-picker';
-@import 'utility-helpers';
 
 @import 'foundation-sites/scss/foundation';
 @import '~bourbon/core/bourbon';
@@ -50,3 +49,4 @@
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';
 @import '~shared/assets/stylesheets/ionicons';
+@import 'utility-helpers';

app/javascript/dashboard/assets/scss/plugins/_dropdown.scss

@@ -2,8 +2,9 @@
   @include elegant-card;
   @include border-light;
   box-sizing: content-box;
+  padding: var(--space-small);
   width: fit-content;
-  z-index: 999;
+  z-index: var(--z-index-very-high);
 
   &.dropdown-pane--open {
     display: block;

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -51,6 +51,10 @@
         width: 100%;
       }
 
+      p {
+        margin-bottom: 0;
+      }
+
       &.multiselect__option--highlight {
         background: var(--white);
         color: var(--color-body);

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;
 

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 {
@@ -65,6 +66,32 @@ $default-button-height: 4.0rem;
     }
   }
 
+  &.clear {
+    &.warning {
+      color: var(--y-800);
+    }
+
+    &.button--only-icon:hover {
+      background: var(--w-50);
+
+      &.secondary {
+        background: var(--s-50);
+      }
+
+      &.success {
+        background: var(--g-50);
+      }
+
+      &.alert {
+        background: var(--r-50);
+      }
+
+      &.warning {
+        background: var(--y-100);
+      }
+    }
+  }
+
   // Sizes
   &.tiny {
     height: var(--space-medium);
@@ -103,7 +130,6 @@ $default-button-height: 4.0rem;
     padding: 0;
   }
 
-
 }
 
 

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 {

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -17,7 +17,8 @@
     }
   }
 
-  .image {
+  .image,
+  .video {
     cursor: pointer;
     position: relative;
 
@@ -26,7 +27,13 @@
     }
 
     .modal-image {
-      max-width: 85%;
+      max-height: 90%;
+      max-width: 90%;
+    }
+
+    .modal-video {
+      max-height: 75vh;
+      max-width: 100%;
     }
 
     &::before {
@@ -35,11 +42,21 @@
       content: '';
       height: 20%;
       left: 0;
-      opacity: .8;
+      opacity: 0.8;
       position: absolute;
       width: 100%;
     }
   }
+
+  .video {
+    .modal-container {
+      width: auto;
+
+      .modal--close {
+        z-index: var(--z-index-low);
+      }
+    }
+  }
 }
 
 .conversations-list-wrap {
@@ -76,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;
@@ -118,7 +135,7 @@
 
   &.unread--toast {
     +.right {
-      margin-bottom: 0;
+      margin-bottom: var(--space-micro);
     }
 
     +.left {

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

@@ -1,8 +1,7 @@
 .error {
-
   #{$all-text-inputs},
   select,
-  .multiselect>.multiselect__tags {
+  .multiselect > .multiselect__tags {
     @include thin-border(var(--r-400));
   }
 
@@ -40,4 +39,8 @@ input {
     font-size: var(--font-size-small);
     height: var(--space-large);
   }
+
+  .error {
+    border-color: var(--r-400);
+  }
 }

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;
@@ -29,7 +29,6 @@
   }
 }
 
-
 .page-top-bar {
   @include padding($space-large $space-large $zero);
 
@@ -48,13 +47,16 @@
   position: relative;
   width: 60rem;
 
+  &.medium {
+    max-width: 80%;
+    width: 90rem;
+  }
 
   .content-box {
     @include padding($zero);
     height: auto;
   }
 
-
   h2 {
     color: $color-heading;
     font-size: $font-size-medium;
@@ -89,15 +91,19 @@
     button {
       font-size: $font-size-small;
     }
+
+    &.justify-content-end {
+      justify-content: end;
+    }
   }
 
   .delete-item {
     @include padding($space-large);
+
     button {
       @include margin($zero);
     }
   }
-
 }
 
 .modal-enter,

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

@@ -21,10 +21,7 @@
   border: 1px solid var(--color-border);
 }
 
-.margin-right-small {
-  margin-right: var(--space-small);
-}
-
-.display-flex {
+.reports-option__wrap {
+  align-items: center;
   display: flex;
 }

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,26 +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 {
-        &:hover {
-          color: $color-woot;
-        }
-      }
-    }
-
-    .active a .wrap {
-      color: $color-woot;
-    }
-  }
-
   .nested {
     a {
       font-size: $font-size-small;
@@ -83,34 +57,6 @@
   }
 }
 
-.main-nav {
-  @include flex-weight(1);
-  @include scroll-on-hover;
-  padding: 0 $space-medium - $space-one;
-
-  a {
-    &::before {
-      margin-right: $space-slab;
-    }
-  }
-
-  .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;
-}
-
 .hamburger--menu {
   cursor: pointer;
   display: none;

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>
@@ -10,12 +10,16 @@
       <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>
-    <div v-if="isOpen" class="cw-accordion--content">
+    <div
+      v-if="isOpen"
+      class="cw-accordion--content"
+      :class="{ compact: compact }"
+    >
       <slot />
     </div>
   </div>
@@ -33,6 +37,10 @@ export default {
       type: String,
       required: true,
     },
+    compact: {
+      type: Boolean,
+      default: false,
+    },
     icon: {
       type: String,
       default: '',
@@ -58,10 +66,10 @@ 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);
-  cursor: pointer;
+  background: var(--s-50);
+  border-bottom: 1px solid var(--s-100);
+  border-top: 1px solid var(--s-100);
+  cursor: grab;
   display: flex;
   justify-content: space-between;
   margin: 0;
@@ -106,5 +114,9 @@ export default {
 
 .cw-accordion--content {
   padding: var(--space-normal);
+
+  &.compact {
+    padding: 0;
+  }
 }
 </style>

app/javascript/dashboard/components/ChatList.vue

@@ -1,14 +1,40 @@
-<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
+          size="small"
+          variant="clear"
+          color-scheme="alert"
+          @click="resetAndFetchData"
+        >
+          {{ $t('FILTER.CLEAR_BUTTON_LABEL') }}
+        </woot-button>
+        <woot-button
+          v-tooltip.top-end="$t('FILTER.TOOLTIP_LABEL')"
+          variant="clear"
+          color-scheme="secondary"
+          icon="filter"
+          size="small"
+          class="btn-filter"
+          @click="onToggleAdvanceFiltersModal"
+        >
+        </woot-button>
+      </div>
     </div>
 
     <chat-type-tabs
+      v-if="!hasAppliedFilters"
       :items="assigneeTabItems"
       :active-tab="activeAssigneeTab"
       class="tab--chat-type"
@@ -26,6 +52,7 @@
         :active-label="label"
         :team-id="teamId"
         :chat="chat"
+        :conversation-type="conversationType"
         :show-assignee="showAssigneeInConversationCard"
       />
 
@@ -37,7 +64,7 @@
         v-if="!hasCurrentPageEndReached && !chatListLoading"
         variant="clear"
         size="expanded"
-        @click="fetchConversations"
+        @click="loadMoreConversations"
       >
         {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
       </woot-button>
@@ -53,6 +80,18 @@
         {{ $t('CHAT_LIST.EOF') }}
       </p>
     </div>
+    <woot-modal
+      :show.sync="showAdvancedFilters"
+      :on-close="onToggleAdvanceFiltersModal"
+      size="medium"
+    >
+      <conversation-advanced-filter
+        v-if="showAdvancedFilters"
+        :filter-types="advancedFilterTypes"
+        :on-close="onToggleAdvanceFiltersModal"
+        @applyFilter="onApplyFilter"
+      />
+    </woot-modal>
   </div>
 </template>
 
@@ -60,12 +99,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 +119,7 @@ export default {
     ChatTypeTabs,
     ConversationCard,
     ChatFilter,
+    ConversationAdvancedFilter,
   },
   mixins: [timeMixin, conversationMixin, eventListenerMixins],
   props: {
@@ -91,11 +135,20 @@ export default {
       type: String,
       default: '',
     },
+    conversationType: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     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 +162,11 @@ export default {
       currentUserID: 'getCurrentUserID',
       activeInbox: 'getSelectedInbox',
       conversationStats: 'conversationStats/getStats',
+      appliedFilters: 'getAppliedConversationFilters',
     }),
+    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 +188,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() {
@@ -144,6 +209,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() {
@@ -156,17 +224,24 @@ 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() {
       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;
@@ -188,6 +263,9 @@ export default {
     label() {
       this.resetAndFetchData();
     },
+    conversationType() {
+      this.resetAndFetchData();
+    },
   },
   mounted() {
     this.$store.dispatch('setChatFilter', this.activeStatus);
@@ -198,6 +276,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 +334,7 @@ export default {
     resetAndFetchData() {
       this.$store.dispatch('conversationPage/reset');
       this.$store.dispatch('emptyAllConversations');
+      this.$store.dispatch('clearConversationFilters');
       this.fetchConversations();
     },
     fetchConversations() {
@@ -252,6 +342,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 +380,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 +403,17 @@ export default {
     flex-basis: 46rem;
   }
 }
+.filter--actions {
+  display: flex;
+  align-items: center;
+}
+
+.btn-filter {
+  margin: 0 var(--space-smaller);
+}
+
+.filter__applied {
+  padding: var(--space-slab) 0 !important;
+  border-bottom: 1px solid var(--color-border);
+}
 </style>

app/javascript/dashboard/components/CustomAttribute.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="custom-attribute">
+    <div class="title-wrap">
+      <h4 class="text-block-title title error">
+        <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="delete"
+            class-names="delete-button"
+            @click="onDelete"
+          />
+        </div>
+      </h4>
+    </div>
+    <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="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">
+          {{ displayValue || '---' }}
+        </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="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="edit"
+            class-names="edit-button"
+            @click="onEdit"
+          />
+        </div>
+      </div>
+    </div>
+    <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>
+</template>
+
+<script>
+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 },
+    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 },
+    contactId: { type: Number, default: null },
+  },
+  data() {
+    return {
+      isEditing: false,
+      editedValue: null,
+    };
+  },
+  validations() {
+    if (this.isAttributeTypeLink) {
+      return {
+        editedValue: { required, url },
+      };
+    }
+    return {
+      editedValue: { required },
+    };
+  },
+
+  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,
+        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';
+    },
+    isAttributeTypeDate() {
+      return this.attributeType === 'date';
+    },
+    notAttributeTypeCheckboxAndList() {
+      return !this.isAttributeTypeCheckbox && !this.isAttributeTypeList;
+    },
+    inputType() {
+      return this.isAttributeTypeLink ? 'url' : this.attributeType;
+    },
+    shouldShowErrorMessage() {
+      return this.$v.editedValue.$error;
+    },
+    errorMessage() {
+      if (this.$v.editedValue.url) {
+        return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
+      }
+      return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.REQUIRED');
+    },
+    displayValue() {
+      if (this.attributeType === 'date') {
+        return format(new Date(this.editedValue), 'dd-MM-yyyy');
+      }
+      return this.editedValue;
+    },
+  },
+  mounted() {
+    this.editedValue = this.formattedValue;
+    bus.$on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, focusAttributeKey => {
+      if (this.attributeKey === focusAttributeKey) {
+        this.onEdit();
+      }
+    });
+  },
+  methods: {
+    focusInput() {
+      if (this.$refs.inputfield) {
+        this.$refs.inputfield.focus();
+      }
+    },
+    onEdit() {
+      this.isEditing = true;
+      this.$nextTick(() => {
+        this.focusInput();
+      });
+    },
+    onUpdateListValue(value) {
+      if (value) {
+        this.editedValue = value.name;
+        this.onUpdate();
+      }
+    },
+    onUpdate() {
+      const updatedValue =
+        this.attributeType === 'date'
+          ? format(new Date(this.editedValue), DATE_FORMAT)
+          : this.editedValue;
+
+      this.$v.$touch();
+      if (this.$v.$invalid) {
+        return;
+      }
+      this.isEditing = false;
+      this.$emit('update', this.attributeKey, updatedValue);
+    },
+    onDelete() {
+      this.isEditing = false;
+      this.$emit('delete', this.attributeKey);
+    },
+    onCopy() {
+      this.$emit('copy', this.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.custom-attribute {
+  padding: var(--space-slab) var(--space-normal);
+}
+
+.title-wrap {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--space-mini);
+}
+.title {
+  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);
+  }
+}
+.title--icon {
+  width: var(--space-two);
+}
+.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);
+}
+.error-message {
+  color: var(--r-400);
+  display: block;
+  font-size: 1.4rem;
+  font-size: var(--font-size-small);
+  font-weight: 400;
+  margin-bottom: 1rem;
+  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>

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>
@@ -34,6 +36,10 @@ export default {
       type: String,
       default: 'centered',
     },
+    size: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     modalContainerClassName() {
@@ -41,7 +47,8 @@ export default {
       if (this.fullWidth) {
         return `${className} modal-container--full-width`;
       }
-      return className;
+
+      return `${className} ${this.size}`;
     },
     modalClassName() {
       const modalClassNameMap = {

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">
-          <i class="ui-close-icon icon ion-ios-close-outline" />
-        </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>

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -1,18 +1,28 @@
 <template>
-  <i class="ion-android-menu hamburger--menu" @click="onMenuItemClick" />
+  <button @click="onMenuItemClick">
+    <fluent-icon class="hamburger--menu" icon="list" />
+  </button>
 </template>
 
 <script>
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
 export default {
   methods: {
     onMenuItemClick() {
-      bus.$emit('sidemenu_icon_click');
+      bus.$emit(BUS_EVENTS.TOGGLE_SIDEMENU);
     },
   },
 };
 </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>

app/javascript/dashboard/components/Snackbar.vue

@@ -1,16 +1,17 @@
 <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,
+    message: { type: String, default: '' },
     showButton: Boolean,
     duration: {
       type: [String, Number],
@@ -22,9 +23,7 @@ export default {
       toggleAfterTimeout: false,
     };
   },
-  methods: {
-  },
-  mounted() {
-  },
+  mounted() {},
+  methods: {},
 };
 </script>

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -29,12 +29,18 @@ export default {
   },
 
   mounted() {
-    bus.$on('newToastMessage', message => {
+    bus.$on('newToastMessage', this.onNewToastMessage);
+  },
+  beforeDestroy() {
+    bus.$off('newToastMessage', this.onNewToastMessage);
+  },
+  methods: {
+    onNewToastMessage(message) {
       this.snackMessages.push({ key: new Date().getTime(), message });
       window.setTimeout(() => {
         this.snackMessages.splice(0, 1);
       }, this.duration);
-    });
+    },
   },
 };
 </script>

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>

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>

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

@@ -5,10 +5,10 @@
         v-if="isOpen"
         class-names="resolve"
         color-scheme="success"
-        icon="ion-checkmark"
+        icon="checkmark"
         emoji="✅"
         :is-loading="isLoading"
-        @click="() => toggleStatus(STATUS_TYPE.RESOLVED)"
+        @click="onCmdResolveConversation"
       >
         {{ this.$t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
       </woot-button>
@@ -16,10 +16,10 @@
         v-else-if="isResolved"
         class-names="resolve"
         color-scheme="warning"
-        icon="ion-refresh"
+        icon="arrow-redo"
         emoji="👀"
         :is-loading="isLoading"
-        @click="() => toggleStatus(STATUS_TYPE.OPEN)"
+        @click="onCmdOpenConversation"
       >
         {{ this.$t('CONVERSATION.HEADER.REOPEN_ACTION') }}
       </woot-button>
@@ -27,9 +27,9 @@
         v-else-if="showOpenButton"
         class-names="resolve"
         color-scheme="primary"
-        icon="ion-person"
+        icon="person"
         :is-loading="isLoading"
-        @click="() => toggleStatus(STATUS_TYPE.OPEN)"
+        @click="onCmdOpenConversation"
       >
         {{ this.$t('CONVERSATION.HEADER.OPEN_ACTION') }}
       </woot-button>
@@ -38,7 +38,7 @@
         ref="arrowDownButton"
         :color-scheme="buttonClass"
         :disabled="isLoading"
-        icon="ion-arrow-down-b"
+        icon="chevron-down"
         emoji="🔽"
         @click="openDropdown"
       />
@@ -52,12 +52,16 @@
         <woot-dropdown-item v-if="!isPending">
           <woot-button
             variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="book-clock"
             @click="() => toggleStatus(STATUS_TYPE.PENDING)"
           >
             {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
           </woot-button>
         </woot-dropdown-item>
 
+        <woot-dropdown-divider v-if="isOpen" />
         <woot-dropdown-sub-menu
           v-if="isOpen"
           :title="this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE.TITLE')"
@@ -65,6 +69,9 @@
           <woot-dropdown-item>
             <woot-button
               variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="send-clock"
               @click="() => toggleStatus(STATUS_TYPE.SNOOZED, null)"
             >
               {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE.NEXT_REPLY') }}
@@ -73,6 +80,9 @@
           <woot-dropdown-item>
             <woot-button
               variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="dual-screen-clock"
               @click="
                 () => toggleStatus(STATUS_TYPE.SNOOZED, snoozeTimes.tomorrow)
               "
@@ -83,6 +93,9 @@
           <woot-dropdown-item>
             <woot-button
               variant="clear"
+              color-scheme="secondary"
+              size="small"
+              icon="calendar-clock"
               @click="
                 () => toggleStatus(STATUS_TYPE.SNOOZED, snoozeTimes.nextWeek)
               "
@@ -110,6 +123,8 @@ import {
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownSubMenu from 'shared/components/ui/dropdown/DropdownSubMenu.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
+
 import wootConstants from '../../constants';
 import {
   getUnixTime,
@@ -118,12 +133,18 @@ import {
   startOfTomorrow,
   startOfWeek,
 } from 'date-fns';
+import {
+  CMD_REOPEN_CONVERSATION,
+  CMD_RESOLVE_CONVERSATION,
+  CMD_SNOOZE_CONVERSATION,
+} from '../../routes/dashboard/commands/commandBarBusEvents';
 
 export default {
   components: {
     WootDropdownItem,
     WootDropdownMenu,
     WootDropdownSubMenu,
+    WootDropdownDivider,
   },
   mixins: [clickaway, alertMixin, eventListenerMixins],
   props: { conversationId: { type: [String, Number], required: true } },
@@ -135,9 +156,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({
-      currentChat: 'getSelectedChat',
-    }),
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
     isOpen() {
       return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN;
     },
@@ -170,6 +189,16 @@ export default {
       };
     },
   },
+  mounted() {
+    bus.$on(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
+    bus.$on(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
+    bus.$on(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
+  },
+  destroyed() {
+    bus.$off(CMD_SNOOZE_CONVERSATION, this.onCmdSnoozeConversation);
+    bus.$off(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
+    bus.$off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
+  },
   methods: {
     async handleKeyEvents(e) {
       const allConversations = document.querySelectorAll(
@@ -204,6 +233,18 @@ export default {
         }
       }
     },
+    onCmdSnoozeConversation(snoozeType) {
+      this.toggleStatus(
+        this.STATUS_TYPE.SNOOZED,
+        this.snoozeTimes[snoozeType] || null
+      );
+    },
+    onCmdOpenConversation() {
+      this.toggleStatus(this.STATUS_TYPE.OPEN);
+    },
+    onCmdResolveConversation() {
+      this.toggleStatus(this.STATUS_TYPE.RESOLVED);
+    },
     showOpenButton() {
       return this.isResolved || this.isSnoozed;
     },
@@ -244,5 +285,6 @@ export default {
   margin-top: var(--space-micro);
   right: 0;
   max-width: 20rem;
+  min-width: 15.6rem;
 }
 </style>

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;
       }

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

@@ -1,77 +1,37 @@
 <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>
-
-    <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 />
-      <span class="current-user--options icon ion-android-more-vertical" />
-      <options-menu
-        :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @key-shortcut-modal="toggleKeyShortcutModal"
-        @close="toggleOptions"
-      />
-    </div>
-
+  <aside class="woot-sidebar">
+    <primary-sidebar
+      :logo-source="globalConfig.logoThumbnail"
+      :installation-name="globalConfig.installationName"
+      :account-id="accountId"
+      :menu-items="primaryMenuItems"
+      :active-menu-item="activePrimaryMenu.key"
+      @toggle-accounts="toggleAccountModal"
+      @key-shortcut-modal="toggleKeyShortcutModal"
+    />
+    <secondary-sidebar
+      :account-id="accountId"
+      :inboxes="inboxes"
+      :labels="labels"
+      :teams="teams"
+      :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>
@@ -82,17 +42,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 { getSidebarItems } from './config/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 './sidebarComponents/Primary';
+import SecondarySidebar from './sidebarComponents/Secondary';
 import WootKeyShortcutModal from 'components/widgets/modal/WootKeyShortcutModal';
 import {
   hasPressedAltAndCKey,
@@ -107,14 +64,11 @@ import router from '../../routes';
 
 export default {
   components: {
-    AgentDetails,
-    SidebarItem,
-    AvailabilityStatus,
-    NotificationBell,
-    OptionsMenu,
     AccountSelector,
     AddAccountModal,
     AddLabelModal,
+    PrimarySidebar,
+    SecondarySidebar,
     WootKeyShortcutModal,
   },
   mixins: [adminMixin, alertMixin, eventListenerMixins],
@@ -135,129 +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);
     },
-    accessibleMenuItems() {
-      // get all keys in menuGroup
-      const groupKey = Object.keys(this.sidemenuItems);
+    primaryMenuItems() {
+      const menuItems = this.sideMenuConfig.primaryMenu;
+      return menuItems.filter(menuItem =>
+        menuItem.roles.includes(this.currentRole)
+      );
+    },
+    activeSecondaryMenu() {
+      const { secondaryMenu } = this.sideMenuConfig;
+      const { name: currentRoute } = this.$route;
 
-      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);
+      const activeSecondaryMenu =
+        secondaryMenu.find(menuItem =>
+          menuItem.routes.includes(currentRoute)
+        ) || {};
+      return activeSecondaryMenu;
     },
-    currentRoute() {
-      return this.$store.state.route.name;
-    },
-    shouldShowSidebarItem() {
-      return this.sidemenuItems.common.routes.includes(this.currentRoute);
-    },
-    showShowContactSideMenu() {
-      return this.sidemenuItems.contacts.routes.includes(this.currentRoute);
-    },
-    shouldShowTeams() {
-      return this.shouldShowSidebarItem && this.teams.length;
-    },
-    inboxSection() {
-      return {
-        icon: 'ion-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: 'ion-pound',
-        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: 'ion-pound',
-        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: 'ion-ios-people',
-        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`);
+    activePrimaryMenu() {
+      const activePrimaryMenu =
+        this.primaryMenuItems.find(
+          menuItem => menuItem.key === this.activeSecondaryMenu.parentNav
+        ) || {};
+      return activePrimaryMenu;
     },
   },
   mounted() {
@@ -265,6 +124,7 @@ export default {
     this.$store.dispatch('inboxes/get');
     this.$store.dispatch('notifications/unReadCount');
     this.$store.dispatch('teams/get');
+    this.$store.dispatch('attributes/get');
   },
 
   methods: {
@@ -301,25 +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
-      );
-    },
-    toggleOptions() {
-      this.showOptionsMenu = !this.showOptionsMenu;
-    },
     toggleAccountModal() {
       this.showAccountModal = !this.showAccountModal;
     },
@@ -340,6 +186,13 @@ export default {
 };
 </script>
 
+<style lang="scss" scoped>
+.woot-sidebar {
+  background: var(--white);
+  display: flex;
+}
+</style>
+
 <style lang="scss">
 @import '~dashboard/assets/scss/variables';
 
@@ -353,11 +206,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;
     }
   }
 
@@ -404,7 +257,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>

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

@@ -1,154 +0,0 @@
-<template>
-  <router-link
-    :to="menuItem.toState"
-    tag="li"
-    active-class="active"
-    :class="computedClass"
-  >
-    <a
-      class="sub-menu-title"
-      :class="getMenuItemClass"
-      data-tooltip
-      aria-haspopup="true"
-      :title="menuItem.toolTip"
-    >
-      <div class="wrap">
-        <i :class="menuItem.icon" />
-        {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      </div>
-      <span
-        v-if="showItem(menuItem)"
-        class="child-icon ion-android-add-circle"
-        @click.prevent="newLinkClick(menuItem)"
-      />
-    </a>
-    <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
-      <router-link
-        v-for="child in menuItem.children"
-        :key="child.id"
-        active-class="active flex-container"
-        tag="li"
-        :to="child.toState"
-      >
-        <a href="#" :class="computedChildClass(child)">
-          <div class="wrap">
-            <i
-              v-if="menuItem.key === 'inbox'"
-              class="inbox-icon"
-              :class="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>
-      </router-link>
-    </ul>
-  </router-link>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-
-import router from '../../routes';
-import adminMixin from '../../mixins/isAdmin';
-import { getInboxClassByType } from 'dashboard/helper/inbox';
-export default {
-  mixins: [adminMixin],
-  props: {
-    menuItem: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-  },
-  computed: {
-    ...mapGetters({
-      activeInbox: 'getSelectedInbox',
-    }),
-    getMenuItemClass() {
-      return this.menuItem.cssClass
-        ? `side-menu ${this.menuItem.cssClass}`
-        : 'side-menu';
-    },
-    computedClass() {
-      // If active Inbox is present
-      // donot highlight conversations
-      if (this.activeInbox) return ' ';
-
-      if (
-        this.$store.state.route.name === 'inbox_conversation' &&
-        this.menuItem.toStateName === 'home'
-      ) {
-        return 'active';
-      }
-      return ' ';
-    },
-  },
-  methods: {
-    computedInboxClass(child) {
-      const { type, phoneNumber } = child;
-      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(item) {
-      if (item.newLinkRouteName) {
-        router.push({ name: item.newLinkRouteName, params: { page: 'new' } });
-      } else if (item.showModalForNewItem) {
-        if (item.modalName === 'AddLabel') {
-          this.$emit('add-label');
-        }
-      }
-    },
-    showItem(item) {
-      return this.isAdmin && item.newLink !== undefined;
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-@import '~dashboard/assets/scss/variables';
-
-.sub-menu-title {
-  display: flex;
-  justify-content: space-between;
-}
-
-.wrap {
-  display: flex;
-  align-items: center;
-}
-
-.label-color--display {
-  border-radius: $space-smaller;
-  height: $space-normal;
-  margin-right: $space-small;
-  min-width: $space-normal;
-  width: $space-normal;
-}
-
-.inbox-icon {
-  position: relative;
-  top: -1px;
-  &.ion-ios-email {
-    font-size: var(--font-size-medium);
-  }
-}
-</style>

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),
+  ],
+});

app/javascript/dashboard/components/layout/config/sidebarItems/campaigns.js

@@ -1,30 +1,26 @@
-import { frontendURL } from '../../helper/URLHelper';
+import { frontendURL } from '../../../../helper/URLHelper';
 
 const campaigns = accountId => ({
+  parentNav: 'campaigns',
   routes: ['settings_account_campaigns', 'one_off'],
-  menuItems: {
-    back: {
-      icon: 'ion-ios-arrow-back',
-      label: 'HOME',
-      hasSubMenu: false,
-      toStateName: 'home',
-      toState: frontendURL(`accounts/${accountId}/dashboard`),
-    },
-    ongoingCampaigns: {
-      icon: 'ion-arrow-swap',
+  menuItems: [
+    {
+      icon: 'arrow-swap',
       label: 'ONGOING',
+      key: 'ongoingCampaigns',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
       toStateName: 'settings_account_campaigns',
     },
-    onOffCampaigns: {
-      icon: 'ion-radio-waves',
+    {
+      key: 'oneOffCampaigns',
+      icon: 'sound-source',
       label: 'ONE_OFF',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),
       toStateName: 'one_off',
     },
-  },
+  ],
 });
 
 export default campaigns;

app/javascript/dashboard/components/layout/config/sidebarItems/contacts.js

@@ -0,0 +1,21 @@
+import { frontendURL } from '../../../../helper/URLHelper';
+
+const contacts = accountId => ({
+  parentNav: 'contacts',
+  routes: [
+    'contacts_dashboard',
+    'contact_profile_dashboard',
+    'contacts_labels_dashboard',
+  ],
+  menuItems: [
+    {
+      icon: 'contact-card-group',
+      label: 'ALL_CONTACTS',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/contacts`),
+      toStateName: 'contacts_dashboard',
+    },
+  ],
+});
+
+export default contacts;

app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js

@@ -0,0 +1,37 @@
+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',
+    'conversation_mentions',
+    'conversation_through_mentions',
+  ],
+  menuItems: [
+    {
+      icon: 'chat',
+      label: 'ALL_CONVERSATIONS',
+      key: 'conversations',
+      toState: frontendURL(`accounts/${accountId}/dashboard`),
+      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',
+    },
+  ],
+});
+
+export default conversations;