fixes

Throttle contact_search endpoint to prevent abuse/maintain db perf
ref: https://discord.com/channels/897869226579222540/899920096972111883/1206919316402999326

.env.example

@@ -254,7 +254,6 @@ AZURE_APP_SECRET=
 # Sentiment analysis model file path
 SENTIMENT_FILE_PATH=
 
-
 # Housekeeping/Performance related configurations
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed

.github/CODEOWNERS

@@ -0,0 +1,7 @@
+## All javascript files should be reviewed by pranav before merging
+*.js @pranavrajs
+*.vue @pranavrajs
+
+
+## All enterprise related files should be reviewed by sojan before merging
+/enterprise/* @sojan-official

.github/workflows/logging_percentage_check.yml

@@ -11,7 +11,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Check for log lines and calculate percentage
         run: |

.github/workflows/nightly_installer.yml

@@ -4,7 +4,7 @@
 # # This action will try to install and setup
 # # chatwoot on an Ubuntu 20.04 machine using
 # # the linux installer script.
-# # 
+# #
 # # This is set to run daily at midnight.
 # #
 
@@ -35,7 +35,7 @@ jobs:
       run: |
         sudo ./install.sh --install < input
 
-        #  disabling http verify for now as http 
+        #  disabling http verify for now as http
         #  access to port 3000 fails in gh action env
         #    - name: Verify
         #      if: always()
@@ -45,7 +45,7 @@ jobs:
         #        curl http://localhost:3000/api
 
     - name: Upload chatwoot setup log file as an artifact
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       if: always()
       with:
         name: chatwoot-setup-log-file

.github/workflows/publish_codespace_image.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
 
     - name: Login to GitHub Container Registry
       uses: docker/login-action@v1

.github/workflows/publish_foss_docker.yml

@@ -21,7 +21,7 @@ jobs:
       GIT_REF: ${{ github.head_ref || github.ref_name }} # ref_name to get tags/branches
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v1

.github/workflows/run_foss_spec.yml

@@ -41,7 +41,7 @@ jobs:
         options: --entrypoint redis-server
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
       with:
         ref: ${{ github.event.pull_request.head.ref }}
         repository: ${{ github.event.pull_request.head.repo.full_name }}
@@ -50,7 +50,7 @@ jobs:
       with:
         bundler-cache: true # runs 'bundle install' and caches installed gems automatically
 
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
         node-version: 20
         cache: yarn
@@ -76,11 +76,11 @@ jobs:
     - name: Run backend tests
       run: |
         bundle exec rspec --profile=10 --format documentation
-      env: 
+      env:
         NODE_OPTIONS: --openssl-legacy-provider
 
     - name: Upload rails log folder
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       if: always()
       with:
         name: rails-log-folder

.github/workflows/run_response_bot_spec.yml

@@ -40,7 +40,7 @@ jobs:
         options: --entrypoint redis-server
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
       with:
         ref: ${{ github.event.pull_request.head.ref }}
         repository: ${{ github.event.pull_request.head.repo.full_name }}
@@ -49,7 +49,7 @@ jobs:
       with:
         bundler-cache: true # runs 'bundle install' and caches installed gems automatically
 
-    - uses: actions/setup-node@v3
+    - uses: actions/setup-node@v4
       with:
         node-version: 20
         cache: yarn
@@ -77,7 +77,7 @@ jobs:
           --format documentation
 
     - name: Upload rails log folder
-      uses: actions/upload-artifact@v3
+      uses: actions/upload-artifact@v4
       if: always()
       with:
         name: rails-log-folder

.github/workflows/size-limit.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
@@ -19,7 +19,7 @@ jobs:
         with:
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: 'yarn'
@@ -31,7 +31,7 @@ jobs:
         run: |
           rm -rf enterprise
           rm -rf spec/enterprise
-          
+
       - name: Run asset compile
         run: bundle exec rake assets:precompile
         env:

.rubocop.yml

@@ -2,7 +2,6 @@ require:
   - rubocop-performance
   - rubocop-rails
   - rubocop-rspec
-inherit_from: .rubocop_todo.yml
 
 Layout/LineLength:
   Max: 150
@@ -12,7 +11,8 @@ Metrics/ClassLength:
   Exclude:
     - 'app/models/message.rb'
     - 'app/models/conversation.rb'
-
+Metrics/MethodLength:
+  Max: 19
 RSpec/ExampleLength:
   Max: 25
 Style/Documentation:
@@ -50,6 +50,7 @@ Lint/OrAssignmentToConstant:
   Exclude:
     - 'lib/redis/config.rb'
 Metrics/BlockLength:
+  Max: 30
   Exclude:
     - spec/**/*
     - '**/routes.rb'
@@ -102,84 +103,31 @@ RSpec/FactoryBot/SyntaxMethods:
   Enabled: false
 Naming/VariableNumber:
   Enabled: false
-Metrics/MethodLength:
+Naming/MemoizedInstanceVariableName:
   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'
+    - 'app/models/message.rb'
 Style/GuardClause:
   Exclude:
     - 'app/builders/account_builder.rb'
     - 'app/models/attachment.rb'
     - 'app/models/message.rb'
-    - 'db/migrate/20190819005836_add_missing_indexes_on_taggings.acts_as_taggable_on_engine.rb'
 Metrics/AbcSize:
+  Max: 26
   Exclude:
     - 'app/controllers/concerns/auth_helper.rb'
-    - '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:
-    - 'db/migrate/20190819005836_add_missing_indexes_on_taggings.acts_as_taggable_on_engine.rb'
-Rails/ReversibleMigration:
-  Exclude:
-    - 'db/migrate/20161025070152_removechannelsfrommodels.rb'
-    - 'db/migrate/20161025070645_remchannel.rb'
-    - 'db/migrate/20161025070645_remchannel.rb'
-    - 'db/migrate/20161110102609_removeinboxid.rb'
-    - 'db/migrate/20170519091539_add_avatar_to_fb.rb'
-    - 'db/migrate/20191020085608_rename_old_tables.rb'
-    - 'db/migrate/20191126185833_update_user_invite_foreign_key.rb'
-    - 'db/migrate/20191130164019_add_template_type_to_messages.rb'
-    - 'db/migrate/20210513083044_remove_not_null_from_webhook_url_channel_api.rb'
-Rails/BulkChangeTable:
-  Exclude:
-    - 'db/migrate/20161025070152_removechannelsfrommodels.rb'
-    - 'db/migrate/20200121190901_create_account_users.rb'
-    - 'db/migrate/20170211092540_notnullableusers.rb'
-    - 'db/migrate/20170403095203_contactadder.rb'
-    - 'db/migrate/20170406104018_add_default_status_conv.rb'
-    - 'db/migrate/20170511134418_latlong.rb'
-    - 'db/migrate/20191027054756_create_contact_inboxes.rb'
-    - 'db/migrate/20191130164019_add_template_type_to_messages.rb'
-    - 'db/migrate/20210425093724_convert_integration_hook_settings_field.rb'
 Rails/UniqueValidationWithoutIndex:
   Exclude:
     - 'app/models/channel/twitter_profile.rb'
     - 'app/models/webhook.rb'
     - 'app/models/contact.rb'
     - 'app/models/integrations/hook.rb'
+    - 'app/models/canned_response.rb'
+    - 'app/models/telegram_bot.rb'
 Rails/RenderInline:
   Exclude:
     - 'app/controllers/swagger_controller.rb'
-Performance/CollectionLiteralInLoop:
-  Exclude:
-    - 'db/migrate/20210315101919_enable_email_channel.rb'
 Rails/ThreeStateBooleanColumn:
   Exclude:
-    - 'db/migrate/20200509044639_add_hide_input_flag_to_bot_config.rb'
-    - 'db/migrate/20200605130625_agent_away_message_to_auto_reply.rb'
-    - 'db/migrate/20200606132552_create_labels.rb'
-    - 'db/migrate/20201027135006_create_working_hours.rb'
-    - 'db/migrate/20210112174124_add_hmac_token_to_inbox.rb'
-    - 'db/migrate/20210114202310_create_teams.rb'
-    - 'db/migrate/20210212154240_add_request_for_email_on_channel_web_widget.rb'
-    - 'db/migrate/20210428135041_add_campaigns.rb'
-    - 'db/migrate/20210602182058_add_hmac_to_api_channel.rb'
-    - 'db/migrate/20210609133433_add_email_collect_to_inboxes.rb'
-    - 'db/migrate/20210618095823_add_csat_toggle_for_inbox.rb'
-    - 'db/migrate/20210927062350_add_trigger_only_during_business_hours_collect_to_campaigns.rb'
-    - 'db/migrate/20211027073553_add_imap_smtp_config_to_channel_email.rb'
-    - 'db/migrate/20211109143122_add_tweet_enabled_flag_to_twitter_channel.rb'
-    - 'db/migrate/20211216110209_add_allow_messages_after_resolved_to_inbox.rb'
-    - 'db/migrate/20220116103902_add_open_ssl_verify_mode_to_channel_email.rb'
-    - 'db/migrate/20220216151613_add_open_all_day_to_working_hour.rb'
-    - 'db/migrate/20220511072655_add_archive_column_to_portal.rb'
     - 'db/migrate/20230503101201_create_sla_policies.rb'
 RSpec/IndexedLet:
   Enabled: false
@@ -187,6 +135,8 @@ RSpec/NamedSubject:
   Enabled: false
 
 # we should bring this down
+RSpec/MultipleExpectations:
+  Max: 7
 RSpec/MultipleMemoizedHelpers:
   Max: 14
 
@@ -203,13 +153,4 @@ AllCops:
     - 'config/environments/**/*'
     - 'tmp/**/*'
     - 'storage/**/*'
-    - 'db/migrate/20200225162150_init_schema.rb'
-    - 'db/migrate/20210611180222_create_active_storage_variant_records.active_storage.rb'
-    - 'db/migrate/20210611180221_add_service_name_to_active_storage_blobs.active_storage.rb'
-    - db/migrate/20200309213132_add_account_id_to_agent_bot_inboxes.rb
-    - db/migrate/20200331095710_add_identifier_to_contact.rb
-    - db/migrate/20200429082655_add_medium_to_twilio_sms.rb
-    - db/migrate/20200503151130_add_account_feature_flag.rb
-    - db/migrate/20200927135222_add_last_activity_at_to_conversation.rb
-    - db/migrate/20210306170117_add_last_activity_at_to_contacts.rb
-    - db/migrate/20220809104508_revert_cascading_indexes.rb
+    - 'db/migrate/20230426130150_init_schema.rb'

.rubocop_todo.yml

@@ -1,287 +0,0 @@
-# This configuration was generated by
-# `rubocop --auto-gen-config`
-# on 2019-10-23 16:47:02 +0530 using RuboCop version 0.73.0.
-# The point is for the user to remove these configuration records
-# one by one as the offenses are removed from the code base.
-# Note that changes in the inspected code, or installation of new
-# versions of RuboCop, may require this file to be generated again.
-
-# Offense count: 1
-Lint/DuplicateMethods:
-  Exclude:
-    - 'app/controllers/api/v1/reports_controller.rb'
-
-# Offense count: 1
-Lint/RescueException:
-  Exclude:
-    - 'app/builders/messages/message_builder.rb'
-
-# Offense count: 4
-Lint/ShadowingOuterLocalVariable:
-  Exclude:
-    - 'app/controllers/api/v1/reports_controller.rb'
-
-# Offense count: 3
-# Configuration parameters: AllowKeywordBlockArguments.
-Lint/UnderscorePrefixedVariableName:
-  Exclude:
-    - 'app/models/account.rb'
-    - 'deploy/before_symlink.rb'
-
-# Offense count: 18
-Lint/UselessAssignment:
-  Exclude:
-    - 'app/controllers/api/v1/callbacks_controller.rb'
-    - 'app/controllers/api/v1/facebook_indicators_controller.rb'
-    - 'app/listeners/action_cable_listener.rb'
-    - 'app/listeners/reporting_listener.rb'
-    - 'app/models/channel/facebook_page.rb'
-    - 'app/models/facebook_page.rb'
-
-# Offense count: 14
-Metrics/AbcSize:
-  Max: 26
-
-# Offense count: 1
-# Configuration parameters: CountComments, ExcludedMethods.
-# ExcludedMethods: refine
-Metrics/BlockLength:
-  Max: 30
-
-# Offense count: 2
-Metrics/CyclomaticComplexity:
-  Max: 7
-
-# Offense count: 10
-# Configuration parameters: CountComments, ExcludedMethods.
-Metrics/MethodLength:
-  Max: 19
-
-# Offense count: 1
-Metrics/PerceivedComplexity:
-  Max: 8
-
-# Offense count: 6
-Naming/AccessorMethodName:
-  Exclude:
-    - 'app/builders/report_builder.rb'
-    - 'app/controllers/api/v1/accounts_controller.rb'
-    - 'app/controllers/api/v1/callbacks_controller.rb'
-    - 'app/controllers/api/v1/conversations_controller.rb'
-
-# Offense count: 9
-# Configuration parameters: EnforcedStyleForLeadingUnderscores.
-# SupportedStylesForLeadingUnderscores: disallowed, required, optional
-Naming/MemoizedInstanceVariableName:
-  Exclude:
-    - 'app/controllers/api/base_controller.rb'
-    - 'app/controllers/api/v1/conversations_controller.rb'
-    - 'app/controllers/api/v1/webhooks_controller.rb'
-    - 'app/controllers/application_controller.rb'
-    - 'app/models/message.rb'
-    - 'lib/integrations/widget/outgoing_message_builder.rb'
-
-# Offense count: 4
-# Cop supports --auto-correct.
-# Configuration parameters: MaxKeyValuePairs.
-Performance/RedundantMerge:
-  Exclude:
-    - 'app/controllers/api/v1/callbacks_controller.rb'
-    - 'app/models/message.rb'
-
-# Offense count: 1
-# Cop supports --auto-correct.
-Performance/StringReplacement:
-  Exclude:
-    - 'lib/events/base.rb'
-
-# Offense count: 4
-# Configuration parameters: Prefixes.
-# Prefixes: when, with, without
-RSpec/ContextWording:
-  Exclude:
-    - 'spec/models/contact_spec.rb'
-    - 'spec/models/user_spec.rb'
-
-# Offense count: 1
-RSpec/DescribeClass:
-  Exclude:
-    - 'spec/mailers/confirmation_instructions_spec.rb'
-
-# Offense count: 1
-RSpec/DescribeSymbol:
-  Exclude:
-    - 'spec/mailers/confirmation_instructions_spec.rb'
-
-# Offense count: 1
-# Cop supports --auto-correct.
-# Configuration parameters: AllowConsecutiveOneLiners.
-RSpec/EmptyLineAfterExample:
-  Exclude:
-    - 'spec/models/user_spec.rb'
-
-# Offense count: 1
-# Configuration parameters: Max.
-RSpec/ExampleLength:
-  Exclude:
-    - 'spec/models/conversation_spec.rb'
-
-# Offense count: 1
-# Cop supports --auto-correct.
-# Configuration parameters: EnforcedStyle.
-# SupportedStyles: single_line_only, single_statement_only, disallow
-RSpec/ImplicitSubject:
-  Exclude:
-    - 'spec/models/user_spec.rb'
-
-# Offense count: 7
-# Configuration parameters: AggregateFailuresByDefault.
-RSpec/MultipleExpectations:
-  Max: 7
-
-# Offense count: 1
-# Cop supports --auto-correct.
-# Configuration parameters: EnforcedStyle.
-# SupportedStyles: not_to, to_not
-RSpec/NotToNot:
-  Exclude:
-    - 'spec/mailers/confirmation_instructions_spec.rb'
-
-# Offense count: 1
-# Configuration parameters: IgnoreNameless, IgnoreSymbolicNames.
-RSpec/VerifiedDoubles:
-  Exclude:
-    - 'spec/models/conversation_spec.rb'
-
-# Offense count: 4
-# Cop supports --auto-correct.
-Rails/ActiveRecordAliases:
-  Exclude:
-    - 'app/controllers/api/v1/agents_controller.rb'
-    - 'app/controllers/api/v1/callbacks_controller.rb'
-    - 'app/controllers/api/v1/canned_responses_controller.rb'
-    - 'app/controllers/api/v1/contacts_controller.rb'
-
-# Offense count: 2
-# Cop supports --auto-correct.
-Rails/BelongsTo:
-  Exclude:
-    - 'app/models/message.rb'
-    - 'app/models/user.rb'
-
-# Offense count: 6
-# Cop supports --auto-correct.
-# Configuration parameters: Include.
-# Include: app/models/**/*.rb
-Rails/EnumHash:
-  Exclude:
-    - 'app/models/attachment.rb'
-    - 'app/models/conversation.rb'
-    - 'app/models/message.rb'
-    - 'app/models/user.rb'
-
-# Offense count: 1
-# Configuration parameters: Include.
-# Include: app/models/**/*.rb
-Rails/HasManyOrHasOneDependent:
-  Exclude:
-    - 'app/models/user.rb'
-
-# Offense count: 1
-# Configuration parameters: Include.
-# Include: app/models/**/*.rb
-Rails/InverseOf:
-  Exclude:
-    - 'app/models/user.rb'
-
-# Offense count: 1
-# Configuration parameters: Include.
-# Include: app/controllers/**/*.rb
-Rails/LexicallyScopedActionFilter:
-  Exclude:
-    - 'app/controllers/home_controller.rb'
-
-# Offense count: 2
-# Configuration parameters: Include.
-# Include: app/**/*.rb, config/**/*.rb, db/**/*.rb, lib/**/*.rb
-Rails/Output:
-  Exclude:
-    - 'app/bot/bot.rb'
-    - 'app/builders/account_builder.rb'
-
-# Offense count: 7
-# Cop supports --auto-correct.
-# Configuration parameters: EnforcedStyle.
-# SupportedStyles: strict, flexible
-Rails/TimeZone:
-  Exclude:
-    - 'app/builders/report_builder.rb'
-    - 'lib/reports/update_account_identity.rb'
-    - 'lib/reports/update_agent_identity.rb'
-    - 'lib/reports/update_identity.rb'
-    - 'spec/models/conversation_spec.rb'
-
-# Offense count: 8
-# Cop supports --auto-correct.
-# Configuration parameters: Include.
-# Include: app/models/**/*.rb
-Rails/Validation:
-  Exclude:
-    - 'app/models/canned_response.rb'
-    - 'app/models/channel/facebook_page.rb'
-    - 'app/models/facebook_page.rb'
-    - 'app/models/telegram_bot.rb'
-    - 'app/models/user.rb'
-
-# Offense count: 15
-# Cop supports --auto-correct.
-# Configuration parameters: AutoCorrect, EnforcedStyle.
-# SupportedStyles: nested, compact
-Style/ClassAndModuleChildren:
-  Exclude:
-    - 'app/builders/messages/message_builder.rb'
-    - 'app/controllers/api/v1/inbox_members_controller.rb'
-    - 'app/models/channel/facebook_page.rb'
-    - 'app/models/channel/web_widget.rb'
-    - 'app/presenters/conversations/event_data_presenter.rb'
-    - 'app/services/facebook/send_reply_service.rb'
-    - 'lib/integrations/facebook/delivery_status.rb'
-    - 'lib/integrations/facebook/message_creator.rb'
-    - 'lib/integrations/facebook/message_parser.rb'
-    - 'lib/integrations/widget/incoming_message_builder.rb'
-
-# Offense count: 4
-Style/CommentedKeyword:
-  Exclude:
-    - 'app/controllers/api/v1/callbacks_controller.rb'
-    - 'app/controllers/api/v1/conversations/assignments_controller.rb'
-    - 'app/controllers/api/v1/conversations/labels_controller.rb'
-    - 'app/controllers/api/v1/labels_controller.rb'
-
-# Offense count: 1
-# Configuration parameters: AllowIfModifier.
-Style/IfInsideElse:
-  Exclude:
-    - 'app/finders/conversation_finder.rb'
-
-# Offense count: 1
-Style/MixinUsage:
-  Exclude:
-    - 'app/bot/bot.rb'
-
-# Offense count: 1
-# Cop supports --auto-correct.
-# Configuration parameters: AutoCorrect, EnforcedStyle, IgnoredMethods.
-# SupportedStyles: predicate, comparison
-Style/NumericPredicate:
-  Exclude:
-    - 'spec/**/*'
-    - 'app/controllers/api/v1/callbacks_controller.rb'
-
-# Offense count: 1
-# Cop supports --auto-correct.
-# Configuration parameters: EnforcedStyle.
-# SupportedStyles: implicit, explicit
-Style/RescueStandardError:
-  Exclude:
-    - 'app/models/channel/facebook_page.rb'

Gemfile.lock

@@ -277,7 +277,7 @@ GEM
     gli (2.21.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    gmail_xoauth (0.4.2)
+    gmail_xoauth (0.4.3)
       oauth (>= 0.3.6)
     google-apis-core (0.11.0)
       addressable (~> 2.5, >= 2.5.1)
@@ -316,16 +316,16 @@ GEM
     google-cloud-translate-v3 (0.6.0)
       gapic-common (>= 0.17.1, < 2.a)
       google-cloud-errors (~> 1.0)
-    google-protobuf (3.22.3)
-    google-protobuf (3.22.3-arm64-darwin)
-    google-protobuf (3.22.3-x86_64-darwin)
-    google-protobuf (3.22.3-x86_64-linux)
+    google-protobuf (3.25.2)
+    google-protobuf (3.25.2-arm64-darwin)
+    google-protobuf (3.25.2-x86_64-darwin)
+    google-protobuf (3.25.2-x86_64-linux)
     googleapis-common-protos (1.4.0)
       google-protobuf (~> 3.14)
       googleapis-common-protos-types (~> 1.2)
       grpc (~> 1.27)
-    googleapis-common-protos-types (1.6.0)
-      google-protobuf (~> 3.14)
+    googleapis-common-protos-types (1.11.0)
+      google-protobuf (~> 3.18)
     googleauth (1.5.2)
       faraday (>= 0.17.3, < 3.a)
       jwt (>= 1.4, < 3.0)
@@ -335,13 +335,13 @@ GEM
       signet (>= 0.16, < 2.a)
     groupdate (6.2.1)
       activesupport (>= 5.2)
-    grpc (1.54.0)
+    grpc (1.54.3)
       google-protobuf (~> 3.21)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.54.0-x86_64-darwin)
+    grpc (1.54.3-x86_64-darwin)
       google-protobuf (~> 3.21)
       googleapis-common-protos-types (~> 1.0)
-    grpc (1.54.0-x86_64-linux)
+    grpc (1.54.3-x86_64-linux)
       google-protobuf (~> 3.21)
       googleapis-common-protos-types (~> 1.0)
     haikunator (1.1.1)
@@ -488,14 +488,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.0)
-    nokogiri (1.16.0)
+    nokogiri (1.16.2)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.0-arm64-darwin)
+    nokogiri (1.16.2-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.0-x86_64-darwin)
+    nokogiri (1.16.2-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.0-x86_64-linux)
+    nokogiri (1.16.2-x86_64-linux)
       racc (~> 1.4)
     numo-narray (0.9.2.1)
     oauth (1.1.0)
@@ -794,7 +794,7 @@ GEM
     valid_email2 (4.0.6)
       activemodel (>= 3.2)
       mail (~> 2.5)
-    version_gem (1.1.2)
+    version_gem (1.1.3)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2017-2021 Chatwoot Inc.
+Copyright (c) 2017-2024 Chatwoot Inc.
 
 Portions of this software are licensed as follows:
 

app/assets/stylesheets/administrate/custom_styles.scss

@@ -9,7 +9,7 @@
   padding: 4px 12px;
 
   .icon-container {
-    margin-right: 4px;
+    margin-right: 2px;
 
   }
 

app/builders/account_builder.rb

@@ -2,7 +2,7 @@
 
 class AccountBuilder
   include CustomExceptions::Account
-  pattr_initialize [:account_name!, :email!, :confirmed, :user, :user_full_name, :user_password, :super_admin, :locale]
+  pattr_initialize [:account_name, :email!, :confirmed, :user, :user_full_name, :user_password, :super_admin, :locale]
 
   def perform
     if @user.nil?
@@ -15,12 +15,22 @@ class AccountBuilder
     end
     [@user, @account]
   rescue StandardError => e
-    puts e.inspect
+    Rails.logger.debug e.inspect
     raise e
   end
 
   private
 
+  def user_full_name
+    # the empty string ensures that not-null constraint is not violated
+    @user_full_name || ''
+  end
+
+  def account_name
+    # the empty string ensures that not-null constraint is not violated
+    @account_name || ''
+  end
+
   def validate_email
     address = ValidEmail2::Address.new(@email)
     if address.valid? # && !address.disposable?
@@ -39,7 +49,7 @@ class AccountBuilder
   end
 
   def create_account
-    @account = Account.create!(name: @account_name, locale: I18n.locale)
+    @account = Account.create!(name: account_name, locale: I18n.locale)
     Current.account = @account
   end
 
@@ -64,7 +74,7 @@ class AccountBuilder
     @user = User.new(email: @email,
                      password: user_password,
                      password_confirmation: user_password,
-                     name: @user_full_name)
+                     name: user_full_name)
     @user.type = 'SuperAdmin' if @super_admin
     @user.confirm if @confirmed
     @user.save!

app/builders/agent_builder.rb

@@ -0,0 +1,60 @@
+# The AgentBuilder class is responsible for creating a new agent.
+# It initializes with necessary attributes and provides a perform method
+# to create a user and account user in a transaction.
+class AgentBuilder
+  # Initializes an AgentBuilder with necessary attributes.
+  # @param email [String] the email of the user.
+  # @param name [String] the name of the user.
+  # @param role [String] the role of the user, defaults to 'agent' if not provided.
+  # @param inviter [User] the user who is inviting the agent (Current.user in most cases).
+  # @param availability [String] the availability status of the user, defaults to 'offline' if not provided.
+  # @param auto_offline [Boolean] the auto offline status of the user.
+  pattr_initialize [:email, { name: '' }, :inviter, :account, { role: :agent }, { availability: :offline }, { auto_offline: false }]
+
+  # Creates a user and account user in a transaction.
+  # @return [User] the created user.
+  def perform
+    ActiveRecord::Base.transaction do
+      @user = find_or_create_user
+      send_confirmation_if_required
+      create_account_user
+    end
+    @user
+  end
+
+  private
+
+  # Finds a user by email or creates a new one with a temporary password.
+  # @return [User] the found or created user.
+  def find_or_create_user
+    user = User.find_by(email: email)
+    return user if user
+
+    temp_password = "1!aA#{SecureRandom.alphanumeric(12)}"
+    User.create!(email: email, name: name, password: temp_password, password_confirmation: temp_password)
+  end
+
+  # Sends confirmation instructions if the user is persisted and not confirmed.
+  def send_confirmation_if_required
+    @user.send_confirmation_instructions if user_needs_confirmation?
+  end
+
+  # Checks if the user needs confirmation.
+  # @return [Boolean] true if the user is persisted and not confirmed, false otherwise.
+  def user_needs_confirmation?
+    @user.persisted? && !@user.confirmed?
+  end
+
+  # Creates an account user linking the user to the current account.
+  def create_account_user
+    AccountUser.create!({
+      account_id: account.id,
+      user_id: @user.id,
+      inviter_id: inviter.id
+    }.merge({
+      role: role,
+      availability: availability,
+      auto_offline: auto_offline
+    }.compact))
+  end
+end

app/builders/v2/reports/agent_summary_builder.rb

@@ -0,0 +1,53 @@
+class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
+  pattr_initialize [:account!, :params!]
+
+  def build
+    set_grouped_conversations_count
+    set_grouped_avg_reply_time
+    set_grouped_avg_first_response_time
+    set_grouped_avg_resolution_time
+    prepare_report
+  end
+
+  private
+
+  def set_grouped_conversations_count
+    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('assignee_id').count
+  end
+
+  def set_grouped_avg_resolution_time
+    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
+  end
+
+  def set_grouped_avg_first_response_time
+    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
+  end
+
+  def set_grouped_avg_reply_time
+    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
+  end
+
+  def group_by_key
+    :user_id
+  end
+
+  def reporting_events
+    @reporting_events ||= Current.account.reporting_events.where(created_at: range)
+  end
+
+  def prepare_report
+    account.account_users.each_with_object([]) do |account_user, arr|
+      arr << {
+        id: account_user.user_id,
+        conversations_count: @grouped_conversations_count[account_user.user_id],
+        avg_resolution_time: @grouped_avg_resolution_time[account_user.user_id],
+        avg_first_response_time: @grouped_avg_first_response_time[account_user.user_id],
+        avg_reply_time: @grouped_avg_reply_time[account_user.user_id]
+      }
+    end
+  end
+
+  def average_value_key
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+  end
+end

app/builders/v2/reports/base_summary_builder.rb

@@ -0,0 +1,17 @@
+class V2::Reports::BaseSummaryBuilder
+  include DateRangeHelper
+
+  private
+
+  def group_by_key
+    # Override this method
+  end
+
+  def get_grouped_average(events)
+    events.group(group_by_key).average(average_value_key)
+  end
+
+  def average_value_key
+    params[:business_hours].present? ? :value_in_business_hours : :value
+  end
+end

app/builders/v2/reports/team_summary_builder.rb

@@ -0,0 +1,49 @@
+class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
+  pattr_initialize [:account!, :params!]
+
+  def build
+    set_grouped_conversations_count
+    set_grouped_avg_reply_time
+    set_grouped_avg_first_response_time
+    set_grouped_avg_resolution_time
+    prepare_report
+  end
+
+  private
+
+  def set_grouped_conversations_count
+    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('team_id').count
+  end
+
+  def set_grouped_avg_resolution_time
+    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
+  end
+
+  def set_grouped_avg_first_response_time
+    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
+  end
+
+  def set_grouped_avg_reply_time
+    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
+  end
+
+  def reporting_events
+    @reporting_events ||= Current.account.reporting_events.where(created_at: range).joins(:conversation)
+  end
+
+  def group_by_key
+    'conversations.team_id'
+  end
+
+  def prepare_report
+    account.teams.each_with_object([]) do |team, arr|
+      arr << {
+        id: team.id,
+        conversations_count: @grouped_conversations_count[team.id],
+        avg_resolution_time: @grouped_avg_resolution_time[team.id],
+        avg_first_response_time: @grouped_avg_first_response_time[team.id],
+        avg_reply_time: @grouped_avg_reply_time[team.id]
+      }
+    end
+  end
+end

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

@@ -1,16 +1,26 @@
 class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
-  before_action :fetch_agent, except: [:create, :index]
+  before_action :fetch_agent, except: [:create, :index, :bulk_create]
   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]
+  before_action :validate_limit_for_bulk_create, only: [:bulk_create]
 
   def index
     @agents = agents
   end
 
-  def create; end
+  def create
+    builder = AgentBuilder.new(
+      email: new_agent_params['email'],
+      name: new_agent_params['name'],
+      role: new_agent_params['role'],
+      availability: new_agent_params['availability'],
+      auto_offline: new_agent_params['auto_offline'],
+      inviter: current_user,
+      account: Current.account
+    )
+
+    builder.perform
+  end
 
   def update
     @agent.update!(agent_params.slice(:name).compact)
@@ -23,6 +33,25 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     head :ok
   end
 
+  def bulk_create
+    emails = params[:emails]
+
+    emails.each do |email|
+      builder = AgentBuilder.new(
+        email: email,
+        name: email.split('@').first,
+        inviter: current_user,
+        account: Current.account
+      )
+      begin
+        builder.perform
+      rescue ActiveRecord::RecordInvalid => e
+        Rails.logger.info "[Agent#bulk_create] ignoring email #{email}, errors: #{e.record.errors}"
+      end
+    end
+    head :ok
+  end
+
   private
 
   def check_authorization
@@ -33,47 +62,34 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     @agent = agents.find(params[:id])
   end
 
-  def find_user
-    @user =  User.find_by(email: new_agent_params[:email])
-  end
-
-  # TODO: move this to a builder and combine the save account user method into a builder
-  # ensure the account user association is also created in a single transaction
-  def create_user
-    return @user.send_confirmation_instructions if @user
-
-    @user = User.create!(new_agent_params.slice(:email, :name, :password, :password_confirmation))
-  end
-
-  def save_account_user
-    AccountUser.create!({
-      account_id: Current.account.id,
-      user_id: @user.id,
-      inviter_id: current_user.id
-    }.merge({
-      role: new_agent_params[:role],
-      availability: new_agent_params[:availability],
-      auto_offline: new_agent_params[:auto_offline]
-    }.compact))
-  end
-
   def agent_params
     params.require(:agent).permit(:name, :email, :name, :role, :availability, :auto_offline)
   end
 
   def new_agent_params
-    # intial string ensures the password requirements are met
-    temp_password = "1!aA#{SecureRandom.alphanumeric(12)}"
     params.require(:agent).permit(:email, :name, :role, :availability, :auto_offline)
-          .merge!(password: temp_password, password_confirmation: temp_password, inviter: current_user)
   end
 
   def agents
     @agents ||= Current.account.users.order_by_full_name.includes(:account_users, { avatar_attachment: [:blob] })
   end
 
+  def validate_limit_for_bulk_create
+    limit_available = params[:emails].count <= available_agent_count
+
+    render_payment_required('Account limit exceeded. Please purchase more licenses') unless limit_available
+  end
+
   def validate_limit
-    render_payment_required('Account limit exceeded. Please purchase more licenses') if agents.count >= Current.account.usage_limits[:agents]
+    render_payment_required('Account limit exceeded. Please purchase more licenses') unless can_add_agent?
+  end
+
+  def available_agent_count
+    Current.account.usage_limits[:agents] - agents.count
+  end
+
+  def can_add_agent?
+    available_agent_count.positive?
   end
 
   def delete_user_record(agent)

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

@@ -2,7 +2,7 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
   RESULTS_PER_PAGE = 15
   include DateRangeHelper
 
-  before_action :fetch_notification, only: [:update, :destroy, :snooze]
+  before_action :fetch_notification, only: [:update, :destroy, :snooze, :unread]
   before_action :set_primary_actor, only: [:read_all]
   before_action :set_current_page, only: [:index]
 
@@ -29,11 +29,25 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
     render json: @notification
   end
 
+  def unread
+    @notification.update(read_at: nil)
+    render json: @notification
+  end
+
   def destroy
     @notification.destroy
     head :ok
   end
 
+  def destroy_all
+    if params[:type] == 'read'
+      ::Notification::DeleteNotificationJob.perform_later(Current.user, type: :read)
+    else
+      ::Notification::DeleteNotificationJob.perform_later(Current.user, type: :all)
+    end
+    head :ok
+  end
+
   def unread_count
     @unread_count = notification_finder.unread_count
     render json: @unread_count

app/controllers/api/v1/accounts_controller.rb

@@ -5,11 +5,13 @@ class Api::V1::AccountsController < Api::BaseController
   skip_before_action :authenticate_user!, :set_current_user, :handle_with_exception,
                      only: [:create], raise: false
   before_action :check_signup_enabled, only: [:create]
+  before_action :ensure_account_name, only: [:create]
   before_action :validate_captcha, only: [:create]
   before_action :fetch_account, except: [:create]
   before_action :check_authorization, except: [:create]
 
   rescue_from CustomExceptions::Account::InvalidEmail,
+              CustomExceptions::Account::InvalidParams,
               CustomExceptions::Account::UserExists,
               CustomExceptions::Account::UserErrors,
               with: :render_error_response
@@ -38,11 +40,13 @@ class Api::V1::AccountsController < Api::BaseController
 
   def cache_keys
     expires_in 10.seconds, public: false, stale_while_revalidate: 5.minutes
-    render json: { cache_keys: get_cache_keys }, status: :ok
+    render json: { cache_keys: cache_keys_for_account }, status: :ok
   end
 
   def update
-    @account.update!(account_params.slice(:name, :locale, :domain, :support_email, :auto_resolve_duration))
+    @account.assign_attributes(account_params.slice(:name, :locale, :domain, :support_email, :auto_resolve_duration))
+    @account.custom_attributes.merge!(custom_attributes_params)
+    @account.save!
   end
 
   def update_active_at
@@ -53,7 +57,18 @@ class Api::V1::AccountsController < Api::BaseController
 
   private
 
-  def get_cache_keys
+  def ensure_account_name
+    # ensure that account_name and user_full_name is present
+    # this is becuase the account builder and the models validations are not triggered
+    # this change is to align the behaviour with the v2 accounts controller
+    # since these values are not required directly there
+    return if account_params[:account_name].present?
+    return if account_params[:user_full_name].present?
+
+    raise CustomExceptions::Account::InvalidParams.new({})
+  end
+
+  def cache_keys_for_account
     {
       label: fetch_value_for_key(params[:id], Label.name.underscore),
       inbox: fetch_value_for_key(params[:id], Inbox.name.underscore),
@@ -70,6 +85,10 @@ class Api::V1::AccountsController < Api::BaseController
     params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :auto_resolve_duration, :user_full_name)
   end
 
+  def custom_attributes_params
+    params.permit(:industry, :company_size, :timezone)
+  end
+
   def check_signup_enabled
     raise ActionController::RoutingError, 'Not Found' if GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') == 'false'
   end

app/controllers/api/v1/profiles_controller.rb

@@ -10,7 +10,9 @@ class Api::V1::ProfilesController < Api::BaseController
       @user.update!(password_params.except(:current_password))
     end
 
-    @user.update!(profile_params)
+    @user.assign_attributes(profile_params)
+    @user.custom_attributes.merge!(custom_attributes_params)
+    @user.save!
   end
 
   def avatar
@@ -31,6 +33,11 @@ class Api::V1::ProfilesController < Api::BaseController
     head :ok
   end
 
+  def resend_confirmation
+    @user.send_confirmation_instructions unless @user.confirmed?
+    head :ok
+  end
+
   private
 
   def set_user
@@ -57,6 +64,10 @@ class Api::V1::ProfilesController < Api::BaseController
     )
   end
 
+  def custom_attributes_params
+    params.require(:profile).permit(:phone_number)
+  end
+
   def password_params
     params.require(:profile).permit(
       :current_password,

app/controllers/api/v2/accounts/summary_reports_controller.rb

@@ -0,0 +1,36 @@
+class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
+  before_action :check_authorization
+  before_action :prepare_builder_params, only: [:agent, :team]
+
+  def agent
+    render_report_with(V2::Reports::AgentSummaryBuilder)
+  end
+
+  def team
+    render_report_with(V2::Reports::TeamSummaryBuilder)
+  end
+
+  private
+
+  def check_authorization
+    authorize :report, :view?
+  end
+
+  def prepare_builder_params
+    @builder_params = {
+      since: permitted_params[:since],
+      until: permitted_params[:until],
+      business_hours: ActiveModel::Type::Boolean.new.cast(permitted_params[:business_hours])
+    }
+  end
+
+  def render_report_with(builder_class)
+    builder = builder_class.new(account: Current.account, params: @builder_params)
+    data = builder.build
+    render json: data
+  end
+
+  def permitted_params
+    params.permit(:since, :until, :business_hours)
+  end
+end

app/controllers/api/v2/accounts_controller.rb

@@ -0,0 +1,56 @@
+class Api::V2::AccountsController < Api::BaseController
+  include AuthHelper
+
+  skip_before_action :authenticate_user!, :set_current_user, :handle_with_exception,
+                     only: [:create], raise: false
+  before_action :check_signup_enabled, only: [:create]
+  before_action :validate_captcha, only: [:create]
+  before_action :fetch_account, except: [:create]
+  before_action :check_authorization, except: [:create]
+
+  rescue_from CustomExceptions::Account::InvalidEmail,
+              CustomExceptions::Account::UserExists,
+              CustomExceptions::Account::UserErrors,
+              with: :render_error_response
+
+  def create
+    @user, @account = AccountBuilder.new(
+      email: account_params[:email],
+      user_password: account_params[:password],
+      locale: account_params[:locale],
+      user: current_user
+    ).perform
+
+    fetch_account_and_user_info
+
+    if @user
+      send_auth_headers(@user)
+      render 'api/v1/accounts/create', format: :json, locals: { resource: @user }
+    else
+      render_error_response(CustomExceptions::Account::SignupFailed.new({}))
+    end
+  end
+
+  private
+
+  def fetch_account_and_user_info; end
+
+  def fetch_account
+    @account = current_user.accounts.find(params[:id])
+    @current_account_user = @account.account_users.find_by(user_id: current_user.id)
+  end
+
+  def account_params
+    params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :auto_resolve_duration, :user_full_name)
+  end
+
+  def check_signup_enabled
+    raise ActionController::RoutingError, 'Not Found' if GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') == 'false'
+  end
+
+  def validate_captcha
+    raise ActionController::InvalidAuthenticityToken, 'Invalid Captcha' unless ChatwootCaptcha.new(params[:h_captcha_client_response]).valid?
+  end
+end
+
+Api::V2::AccountsController.prepend_mod_with('Api::V2::AccountsController')

app/controllers/concerns/access_token_auth_helper.rb

@@ -1,7 +1,8 @@
 module AccessTokenAuthHelper
   BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[toggle_status create],
-    'api/v1/accounts/conversations/messages' => ['create']
+    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create],
+    'api/v1/accounts/conversations/messages' => ['create'],
+    'api/v1/accounts/conversations/assignments' => ['create']
   }.freeze
 
   def ensure_access_token

app/controllers/concerns/ensure_current_account_helper.rb

@@ -25,6 +25,6 @@ module EnsureCurrentAccountHelper
   end
 
   def account_accessible_for_bot?(account)
-    render_unauthorized('You are not authorized to access this account') unless @resource.agent_bot_inboxes.find_by(account_id: account.id)
+    render_unauthorized('Bot is not authorized to access this account') unless @resource.agent_bot_inboxes.find_by(account_id: account.id)
   end
 end

app/controllers/super_admin/app_configs_controller.rb

@@ -22,19 +22,24 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
       i.value = value
       i.save!
     end
-    # rubocop:disable Rails/I18nLocaleTexts
-    redirect_to super_admin_settings_path, notice: 'App Configs updated successfully'
-    # rubocop:enable Rails/I18nLocaleTexts
+    redirect_to super_admin_settings_path, notice: "App Configs - #{@config.titleize} updated successfully"
   end
 
   private
 
   def set_config
-    @config = params[:config]
+    @config = params[:config] || 'general'
   end
 
   def allowed_configs
-    @allowed_configs = %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET]
+    @allowed_configs = case @config
+                       when 'facebook'
+                         %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT]
+                       when 'email'
+                         ['MAILER_INBOUND_EMAIL_DOMAIN']
+                       else
+                         %w[ENABLE_ACCOUNT_SIGNUP]
+                       end
   end
 end
 

app/controllers/super_admin/instance_statuses_controller.rb

@@ -28,8 +28,7 @@ class SuperAdmin::InstanceStatusesController < SuperAdmin::ApplicationController
   end
 
   def sha
-    sha = `git rev-parse HEAD`
-    @metrics['Git SHA'] = sha.presence || 'n/a'
+    @metrics['Git SHA'] = GIT_HASH
   end
 
   def postgres_status

app/finders/notification_finder.rb

@@ -26,6 +26,7 @@ class NotificationFinder
 
   def set_up
     find_all_notifications
+    filter_by_read_status
     filter_by_status
   end
 
@@ -37,11 +38,15 @@ class NotificationFinder
     @notifications = @notifications.where('snoozed_until > ?', DateTime.now.utc) if params[:status] == 'snoozed'
   end
 
+  def filter_by_read_status
+    @notifications = @notifications.where.not(read_at: nil) if params[:type] == 'read'
+  end
+
   def current_page
     params[:page] || 1
   end
 
   def notifications
-    @notifications.page(current_page).per(RESULTS_PER_PAGE).order(last_activity_at: :desc)
+    @notifications.page(current_page).per(RESULTS_PER_PAGE).order(last_activity_at: params[:sort_order] || :desc)
   end
 end

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

@@ -15,8 +15,8 @@ module Api::V2::Accounts::HeatmapHelper
     dates = data.pluck(:date).uniq.sort
 
     # add the dates as the first row, leave an empty cell for the hour column
-    # e.g. [nil, '2023-01-01', '2023-1-02', '2023-01-03']
-    result_arr << ([nil] + dates)
+    # e.g. ['Start of the hour', '2023-01-01', '2023-1-02', '2023-01-03']
+    result_arr << (['Start of the hour'] + dates)
 
     # group the data by hour, we do not need to sort it, because the data is already sorted
     # given it starts from the beginning of the day
@@ -25,7 +25,7 @@ module Api::V2::Accounts::HeatmapHelper
     # value = [{date: 2023-01-01, value: 1}, {date: 2023-01-02, value: 1}, {date: 2023-01-03, value: 1}, ...]
     data.group_by { |d| d[:hour] }.each do |hour, items|
       # create a new row for each hour
-      row = [hour]
+      row = [format('%02d:00', hour)]
 
       # group the items by date, so we can easily access the value for each date
       # grouped values will be a hasg with the date as the key, and the value as the value
@@ -37,7 +37,7 @@ module Api::V2::Accounts::HeatmapHelper
         row << (grouped_values[date][0][:value] if grouped_values[date].is_a?(Array))
       end
 
-      # row will look like [22, 0, 0, 1, 4, 6, 7, 4]
+      # row will look like ['22:00', 0, 0, 1, 4, 6, 7, 4]
       # add the row to the result array
 
       result_arr << row
@@ -46,12 +46,12 @@ module Api::V2::Accounts::HeatmapHelper
     # return the resultant array
     # the result looks like this
     # [
-    #   [nil, '2023-01-01', '2023-1-02', '2023-01-03'],
-    #   [0, 0, 0, 0],
-    #   [1, 0, 0, 0],
-    #   [2, 0, 0, 0],
-    #   [3, 0, 0, 0],
-    #   [4, 0, 0, 0],
+    #   ['Start of the hour', '2023-01-01', '2023-1-02', '2023-01-03'],
+    #   ['00:00', 0, 0, 0],
+    #   ['01:00', 0, 0, 0],
+    #   ['02:00', 0, 0, 0],
+    #   ['03:00', 0, 0, 0],
+    #   ['04:00', 0, 0, 0],
     # ]
     result_arr
   end

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

@@ -45,12 +45,8 @@ module Api::V2::Accounts::ReportsHelper
   def generate_readable_report_metrics(report_metric)
     [
       report_metric[:conversations_count],
-      time_to_minutes(report_metric[:avg_first_response_time]),
-      time_to_minutes(report_metric[:avg_resolution_time])
+      Reports::TimeFormatPresenter.new(report_metric[:avg_first_response_time]).format,
+      Reports::TimeFormatPresenter.new(report_metric[:avg_resolution_time]).format
     ]
   end
-
-  def time_to_minutes(time_in_seconds)
-    (time_in_seconds / 60).to_i
-  end
 end

app/helpers/super_admin/account_features_helper.rb

@@ -0,0 +1,9 @@
+module SuperAdmin::AccountFeaturesHelper
+  def self.account_features
+    YAML.safe_load(Rails.root.join('config/features.yml').read).freeze
+  end
+
+  def self.account_premium_features
+    account_features.filter { |feature| feature['premium'] }.pluck('name')
+  end
+end

app/javascript/dashboard/App.vue

@@ -2,12 +2,13 @@
   <div
     v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
-    class="app-wrapper h-full flex-grow-0 min-h-0 w-full"
+    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
     :class="{ 'app-rtl--wrapper': isRTLView }"
     :dir="isRTLView ? 'rtl' : 'ltr'"
   >
     <update-banner :latest-chatwoot-version="latestChatwootVersion" />
     <template v-if="currentAccountId">
+      <pending-email-verification-banner />
       <payment-pending-banner />
       <upgrade-banner />
     </template>
@@ -32,6 +33,7 @@ import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
 import UpgradeBanner from './components/app/UpgradeBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
+import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer.vue';
 import rtlMixin from 'shared/mixins/rtlMixin';
@@ -52,6 +54,7 @@ export default {
     PaymentPendingBanner,
     WootSnackbarBox,
     UpgradeBanner,
+    PendingEmailVerificationBanner,
   },
 
   mixins: [rtlMixin],

app/javascript/dashboard/api/auth.js

@@ -29,11 +29,12 @@ export default {
     return fetchPromise;
   },
   hasAuthCookie() {
-    return !!Cookies.getJSON('cw_d_session_info');
+    return !!Cookies.get('cw_d_session_info');
   },
   getAuthData() {
     if (this.hasAuthCookie()) {
-      return Cookies.getJSON('cw_d_session_info');
+      const savedAuthInfo = Cookies.get('cw_d_session_info');
+      return JSON.parse(savedAuthInfo || '{}');
     }
     return false;
   },
@@ -97,4 +98,8 @@ export default {
       },
     });
   },
+  resendConfirmation() {
+    const urlData = endPoints('resendConfirmation');
+    return axios.post(urlData.url);
+  },
 };

app/javascript/dashboard/api/endPoints.js

@@ -47,6 +47,10 @@ const endPoints = {
   setActiveAccount: {
     url: '/api/v1/profile/set_active_account',
   },
+
+  resendConfirmation: {
+    url: '/api/v1/profile/resend_confirmation',
+  },
 };
 
 export default page => {

app/javascript/dashboard/api/notifications.js

@@ -6,8 +6,15 @@ class NotificationsAPI extends ApiClient {
     super('notifications', { accountScoped: true });
   }
 
-  get(page) {
-    return axios.get(`${this.url}?page=${page}`);
+  get({ page, status, type, sortOrder }) {
+    return axios.get(this.url, {
+      params: {
+        page,
+        status,
+        type,
+        sort_order: sortOrder,
+      },
+    });
   }
 
   getNotifications(contactId) {
@@ -25,9 +32,29 @@ class NotificationsAPI extends ApiClient {
     });
   }
 
+  unRead(id) {
+    return axios.post(`${this.url}/${id}/unread`);
+  }
+
   readAll() {
     return axios.post(`${this.url}/read_all`);
   }
+
+  delete(id) {
+    return axios.delete(`${this.url}/${id}`);
+  }
+
+  deleteAll({ type = 'all' }) {
+    return axios.post(`${this.url}/destroy_all`, {
+      type,
+    });
+  }
+
+  snooze({ id, snoozedUntil = null }) {
+    return axios.post(`${this.url}/${id}/snooze`, {
+      snoozed_until: snoozedUntil,
+    });
+  }
 }
 
 export default new NotificationsAPI();

app/javascript/dashboard/api/specs/notifications.spec.js

@@ -28,10 +28,20 @@ describe('#NotificationAPI', () => {
     });
 
     it('#get', () => {
-      notificationsAPI.get(1);
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/notifications?page=1'
-      );
+      notificationsAPI.get({
+        page: 1,
+        status: 'read',
+        type: 'Conversation',
+        sortOrder: 'desc',
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/notifications', {
+        params: {
+          page: 1,
+          status: 'read',
+          type: 'Conversation',
+          sort_order: 'desc',
+        },
+      });
     });
 
     it('#getNotifications', () => {
@@ -65,5 +75,30 @@ describe('#NotificationAPI', () => {
         '/api/v1/notifications/read_all'
       );
     });
+
+    it('#snooze', () => {
+      notificationsAPI.snooze({ id: 1, snoozedUntil: 12332211 });
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/notifications/1/snooze',
+        {
+          snoozed_until: 12332211,
+        }
+      );
+    });
+
+    it('#delete', () => {
+      notificationsAPI.delete(1);
+      expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/notifications/1');
+    });
+
+    it('#deleteAll', () => {
+      notificationsAPI.deleteAll({ type: 'all' });
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/notifications/destroy_all',
+        {
+          type: 'all',
+        }
+      );
+    });
   });
 });

app/javascript/dashboard/components/ChatList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="conversations-list-wrap flex-basis-clamp flex-shrink-0 flex-basis-custom overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="conversations-list-wrap flex-basis-clamp flex-shrink-0 overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
     :class="{
       hide: !showConversationList,
       'list--full-width': isOnExpandedLayout,

app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue

@@ -0,0 +1,43 @@
+<template>
+  <banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    action-button-icon="mail"
+    has-action-button
+    @click="resendVerificationEmail"
+  />
+</template>
+
+<script>
+import Banner from 'dashboard/components/ui/Banner.vue';
+import { mapGetters } from 'vuex';
+import accountMixin from 'dashboard/mixins/account';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  components: { Banner },
+  mixins: [accountMixin, alertMixin],
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+    }),
+    bannerMessage() {
+      return this.$t('APP_GLOBAL.EMAIL_VERIFICATION_PENDING');
+    },
+    actionButtonMessage() {
+      return this.$t('APP_GLOBAL.RESEND_VERIFICATION_MAIL');
+    },
+    shouldShowBanner() {
+      return !this.currentUser.confirmed;
+    },
+  },
+  methods: {
+    resendVerificationEmail() {
+      this.$store.dispatch('resendConfirmation');
+      this.showAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
+    },
+  },
+};
+</script>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="banner flex items-center h-12 gap-4 text-white dark:text-white text-xs py-3 px-4 justify-center"
+    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
     :class="bannerClasses"
   >
     <span class="banner-message">
@@ -18,7 +18,7 @@
       <woot-button
         v-if="hasActionButton"
         size="tiny"
-        icon="arrow-right"
+        :icon="actionButtonIcon"
         :variant="actionButtonVariant"
         color-scheme="primary"
         class-names="banner-action__button"
@@ -67,6 +67,10 @@ export default {
       type: String,
       default: '',
     },
+    actionButtonIcon: {
+      type: String,
+      default: 'arrow-right',
+    },
     colorScheme: {
       type: String,
       default: '',

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

@@ -6,6 +6,7 @@
     <conversation-header
       v-if="currentChat.id"
       :chat="currentChat"
+      :is-inbox-view="isInboxView"
       :is-contact-panel-open="isContactPanelOpen"
       :show-back-button="isOnExpandedLayout"
       @contact-panel-toggle="onToggleContactPanel"
@@ -30,6 +31,7 @@
       <messages-view
         v-if="currentChat.id"
         :inbox-id="inboxId"
+        :is-inbox-view="isInboxView"
         :is-contact-panel-open="isContactPanelOpen"
         @contact-panel-toggle="onToggleContactPanel"
       />
@@ -80,6 +82,10 @@ export default {
       default: '',
       required: false,
     },
+    isInboxView: {
+      type: Boolean,
+      default: false,
+    },
     isContactPanelOpen: {
       type: Boolean,
       default: true,

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

@@ -66,7 +66,7 @@
         </div>
       </div>
       <div
-        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0"
+        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0 rtl:relative rtl:left-6"
         :class="{ 'justify-end': isContactPanelOpen }"
       >
         <more-actions :conversation-id="currentChat.id" />
@@ -86,7 +86,8 @@ import MoreActions from './MoreActions.vue';
 import Thumbnail from '../Thumbnail.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
-import { conversationReopenTime } from 'dashboard/helper/snoozeHelpers';
+import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
+import { frontendURL } from 'dashboard/helper/URLHelper';
 
 export default {
   components: {
@@ -109,6 +110,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isInboxView: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters({
@@ -123,6 +128,9 @@ export default {
         params: { accountId, inbox_id: inboxId, label, teamId },
         name,
       } = this.$route;
+      if (this.isInboxView) {
+        return frontendURL(`accounts/${accountId}/inbox`);
+      }
       return conversationListPageURL({
         accountId,
         inboxId,
@@ -150,7 +158,7 @@ export default {
       if (snoozedUntil) {
         return `${this.$t(
           'CONVERSATION.HEADER.SNOOZED_UNTIL'
-        )} ${conversationReopenTime(snoozedUntil)}`;
+        )} ${snoozedReopenTime(snoozedUntil)}`;
       }
       return this.$t('CONVERSATION.HEADER.SNOOZED_UNTIL_NEXT_REPLY');
     },

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

@@ -12,7 +12,10 @@
         variant="smooth"
         size="tiny"
         color-scheme="secondary"
-        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed top-[9.5rem] md:top-[6.25rem] z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
+        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
+        :class="
+          isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
+        "
         :icon="isRightOrLeftIcon"
         @click="onToggleContactPanel"
       />
@@ -142,6 +145,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isInboxView: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {

app/javascript/dashboard/constants/globals.js

@@ -46,5 +46,18 @@ export default {
   },
   EXAMPLE_URL: 'https://example.com',
   EXAMPLE_WEBHOOK_URL: 'https://example/api/webhook',
+  INBOX_SORT_BY: {
+    NEWEST: 'desc',
+    OLDEST: 'asc',
+  },
+  INBOX_DISPLAY_BY: {
+    SNOOZED: 'snoozed',
+    READ: 'read',
+  },
+  INBOX_FILTER_TYPE: {
+    STATUS: 'status',
+    TYPE: 'type',
+    SORT_ORDER: 'sort_order',
+  },
 };
 export const DEFAULT_REDIRECT_URL = '/app/';

app/javascript/dashboard/featureFlags.js

@@ -17,4 +17,5 @@ export const FEATURE_FLAGS = {
   VOICE_RECORDER: 'voice_recorder',
   AUDIT_LOGS: 'audit_logs',
   INSERT_ARTICLE_IN_REPLY: 'insert_article_in_reply',
+  INBOX_VIEW: 'inbox_view',
 };

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

@@ -102,3 +102,12 @@ export const OPEN_AI_EVENTS = Object.freeze({
 export const GENERAL_EVENTS = Object.freeze({
   COMMAND_BAR: 'Used commandbar',
 });
+
+export const INBOX_EVENTS = Object.freeze({
+  OPEN_CONVERSATION_VIA_INBOX: 'Opened conversation via inbox',
+  MARK_NOTIFICATION_AS_READ: 'Marked notification as read',
+  MARK_ALL_NOTIFICATIONS_AS_READ: 'Marked all notifications as read',
+  MARK_NOTIFICATION_AS_UNREAD: 'Marked notification as unread',
+  DELETE_NOTIFICATION: 'Deleted notification',
+  DELETE_ALL_NOTIFICATIONS: 'Deleted all notifications',
+});

app/javascript/dashboard/helper/actionCable.js

@@ -24,6 +24,7 @@ class ActionCableConnector extends BaseActionCableConnector {
       'conversation.mentioned': this.onConversationMentioned,
       'notification.created': this.onNotificationCreated,
       'notification.deleted': this.onNotificationDeleted,
+      'notification.updated': this.onNotificationUpdated,
       'first.reply.created': this.onFirstReplyCreated,
       'conversation.read': this.onConversationRead,
       'conversation.updated': this.onConversationUpdated,
@@ -200,6 +201,10 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('notifications/deleteNotification', data);
   };
 
+  onNotificationUpdated = data => {
+    this.app.$store.dispatch('notifications/updateNotification', data);
+  };
+
   // eslint-disable-next-line class-methods-use-this
   onFirstReplyCreated = () => {
     bus.$emit('fetch_overview_reports');

app/javascript/dashboard/helper/routeHelpers.js

@@ -86,3 +86,6 @@ export const getConversationDashboardRoute = routeName => {
       return null;
   }
 };
+
+export const isAInboxViewRoute = routeName =>
+  ['inbox_view_conversation'].includes(routeName);

app/javascript/dashboard/helper/snoozeHelpers.js

@@ -55,7 +55,7 @@ export const findSnoozeTime = (snoozeType, currentDate = new Date()) => {
 
   return parsedDate ? getUnixTime(parsedDate) : null;
 };
-export const conversationReopenTime = snoozedUntil => {
+export const snoozedReopenTime = snoozedUntil => {
   if (!snoozedUntil) {
     return null;
   }

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

@@ -5,6 +5,7 @@ import {
   isAConversationRoute,
   routeIsAccessibleFor,
   validateLoggedInRoutes,
+  isAInboxViewRoute,
 } from '../routeHelpers';
 
 describe('#getCurrentAccount', () => {
@@ -134,3 +135,10 @@ describe('getConversationDashboardRoute', () => {
     expect(getConversationDashboardRoute('non_existent_route')).toBeNull();
   });
 });
+
+describe('isAInboxViewRoute', () => {
+  it('returns true if inbox view route name is provided', () => {
+    expect(isAInboxViewRoute('inbox_view_conversation')).toBe(true);
+    expect(isAInboxViewRoute('inbox_conversation')).toBe(false);
+  });
+});

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

@@ -1,6 +1,6 @@
 import {
   findSnoozeTime,
-  conversationReopenTime,
+  snoozedReopenTime,
   findStartOfNextWeek,
   findStartOfNextMonth,
   findNextDay,
@@ -88,13 +88,13 @@ describe('#Snooze Helpers', () => {
     });
   });
 
-  describe('conversationReopenTime', () => {
+  describe('snoozedReopenTime', () => {
     it('should return nil if snoozedUntil is nil', () => {
-      expect(conversationReopenTime(null)).toEqual(null);
+      expect(snoozedReopenTime(null)).toEqual(null);
     });
 
     it('should return formatted date if snoozedUntil is not nil', () => {
-      expect(conversationReopenTime('2023-06-07T09:00:00.000Z')).toEqual(
+      expect(snoozedReopenTime('2023-06-07T09:00:00.000Z')).toEqual(
         '7 Jun, 9.00am'
       );
     });

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

@@ -112,7 +112,8 @@
       "REMOVE_LABEL": "Remove label from the conversation",
       "SETTINGS": "Settings",
       "AI_ASSIST": "AI Assist",
-      "APPEARANCE": "Appearance"
+      "APPEARANCE": "Appearance",
+      "SNOOZE_NOTIFICATION": "Snooze Notification"
     },
     "COMMANDS": {
       "GO_TO_CONVERSATION_DASHBOARD": "Go to Conversation Dashboard",
@@ -153,7 +154,8 @@
       "CHANGE_APPEARANCE": "Change Appearance",
       "LIGHT_MODE": "Light",
       "DARK_MODE": "Dark",
-      "SYSTEM_MODE": "System"
+      "SYSTEM_MODE": "System",
+      "SNOOZE_NOTIFICATION": "Snooze Notification"
     }
   },
   "DASHBOARD_APPS": {

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

@@ -0,0 +1,60 @@
+{
+  "INBOX": {
+    "LIST": {
+      "TITLE": "Inbox",
+      "DISPLAY_DROPDOWN": "Display",
+      "LOADING": "Fetching notifications",
+      "EOF": "All notifications loaded 🎉",
+      "404": "There are no active notifications in this group.",
+      "NO_NOTIFICATIONS": "No notifications",
+      "NOTE": "Notifications from all subscribed inboxes",
+      "SNOOZED_UNTIL": "Snoozed until",
+      "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
+      "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week"
+    },
+    "ACTION_HEADER": {
+      "SNOOZE": "Snooze notification",
+      "DELETE": "Delete notification"
+    },
+    "TYPES": {
+      "CONVERSATION_MENTION": "You have been mentioned in a conversation",
+      "CONVERSATION_CREATION": "New conversation created",
+      "CONVERSATION_ASSIGNMENT": "A conversation has been assigned to you",
+      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "New message in an assigned conversation",
+      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in"
+    },
+    "MENU_ITEM": {
+      "MARK_AS_READ": "Mark as read",
+      "MARK_AS_UNREAD": "Mark as unread",
+      "SNOOZE": "Snooze",
+      "DELETE": "Delete",
+      "MARK_ALL_READ": "Mark all as read",
+      "DELETE_ALL": "Delete all",
+      "DELETE_ALL_READ": "Delete all read"
+    },
+    "DISPLAY_MENU": {
+      "SORT": "Sort",
+      "DISPLAY": "Display :",
+      "SORT_OPTIONS": {
+        "NEWEST": "Newest",
+        "OLDEST": "Oldest",
+        "PRIORITY": "Priority"
+      },
+      "DISPLAY_OPTIONS": {
+        "SNOOZED": "Snoozed",
+        "READ": "Read",
+        "LABELS": "Labels",
+        "CONVERSATION_ID": "Conversation ID"
+      }
+    },
+    "ALERTS": {
+      "MARK_AS_READ": "Notification marked as read",
+      "MARK_AS_UNREAD": "Notification marked as unread",
+      "SNOOZE": "Notification snoozed",
+      "DELETE": "Notification deleted",
+      "MARK_ALL_READ": "All notifications marked as read",
+      "DELETE_ALL": "All notifications deleted",
+      "DELETE_ALL_READ": "All read notifications deleted"
+    }
+  }
+}

app/javascript/dashboard/i18n/locale/en/index.js

@@ -29,6 +29,7 @@ import settings from './settings.json';
 import signup from './signup.json';
 import teamsSettings from './teamsSettings.json';
 import whatsappTemplates from './whatsappTemplates.json';
+import inbox from './inbox.json';
 
 export default {
   ...advancedFilters,
@@ -62,4 +63,5 @@ export default {
   ...signup,
   ...teamsSettings,
   ...whatsappTemplates,
+  ...inbox,
 };

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

@@ -156,6 +156,9 @@
     "TRIAL_MESSAGE": "days trial remaining.",
     "TRAIL_BUTTON": "Buy Now",
     "DELETED_USER": "Deleted User",
+    "EMAIL_VERIFICATION_PENDING": "It seems that you haven't verified your email address yet. Please check your inbox for the verification email.",
+    "RESEND_VERIFICATION_MAIL": "Resend verification email",
+    "EMAIL_VERIFICATION_SENT": "Verification email has been sent. Please check your inbox.",
     "ACCOUNT_SUSPENDED": {
       "TITLE": "Account Suspended",
       "MESSAGE": "Your account is suspended. Please reach out to the support team for more information."
@@ -193,6 +196,7 @@
     "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
     "SWITCH": "Switch",
     "CONVERSATIONS": "Conversations",
+    "INBOX": "Inbox",
     "ALL_CONVERSATIONS": "All Conversations",
     "MENTIONED_CONVERSATIONS": "Mentions",
     "PARTICIPATING_CONVERSATIONS": "Participating",

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

@@ -52,19 +52,77 @@ describe('#dateFormat', () => {
 });
 
 describe('#shortTimestamp', () => {
-  it('returns correct value', () => {
+  // Test cases when withAgo is false or not provided
+  it('returns correct value without ago', () => {
     expect(TimeMixin.methods.shortTimestamp('less than a minute ago')).toEqual(
       'now'
     );
-    expect(TimeMixin.methods.shortTimestamp(' minute ago')).toEqual('m');
-    expect(TimeMixin.methods.shortTimestamp(' minutes ago')).toEqual('m');
-    expect(TimeMixin.methods.shortTimestamp(' hour ago')).toEqual('h');
-    expect(TimeMixin.methods.shortTimestamp(' hours ago')).toEqual('h');
-    expect(TimeMixin.methods.shortTimestamp(' day ago')).toEqual('d');
-    expect(TimeMixin.methods.shortTimestamp(' days ago')).toEqual('d');
-    expect(TimeMixin.methods.shortTimestamp(' month ago')).toEqual('mo');
-    expect(TimeMixin.methods.shortTimestamp(' months ago')).toEqual('mo');
-    expect(TimeMixin.methods.shortTimestamp(' year ago')).toEqual('y');
-    expect(TimeMixin.methods.shortTimestamp(' years ago')).toEqual('y');
+    expect(TimeMixin.methods.shortTimestamp('1 minute ago')).toEqual('1m');
+    expect(TimeMixin.methods.shortTimestamp('12 minutes ago')).toEqual('12m');
+    expect(TimeMixin.methods.shortTimestamp('a minute ago')).toEqual('1m');
+    expect(TimeMixin.methods.shortTimestamp('an hour ago')).toEqual('1h');
+    expect(TimeMixin.methods.shortTimestamp('1 hour ago')).toEqual('1h');
+    expect(TimeMixin.methods.shortTimestamp('2 hours ago')).toEqual('2h');
+    expect(TimeMixin.methods.shortTimestamp('1 day ago')).toEqual('1d');
+    expect(TimeMixin.methods.shortTimestamp('a day ago')).toEqual('1d');
+    expect(TimeMixin.methods.shortTimestamp('3 days ago')).toEqual('3d');
+    expect(TimeMixin.methods.shortTimestamp('a month ago')).toEqual('1mo');
+    expect(TimeMixin.methods.shortTimestamp('1 month ago')).toEqual('1mo');
+    expect(TimeMixin.methods.shortTimestamp('2 months ago')).toEqual('2mo');
+    expect(TimeMixin.methods.shortTimestamp('a year ago')).toEqual('1y');
+    expect(TimeMixin.methods.shortTimestamp('1 year ago')).toEqual('1y');
+    expect(TimeMixin.methods.shortTimestamp('4 years ago')).toEqual('4y');
+  });
+
+  // Test cases when withAgo is true
+  it('returns correct value with ago', () => {
+    expect(
+      TimeMixin.methods.shortTimestamp('less than a minute ago', true)
+    ).toEqual('now');
+    expect(TimeMixin.methods.shortTimestamp('1 minute ago', true)).toEqual(
+      '1m ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('12 minutes ago', true)).toEqual(
+      '12m ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('a minute ago', true)).toEqual(
+      '1m ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('an hour ago', true)).toEqual(
+      '1h ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('1 hour ago', true)).toEqual(
+      '1h ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('2 hours ago', true)).toEqual(
+      '2h ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('1 day ago', true)).toEqual(
+      '1d ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('a day ago', true)).toEqual(
+      '1d ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('3 days ago', true)).toEqual(
+      '3d ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('a month ago', true)).toEqual(
+      '1mo ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('1 month ago', true)).toEqual(
+      '1mo ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('2 months ago', true)).toEqual(
+      '2mo ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('a year ago', true)).toEqual(
+      '1y ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('1 year ago', true)).toEqual(
+      '1y ago'
+    );
+    expect(TimeMixin.methods.shortTimestamp('4 years ago', true)).toEqual(
+      '4y ago'
+    );
   });
 });

app/javascript/dashboard/mixins/time.js

@@ -28,25 +28,36 @@ export default {
       const unixTime = fromUnixTime(time);
       return format(unixTime, dateFormat);
     },
-    shortTimestamp(time) {
+    shortTimestamp(time, withAgo = false) {
+      // This function takes a time string and converts it to a short time string
+      // with the following format: 1m, 1h, 1d, 1mo, 1y
+      // The function also takes an optional boolean parameter withAgo
+      // which will add the word "ago" to the end of the time string
+      const suffix = withAgo ? ' ago' : '';
+      const timeMappings = {
+        'less than a minute ago': 'now',
+        'a minute ago': `1m${suffix}`,
+        'an hour ago': `1h${suffix}`,
+        'a day ago': `1d${suffix}`,
+        'a month ago': `1mo${suffix}`,
+        'a year ago': `1y${suffix}`,
+      };
+      // Check if the time string is one of the specific cases
+      if (timeMappings[time]) {
+        return timeMappings[time];
+      }
       const convertToShortTime = time
         .replace(/about|over|almost|/g, '')
-        .replace('less than a minute ago', 'now')
-        .replace(' minute ago', 'm')
-        .replace(' minutes ago', 'm')
-        .replace('a minute ago', 'm')
-        .replace('an hour ago', 'h')
-        .replace(' hour ago', 'h')
-        .replace(' hours ago', 'h')
-        .replace(' day ago', 'd')
-        .replace('a day ago', 'd')
-        .replace(' days ago', 'd')
-        .replace('a month ago', 'mo')
-        .replace(' months ago', 'mo')
-        .replace(' month ago', 'mo')
-        .replace('a year ago', 'y')
-        .replace(' year ago', 'y')
-        .replace(' years ago', 'y');
+        .replace(' minute ago', `m${suffix}`)
+        .replace(' minutes ago', `m${suffix}`)
+        .replace(' hour ago', `h${suffix}`)
+        .replace(' hours ago', `h${suffix}`)
+        .replace(' day ago', `d${suffix}`)
+        .replace(' days ago', `d${suffix}`)
+        .replace(' month ago', `mo${suffix}`)
+        .replace(' months ago', `mo${suffix}`)
+        .replace(' year ago', `y${suffix}`)
+        .replace(' years ago', `y${suffix}`);
       return convertToShortTime;
     },
   },

app/javascript/dashboard/routes/dashboard/commands/CommandBarIcons.js

@@ -71,3 +71,5 @@ export const ICON_APPEARANCE = `<svg role="img" class="ninja-icon ninja-icon--fl
 export const ICON_LIGHT_MODE = `<svg role="img" class="ninja-icon ninja-icon--fluent" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 12 2Zm5 10a5 5 0 1 1-10 0a5 5 0 0 1 10 0Zm4.25.75a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5h1.5ZM12 19a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 12 19Zm-7.75-6.25a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5h1.5Zm-.03-8.53a.75.75 0 0 1 1.06 0l1.5 1.5a.75.75 0 0 1-1.06 1.06l-1.5-1.5a.75.75 0 0 1 0-1.06Zm1.06 15.56a.75.75 0 1 1-1.06-1.06l1.5-1.5a.75.75 0 1 1 1.06 1.06l-1.5 1.5Zm14.5-15.56a.75.75 0 0 0-1.06 0l-1.5 1.5a.75.75 0 0 0 1.06 1.06l1.5-1.5a.75.75 0 0 0 0-1.06Zm-1.06 15.56a.75.75 0 1 0 1.06-1.06l-1.5-1.5a.75.75 0 1 0-1.06 1.06l1.5 1.5Z"/></svg>`;
 export const ICON_DARK_MODE = `<svg role="img" class="ninja-icon ninja-icon--fluent" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M20.026 17.001c-2.762 4.784-8.879 6.423-13.663 3.661A9.965 9.965 0 0 1 3.13 17.68a.75.75 0 0 1 .365-1.132c3.767-1.348 5.785-2.91 6.956-5.146c1.232-2.353 1.551-4.93.689-8.463a.75.75 0 0 1 .769-.927a9.961 9.961 0 0 1 4.457 1.327c4.784 2.762 6.423 8.879 3.66 13.662Zm-8.248-4.903c-1.25 2.389-3.31 4.1-6.817 5.499a8.49 8.49 0 0 0 2.152 1.766a8.502 8.502 0 0 0 8.502-14.725a8.484 8.484 0 0 0-2.792-1.015c.647 3.384.23 6.043-1.045 8.475Z"/></svg>`;
 export const ICON_SYSTEM_MODE = `<svg role="img" class="ninja-icon ninja-icon--fluent" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4.25 3A2.25 2.25 0 0 0 2 5.25v10.5A2.25 2.25 0 0 0 4.25 18H9.5v1.25c0 .69-.56 1.25-1.25 1.25h-.5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-.5c-.69 0-1.25-.56-1.25-1.25V18h5.25A2.25 2.25 0 0 0 22 15.75V5.25A2.25 2.25 0 0 0 19.75 3H4.25ZM13 18v1.25c0 .45.108.875.3 1.25h-2.6c.192-.375.3-.8.3-1.25V18h2ZM3.5 5.25a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 .75.75V13h-17V5.25Zm0 9.25h17v1.25a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75V14.5Z"/></svg>`;
+
+export const ICON_SNOOZE_NOTIFICATION = `<svg role="img" class="ninja-icon ninja-icon--fluent" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3.5c-3.104 0-6 2.432-6 6.25v4.153L4.682 17h14.67l-1.354-3.093V11.75a.75.75 0 0 1 1.5 0v1.843l1.381 3.156a1.25 1.25 0 0 1-1.145 1.751H15a3.002 3.002 0 0 1-6.003 0H4.305a1.25 1.25 0 0 1-1.15-1.739l1.344-3.164V9.75C4.5 5.068 8.103 2 12 2c.86 0 1.705.15 2.5.432a.75.75 0 0 1-.502 1.413A5.964 5.964 0 0 0 12 3.5ZM12 20c.828 0 1.5-.671 1.501-1.5h-3.003c0 .829.673 1.5 1.502 1.5Zm3.25-13h-2.5l-.101.007A.75.75 0 0 0 12.75 8.5h1.043l-1.653 2.314l-.055.09A.75.75 0 0 0 12.75 12h2.5l.102-.007a.75.75 0 0 0-.102-1.493h-1.042l1.653-2.314l.055-.09A.75.75 0 0 0 15.25 7Zm6-5h-3.5l-.101.007A.75.75 0 0 0 17.75 3.5h2.134l-2.766 4.347l-.05.09A.75.75 0 0 0 17.75 9h3.5l.102-.007A.75.75 0 0 0 21.25 7.5h-2.133l2.766-4.347l.05-.09A.75.75 0 0 0 21.25 2Z"/></svg>`;

app/javascript/dashboard/routes/dashboard/commands/commandBarBusEvents.js

@@ -15,3 +15,6 @@ export const CMD_REOPEN_CONVERSATION = 'CMD_REOPEN_CONVERSATION';
 export const CMD_RESOLVE_CONVERSATION = 'CMD_RESOLVE_CONVERSATION';
 export const CMD_SNOOZE_CONVERSATION = 'CMD_SNOOZE_CONVERSATION';
 export const CMD_AI_ASSIST = 'CMD_AI_ASSIST';
+
+// Inbox Commands (Notifications)
+export const CMD_SNOOZE_NOTIFICATION = 'CMD_SNOOZE_NOTIFICATION';

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

@@ -12,6 +12,7 @@
 <script>
 import 'ninja-keys';
 import conversationHotKeysMixin from './conversationHotKeys';
+import inboxHotKeysMixin from './inboxHotKeys';
 import goToCommandHotKeys from './goToCommandHotKeys';
 import appearanceHotKeys from './appearanceHotKeys';
 import agentMixin from 'dashboard/mixins/agentMixin';
@@ -25,6 +26,7 @@ export default {
     adminMixin,
     agentMixin,
     conversationHotKeysMixin,
+    inboxHotKeysMixin,
     conversationLabelMixin,
     conversationTeamMixin,
     appearanceHotKeys,
@@ -42,6 +44,7 @@ export default {
     },
     hotKeys() {
       return [
+        ...this.inboxHotKeys,
         ...this.conversationHotKeys,
         ...this.goToCommandHotKeys,
         ...this.goToAppearanceHotKeys,

app/javascript/dashboard/routes/dashboard/commands/conversationHotKeys.js

@@ -30,7 +30,10 @@ import {
   UNMUTE_ACTION,
   MUTE_ACTION,
 } from './commandBarActions';
-import { isAConversationRoute } from '../../../helper/routeHelpers';
+import {
+  isAConversationRoute,
+  isAInboxViewRoute,
+} from '../../../helper/routeHelpers';
 export default {
   mixins: [aiMixin],
   watch: {
@@ -325,7 +328,10 @@ export default {
     },
 
     conversationHotKeys() {
-      if (isAConversationRoute(this.$route.name)) {
+      if (
+        isAConversationRoute(this.$route.name) ||
+        isAInboxViewRoute(this.$route.name)
+      ) {
         const defaultConversationHotKeys = [
           ...this.statusActions,
           ...this.conversationAdditionalActions,

app/javascript/dashboard/routes/dashboard/commands/inboxHotKeys.js

@@ -0,0 +1,81 @@
+import wootConstants from 'dashboard/constants/globals';
+
+import { CMD_SNOOZE_NOTIFICATION } from './commandBarBusEvents';
+import { ICON_SNOOZE_NOTIFICATION } from './CommandBarIcons';
+
+import { isAInboxViewRoute } from 'dashboard/helper/routeHelpers';
+
+const SNOOZE_OPTIONS = wootConstants.SNOOZE_OPTIONS;
+
+const INBOX_SNOOZE_EVENTS = [
+  {
+    id: 'snooze_notification',
+    title: 'COMMAND_BAR.COMMANDS.SNOOZE_NOTIFICATION',
+    icon: ICON_SNOOZE_NOTIFICATION,
+    children: Object.values(SNOOZE_OPTIONS),
+  },
+  {
+    id: SNOOZE_OPTIONS.AN_HOUR_FROM_NOW,
+    title: 'COMMAND_BAR.COMMANDS.AN_HOUR_FROM_NOW',
+    parent: 'snooze_notification',
+    section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
+    icon: ICON_SNOOZE_NOTIFICATION,
+    handler: () =>
+      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.AN_HOUR_FROM_NOW),
+  },
+  {
+    id: SNOOZE_OPTIONS.UNTIL_TOMORROW,
+    title: 'COMMAND_BAR.COMMANDS.UNTIL_TOMORROW',
+    section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
+    parent: 'snooze_notification',
+    icon: ICON_SNOOZE_NOTIFICATION,
+    handler: () =>
+      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_TOMORROW),
+  },
+  {
+    id: SNOOZE_OPTIONS.UNTIL_NEXT_WEEK,
+    title: 'COMMAND_BAR.COMMANDS.UNTIL_NEXT_WEEK',
+    section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
+    parent: 'snooze_notification',
+    icon: ICON_SNOOZE_NOTIFICATION,
+    handler: () =>
+      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_WEEK),
+  },
+  {
+    id: SNOOZE_OPTIONS.UNTIL_NEXT_MONTH,
+    title: 'COMMAND_BAR.COMMANDS.UNTIL_NEXT_MONTH',
+    section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
+    parent: 'snooze_notification',
+    icon: ICON_SNOOZE_NOTIFICATION,
+    handler: () =>
+      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_NEXT_MONTH),
+  },
+  {
+    id: SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME,
+    title: 'COMMAND_BAR.COMMANDS.CUSTOM',
+    section: 'COMMAND_BAR.SECTIONS.SNOOZE_NOTIFICATION',
+    parent: 'snooze_notification',
+    icon: ICON_SNOOZE_NOTIFICATION,
+    handler: () =>
+      bus.$emit(CMD_SNOOZE_NOTIFICATION, SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME),
+  },
+];
+export default {
+  computed: {
+    inboxHotKeys() {
+      if (isAInboxViewRoute(this.$route.name)) {
+        return this.prepareActions(INBOX_SNOOZE_EVENTS);
+      }
+      return [];
+    },
+  },
+  methods: {
+    prepareActions(actions) {
+      return actions.map(action => ({
+        ...action,
+        title: this.$t(action.title),
+        section: this.$t(action.section),
+      }));
+    },
+  },
+};

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -182,6 +182,7 @@ import { getCountryFlag } from 'dashboard/helper/flag';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
   isAConversationRoute,
+  isAInboxViewRoute,
   getConversationDashboardRoute,
 } from '../../../../helper/routeHelpers';
 
@@ -303,6 +304,10 @@ export default {
           this.$router.push({
             name: getConversationDashboardRoute(this.$route.name),
           });
+        } else if (isAInboxViewRoute(this.$route.name)) {
+          this.$router.push({
+            name: 'inbox_view',
+          });
         } else if (this.$route.name !== 'contacts_dashboard') {
           this.$router.push({
             name: 'contacts_dashboard',

app/javascript/dashboard/routes/dashboard/conversation/conversation.routes.js

@@ -1,9 +1,28 @@
 /* eslint arrow-body-style: 0 */
 import { frontendURL } from '../../../helper/URLHelper';
 const ConversationView = () => import('./ConversationView');
+const InboxView = () => import('../inbox/InboxView.vue');
 
 export default {
   routes: [
+    {
+      path: frontendURL('accounts/:accountId/inbox-view'),
+      name: 'inbox_view',
+      roles: ['administrator', 'agent'],
+      component: InboxView,
+      props: () => {
+        return { inboxId: 0 };
+      },
+    },
+    {
+      path: frontendURL('accounts/:accountId/inbox-view/:conversation_id'),
+      name: 'inbox_view_conversation',
+      roles: ['administrator', 'agent'],
+      component: InboxView,
+      props: route => {
+        return { inboxId: 0, conversationId: route.params.conversation_id };
+      },
+    },
     {
       path: frontendURL('accounts/:accountId/dashboard'),
       name: 'home',

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex px-4 items-center justify-between w-full h-16 pt-2 sticky top-0 z-10 bg-white dark:bg-slate-900"
+    class="flex px-4 items-center justify-between w-full h-16 pt-2 sticky top-0 z-50 bg-white dark:bg-slate-900"
   >
     <div class="flex items-center">
       <woot-sidemenu-icon />

app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue

@@ -0,0 +1,200 @@
+<template>
+  <div
+    class="flex flex-col h-full w-full ltr:border-r border-slate-50 dark:border-slate-800/50"
+    :class="isOnExpandedLayout ? '' : 'min-w-[360px] max-w-[360px]'"
+  >
+    <inbox-list-header @filter="onFilterChange" />
+    <div
+      ref="notificationList"
+      class="flex flex-col w-full h-[calc(100%-56px)] overflow-x-hidden overflow-y-auto"
+    >
+      <inbox-card
+        v-for="notificationItem in notifications"
+        :key="notificationItem.id"
+        :notification-item="notificationItem"
+        @mark-notification-as-read="markNotificationAsRead"
+        @mark-notification-as-unread="markNotificationAsUnRead"
+        @delete-notification="deleteNotification"
+      />
+      <div v-if="uiFlags.isFetching" class="text-center">
+        <span class="spinner mt-4 mb-4" />
+      </div>
+      <p
+        v-if="showEmptyState"
+        class="text-center text-slate-400 text-sm dark:text-slate-400 p-4 font-medium"
+      >
+        {{ $t('INBOX.LIST.NO_NOTIFICATIONS') }}
+      </p>
+      <p
+        v-if="showEndOfListMessage"
+        class="text-center text-slate-400 dark:text-slate-400 p-4"
+      >
+        {{ $t('INBOX.LIST.EOF') }}
+      </p>
+      <intersection-observer
+        v-if="!showEndOfList && !uiFlags.isFetching"
+        :options="infiniteLoaderOptions"
+        @observed="loadMoreNotifications"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import wootConstants from 'dashboard/constants/globals';
+import InboxCard from './components/InboxCard.vue';
+import InboxListHeader from './components/InboxListHeader.vue';
+import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
+import alertMixin from 'shared/mixins/alertMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+export default {
+  components: {
+    InboxCard,
+    InboxListHeader,
+    IntersectionObserver,
+  },
+  mixins: [alertMixin, uiSettingsMixin],
+  props: {
+    conversationId: {
+      type: [String, Number],
+      default: 0,
+    },
+    isOnExpandedLayout: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      infiniteLoaderOptions: {
+        root: this.$refs.notificationList,
+        rootMargin: '100px 0px 100px 0px',
+      },
+      page: 1,
+      status: '',
+      type: '',
+      sortOrder: wootConstants.INBOX_SORT_BY.NEWEST,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      meta: 'notifications/getMeta',
+      uiFlags: 'notifications/getUIFlags',
+      notification: 'notifications/getFilteredNotifications',
+    }),
+    inboxFilters() {
+      return {
+        page: this.page,
+        status: this.status,
+        type: this.type,
+        sortOrder: this.sortOrder,
+      };
+    },
+    notifications() {
+      return this.notification(this.inboxFilters);
+    },
+    showEndOfList() {
+      return this.uiFlags.isAllNotificationsLoaded && !this.uiFlags.isFetching;
+    },
+    showEmptyState() {
+      return !this.uiFlags.isFetching && !this.notifications.length;
+    },
+    showEndOfListMessage() {
+      return this.showEndOfList && this.notifications.length;
+    },
+  },
+  mounted() {
+    this.setSavedFilter();
+    this.fetchNotifications();
+  },
+  methods: {
+    fetchNotifications() {
+      this.page = 1;
+      this.$store.dispatch('notifications/clear');
+      const filter = this.inboxFilters;
+
+      this.$store.dispatch('notifications/index', filter);
+    },
+    redirectToInbox() {
+      if (!this.conversationId) return;
+      if (this.$route.name === 'inbox_view') return;
+      this.$router.push({ name: 'inbox_view' });
+    },
+    loadMoreNotifications() {
+      if (this.uiFlags.isAllNotificationsLoaded) return;
+      this.$store.dispatch('notifications/index', {
+        page: this.page + 1,
+        status: this.status,
+        type: this.type,
+        sortOrder: this.sortOrder,
+      });
+      this.page += 1;
+    },
+    markNotificationAsRead(notification) {
+      this.$track(INBOX_EVENTS.MARK_NOTIFICATION_AS_READ);
+      const {
+        id,
+        primary_actor_id: primaryActorId,
+        primary_actor_type: primaryActorType,
+      } = notification;
+      this.$store
+        .dispatch('notifications/read', {
+          id,
+          primaryActorId,
+          primaryActorType,
+          unreadCount: this.meta.unreadCount,
+        })
+        .then(() => {
+          this.showAlert(this.$t('INBOX.ALERTS.MARK_AS_READ'));
+        });
+    },
+    markNotificationAsUnRead(notification) {
+      this.$track(INBOX_EVENTS.MARK_NOTIFICATION_AS_UNREAD);
+      this.redirectToInbox();
+      const { id } = notification;
+      this.$store
+        .dispatch('notifications/unread', {
+          id,
+        })
+        .then(() => {
+          this.showAlert(this.$t('INBOX.ALERTS.MARK_AS_UNREAD'));
+        });
+    },
+    deleteNotification(notification) {
+      this.$track(INBOX_EVENTS.DELETE_NOTIFICATION);
+      this.redirectToInbox();
+      this.$store
+        .dispatch('notifications/delete', {
+          notification,
+          unread_count: this.meta.unreadCount,
+          count: this.meta.count,
+        })
+        .then(() => {
+          this.showAlert(this.$t('INBOX.ALERTS.DELETE'));
+        });
+    },
+    onFilterChange(option) {
+      if (option.type === wootConstants.INBOX_FILTER_TYPE.STATUS) {
+        this.status = option.selected ? option.key : '';
+      }
+      if (option.type === wootConstants.INBOX_FILTER_TYPE.TYPE) {
+        this.type = option.selected ? option.key : '';
+      }
+      if (option.type === wootConstants.INBOX_FILTER_TYPE.SORT_ORDER) {
+        this.sortOrder = option.key;
+      }
+      this.fetchNotifications();
+    },
+    setSavedFilter() {
+      const { inbox_filter_by: filterBy = {} } = this.uiSettings;
+      const { status, type, sort_by: sortBy } = filterBy;
+      this.status = status;
+      this.type = type;
+      this.sortOrder = sortBy || wootConstants.INBOX_SORT_BY.NEWEST;
+    },
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -0,0 +1,217 @@
+<template>
+  <section class="flex w-full h-full bg-white dark:bg-slate-900">
+    <inbox-list
+      v-show="showConversationList"
+      :conversation-id="conversationId"
+      :is-on-expanded-layout="isOnExpandedLayout"
+    />
+    <div
+      v-if="showInboxMessageView"
+      class="flex flex-col h-full"
+      :class="isOnExpandedLayout ? 'w-full' : 'w-[calc(100%-360px)]'"
+    >
+      <inbox-item-header
+        :total-length="totalNotifications"
+        :current-index="activeNotificationIndex"
+        :active-notification="activeNotification"
+        @next="onClickNext"
+        @prev="onClickPrev"
+      />
+      <conversation-box
+        class="h-[calc(100%-56px)]"
+        is-inbox-view
+        :inbox-id="inboxId"
+        :is-contact-panel-open="isContactPanelOpen"
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @contact-panel-toggle="onToggleContactPanel"
+      />
+    </div>
+    <div
+      v-if="!showInboxMessageView && !isOnExpandedLayout"
+      class="text-center bg-slate-25 dark:bg-slate-800 justify-center w-full h-full flex items-center"
+    >
+      <span v-if="uiFlags.isFetching" class="spinner mt-4 mb-4" />
+      <div v-else class="flex flex-col items-center gap-2">
+        <fluent-icon
+          icon="mail-inbox"
+          size="40"
+          class="text-slate-600 dark:text-slate-400"
+        />
+        <span class="text-slate-500 text-sm font-medium dark:text-slate-300">
+          {{ $t('INBOX.LIST.NOTE') }}
+        </span>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import InboxList from './InboxList.vue';
+import InboxItemHeader from './components/InboxItemHeader.vue';
+import ConversationBox from 'dashboard/components/widgets/conversation/ConversationBox.vue';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import wootConstants from 'dashboard/constants/globals';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
+export default {
+  components: {
+    InboxList,
+    InboxItemHeader,
+    ConversationBox,
+  },
+  mixins: [uiSettingsMixin],
+  props: {
+    inboxId: {
+      type: [String, Number],
+      default: 0,
+    },
+    conversationId: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      currentAccountId: 'getCurrentAccountId',
+      notifications: 'notifications/getNotifications',
+      currentChat: 'getSelectedChat',
+      allConversation: 'getAllConversations',
+      uiFlags: 'notifications/getUIFlags',
+    }),
+    activeNotification() {
+      return this.notifications.find(
+        n => n.primary_actor.id === Number(this.conversationId)
+      );
+    },
+    isInboxViewEnabled() {
+      return this.$store.getters['accounts/isFeatureEnabledGlobally'](
+        this.currentAccountId,
+        FEATURE_FLAGS.INBOX_VIEW
+      );
+    },
+    showConversationList() {
+      return this.isOnExpandedLayout ? !this.conversationId : true;
+    },
+    isFetchingInitialData() {
+      return this.uiFlags.isFetching && !this.notifications.length;
+    },
+    showInboxMessageView() {
+      return (
+        Boolean(this.conversationId) &&
+        Boolean(this.currentChat.id) &&
+        !this.isFetchingInitialData
+      );
+    },
+    totalNotifications() {
+      return this.notifications?.length ?? 0;
+    },
+    activeNotificationIndex() {
+      const conversationId = Number(this.conversationId);
+      const notificationIndex = this.notifications.findIndex(
+        n => n.primary_actor.id === conversationId
+      );
+      return notificationIndex >= 0 ? notificationIndex + 1 : 0;
+    },
+    isOnExpandedLayout() {
+      const {
+        LAYOUT_TYPES: { CONDENSED },
+      } = wootConstants;
+      const { conversation_display_type: conversationDisplayType = CONDENSED } =
+        this.uiSettings;
+      return conversationDisplayType !== CONDENSED;
+    },
+    isContactPanelOpen() {
+      if (this.currentChat.id) {
+        const { is_contact_sidebar_open: isContactSidebarOpen } =
+          this.uiSettings;
+        return isContactSidebarOpen;
+      }
+      return false;
+    },
+  },
+  watch: {
+    conversationId: {
+      immediate: true,
+      handler() {
+        this.fetchConversationById();
+      },
+    },
+  },
+  mounted() {
+    // Open inbox view if inbox view feature is enabled, else redirect to dashboard
+    // TODO: Remove this code once inbox view feature is enabled for all accounts
+    if (!this.isInboxViewEnabled) {
+      this.$router.push({
+        name: 'home',
+      });
+    }
+    this.$store.dispatch('agents/get');
+  },
+  methods: {
+    async fetchConversationById() {
+      if (!this.conversationId) return;
+      const chat = this.findConversation();
+      if (!chat) {
+        await this.$store.dispatch('getConversation', this.conversationId);
+      }
+      this.setActiveChat();
+    },
+    setActiveChat() {
+      const selectedConversation = this.findConversation();
+      if (!selectedConversation) return;
+      this.$store
+        .dispatch('setActiveChat', { data: selectedConversation })
+        .then(() => {
+          bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
+        });
+    },
+    findConversation() {
+      const conversationId = Number(this.conversationId);
+      return this.allConversation.find(c => c.id === conversationId);
+    },
+    navigateToConversation(activeIndex, direction) {
+      const indexOffset = direction === 'next' ? 0 : -2;
+      const targetNotification = this.notifications[activeIndex + indexOffset];
+      if (targetNotification) {
+        const {
+          id,
+          primary_actor_id: primaryActorId,
+          primary_actor_type: primaryActorType,
+          primary_actor: { id: conversationId, meta: { unreadCount } = {} },
+          notification_type: notificationType,
+        } = targetNotification;
+
+        this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_INBOX, {
+          notificationType,
+        });
+
+        this.$store.dispatch('notifications/read', {
+          id,
+          primaryActorId,
+          primaryActorType,
+          unreadCount,
+        });
+
+        this.$router.push({
+          name: 'inbox_view_conversation',
+          params: { conversation_id: conversationId },
+        });
+      }
+    },
+    onClickNext() {
+      this.navigateToConversation(this.activeNotificationIndex, 'next');
+    },
+    onClickPrev() {
+      this.navigateToConversation(this.activeNotificationIndex, 'prev');
+    },
+    onToggleContactPanel() {
+      this.updateUISettings({
+        is_contact_sidebar_open: !this.isContactPanelOpen,
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,236 @@
+<template>
+  <div
+    role="button"
+    class="flex flex-col ltr:pl-5 rtl:pl-3 rtl:pr-5 ltr:pr-3 gap-2.5 py-3 w-full border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
+    :class="
+      isInboxCardActive
+        ? 'bg-slate-25 dark:bg-slate-800 click-animation'
+        : 'bg-white dark:bg-slate-900'
+    "
+    @contextmenu="openContextMenu($event)"
+    @click="openConversation(notificationItem)"
+  >
+    <div class="flex relative items-center justify-between w-full">
+      <div
+        v-if="isUnread"
+        class="absolute ltr:-left-3.5 rtl:-right-3.5 flex w-2 h-2 rounded bg-woot-500 dark:bg-woot-500"
+      />
+      <InboxNameAndId :inbox="inbox" :conversation-id="primaryActor.id" />
+
+      <div class="flex gap-2">
+        <PriorityIcon :priority="primaryActor.priority" />
+        <StatusIcon :status="primaryActor.status" />
+      </div>
+    </div>
+
+    <div class="flex flex-row justify-between items-center w-full">
+      <div class="flex gap-1.5 items-center max-w-[calc(100%-70px)]">
+        <Thumbnail
+          v-if="assigneeMeta"
+          :src="assigneeMeta.thumbnail"
+          :username="assigneeMeta.name"
+          size="16px"
+          class="relative bottom-0.5"
+        />
+        <div class="flex min-w-0">
+          <span
+            class="text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
+            :class="isUnread ? 'font-medium' : 'font-normal'"
+          >
+            {{ pushTitle }}
+          </span>
+        </div>
+      </div>
+      <span
+        class="font-medium max-w-[60px] text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
+      >
+        {{ lastActivityAt }}
+      </span>
+    </div>
+    <div v-if="snoozedUntilTime" class="flex items-center">
+      <span class="text-woot-500 dark:text-woot-500 text-xs font-medium">
+        {{ snoozedDisplayText }}
+      </span>
+    </div>
+    <inbox-context-menu
+      v-if="isContextMenuOpen"
+      :context-menu-position="contextMenuPosition"
+      :menu-items="menuItems"
+      @close="closeContextMenu"
+      @click="handleAction"
+    />
+  </div>
+</template>
+<script>
+import PriorityIcon from './PriorityIcon.vue';
+import StatusIcon from './StatusIcon.vue';
+import InboxNameAndId from './InboxNameAndId.vue';
+import InboxContextMenu from './InboxContextMenu.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import timeMixin from 'dashboard/mixins/time';
+import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
+import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+export default {
+  components: {
+    PriorityIcon,
+    InboxContextMenu,
+    StatusIcon,
+    InboxNameAndId,
+    Thumbnail,
+  },
+  mixins: [timeMixin],
+  props: {
+    notificationItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      isContextMenuOpen: false,
+      contextMenuPosition: { x: null, y: null },
+    };
+  },
+  computed: {
+    primaryActor() {
+      return this.notificationItem?.primary_actor;
+    },
+    isInboxCardActive() {
+      return this.$route.params.conversation_id === this.primaryActor?.id;
+    },
+    inbox() {
+      return this.$store.getters['inboxes/getInbox'](
+        this.primaryActor.inbox_id
+      );
+    },
+    isUnread() {
+      return !this.notificationItem?.read_at;
+    },
+    meta() {
+      return this.primaryActor?.meta;
+    },
+    assigneeMeta() {
+      return this.meta?.assignee;
+    },
+    pushTitle() {
+      return this.$t(
+        `INBOX.TYPES.${this.notificationItem.notification_type.toUpperCase()}`
+      );
+    },
+    lastActivityAt() {
+      const dynamicTime = this.dynamicTime(
+        this.notificationItem?.last_activity_at
+      );
+      return this.shortTimestamp(dynamicTime, true);
+    },
+    menuItems() {
+      const items = [
+        {
+          key: 'delete',
+          label: this.$t('INBOX.MENU_ITEM.DELETE'),
+        },
+      ];
+
+      if (!this.isUnread) {
+        items.push({
+          key: 'mark_as_unread',
+          label: this.$t('INBOX.MENU_ITEM.MARK_AS_UNREAD'),
+        });
+      } else {
+        items.push({
+          key: 'mark_as_read',
+          label: this.$t('INBOX.MENU_ITEM.MARK_AS_READ'),
+        });
+      }
+      return items;
+    },
+    snoozedUntilTime() {
+      const { snoozed_until: snoozedUntil } = this.notificationItem;
+      return snoozedUntil;
+    },
+    snoozedDisplayText() {
+      if (this.snoozedUntilTime) {
+        return `${this.$t('INBOX.LIST.SNOOZED_UNTIL')} ${snoozedReopenTime(
+          this.snoozedUntilTime
+        )}`;
+      }
+      return '';
+    },
+  },
+  unmounted() {
+    this.closeContextMenu();
+  },
+  methods: {
+    openConversation(notification) {
+      const {
+        id,
+        primary_actor_id: primaryActorId,
+        primary_actor_type: primaryActorType,
+        primary_actor: { id: conversationId, inbox_id: inboxId },
+        notification_type: notificationType,
+      } = notification;
+
+      if (this.$route.params.conversation_id !== conversationId) {
+        this.$track(INBOX_EVENTS.OPEN_CONVERSATION_VIA_INBOX, {
+          notificationType,
+        });
+
+        this.$store.dispatch('notifications/read', {
+          id,
+          primaryActorId,
+          primaryActorType,
+          unreadCount: this.meta.unreadCount,
+        });
+
+        this.$router.push({
+          name: 'inbox_view_conversation',
+          params: { inboxId, conversation_id: conversationId },
+        });
+      }
+    },
+    closeContextMenu() {
+      this.isContextMenuOpen = false;
+      this.contextMenuPosition = { x: null, y: null };
+    },
+    openContextMenu(e) {
+      this.closeContextMenu();
+      e.preventDefault();
+      this.contextMenuPosition = {
+        x: e.pageX || e.clientX,
+        y: e.pageY || e.clientY,
+      };
+      this.isContextMenuOpen = true;
+    },
+    handleAction(key) {
+      switch (key) {
+        case 'mark_as_read':
+          this.$emit('mark-notification-as-read', this.notificationItem);
+          break;
+        case 'mark_as_unread':
+          this.$emit('mark-notification-as-unread', this.notificationItem);
+          break;
+        case 'delete':
+          this.$emit('delete-notification', this.notificationItem);
+          break;
+        default:
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.click-animation {
+  animation: click-animation 0.3s ease-in-out;
+}
+@keyframes click-animation {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.99);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>

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

@@ -0,0 +1,46 @@
+<template>
+  <woot-context-menu
+    :x="contextMenuPosition.x"
+    :y="contextMenuPosition.y"
+    @close="handleClose"
+  >
+    <div
+      class="bg-white dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl"
+    >
+      <menu-item
+        v-for="item in menuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onMenuItemClick(item.key)"
+      />
+    </div>
+  </woot-context-menu>
+</template>
+
+<script>
+import MenuItem from './MenuItem.vue';
+export default {
+  components: {
+    MenuItem,
+  },
+  props: {
+    contextMenuPosition: {
+      type: Object,
+      default: () => ({}),
+    },
+    menuItems: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    handleClose() {
+      this.$emit('close');
+    },
+    onMenuItemClick(key) {
+      this.$emit('click', key);
+      this.handleClose();
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,198 @@
+<template>
+  <div
+    class="flex flex-col bg-white z-50 dark:bg-slate-900 w-[170px] border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
+  >
+    <div class="flex items-center justify-between h-11 p-3 rounded-t-lg">
+      <div class="flex gap-1.5">
+        <fluent-icon
+          icon="arrow-sort"
+          type="outline"
+          size="16"
+          class="text-slate-700 dark:text-slate-100"
+        />
+        <span class="font-medium text-xs text-slate-800 dark:text-slate-100">
+          {{ $t('INBOX.DISPLAY_MENU.SORT') }}
+        </span>
+      </div>
+      <div class="relative">
+        <div
+          role="button"
+          class="border h-5 flex gap-1 rounded-md items-center pr-1.5 pl-1 py-0.5 w-[70px] justify-between border-slate-100 dark:border-slate-700/50"
+          @click="openSortMenu"
+        >
+          <span class="text-xs font-medium text-slate-600 dark:text-slate-300">
+            {{ activeSortOption }}
+          </span>
+          <fluent-icon
+            icon="chevron-down"
+            size="12"
+            class="text-slate-600 dark:text-slate-200"
+          />
+        </div>
+        <div
+          v-if="showSortMenu"
+          class="absolute flex flex-col gap-0.5 bg-white z-60 dark:bg-slate-800 rounded-md p-0.5 top-0 w-[70px] border border-slate-100 dark:border-slate-700/50"
+        >
+          <div
+            v-for="option in sortOptions"
+            :key="option.key"
+            role="button"
+            class="flex rounded-[4px] h-5 w-full items-center justify-between p-0.5 gap-1"
+            :class="{
+              'bg-woot-50 dark:bg-woot-700/50': activeSort === option.key,
+            }"
+            @click.stop="onSortOptionClick(option)"
+          >
+            <span
+              class="text-xs font-medium hover:text-woot-600 dark:hover:text-woot-600"
+              :class="{
+                'text-woot-600 dark:text-woot-600': activeSort === option.key,
+                'text-slate-600 dark:text-slate-300': activeSort !== option.key,
+              }"
+            >
+              {{ option.name }}
+            </span>
+            <fluent-icon
+              v-if="activeSort === option.key"
+              icon="checkmark"
+              size="14"
+              class="text-woot-600 dark:text-woot-600"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <span
+        class="font-medium text-xs py-4 px-3 text-slate-400 dark:text-slate-400"
+      >
+        {{ $t('INBOX.DISPLAY_MENU.DISPLAY') }}
+      </span>
+      <div
+        class="flex flex-col divide-y divide-slate-100 dark:divide-slate-700/50"
+      >
+        <div
+          v-for="option in displayOptions"
+          :key="option.key"
+          class="flex items-center px-3 py-2 gap-1.5 h-9"
+        >
+          <input
+            :id="option.key"
+            type="checkbox"
+            :name="option.key"
+            :checked="option.selected"
+            class="m-0 border-[1.5px] shadow border-slate-200 dark:border-slate-600 appearance-none rounded-[4px] w-4 h-4 dark:bg-slate-800 focus:ring-1 focus:ring-slate-100 dark:focus:ring-slate-700 checked:bg-woot-600 dark:checked:bg-woot-600 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center checked:border-t checked:border-woot-700 dark:checked:border-woot-300 checked:border-b-0 checked:border-r-0 checked:border-l-0 after:text-center after:text-xs after:font-bold after:relative after:-top-[1.5px]"
+            @change="updateDisplayOption(option)"
+          />
+          <label
+            :for="option.key"
+            class="text-xs font-medium text-slate-800 !ml-0 !mr-0 dark:text-slate-100"
+          >
+            {{ option.name }}
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import wootConstants from 'dashboard/constants/globals';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+
+export default {
+  mixins: [uiSettingsMixin],
+  data() {
+    return {
+      showSortMenu: false,
+      displayOptions: [
+        {
+          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.SNOOZED'),
+          key: wootConstants.INBOX_DISPLAY_BY.SNOOZED,
+          selected: false,
+          type: wootConstants.INBOX_FILTER_TYPE.STATUS,
+        },
+        {
+          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.READ'),
+          key: wootConstants.INBOX_DISPLAY_BY.READ,
+          selected: false,
+          type: wootConstants.INBOX_FILTER_TYPE.TYPE,
+        },
+      ],
+      sortOptions: [
+        {
+          name: this.$t('INBOX.DISPLAY_MENU.SORT_OPTIONS.NEWEST'),
+          key: wootConstants.INBOX_SORT_BY.NEWEST,
+          type: wootConstants.INBOX_FILTER_TYPE.SORT_ORDER,
+        },
+        {
+          name: this.$t('INBOX.DISPLAY_MENU.SORT_OPTIONS.OLDEST'),
+          key: wootConstants.INBOX_SORT_BY.OLDEST,
+          type: wootConstants.INBOX_FILTER_TYPE.SORT_ORDER,
+        },
+      ],
+      activeSort: wootConstants.INBOX_SORT_BY.NEWEST,
+      activeDisplayFilter: {
+        status: '',
+        type: '',
+      },
+    };
+  },
+  computed: {
+    activeSortOption() {
+      return (
+        this.sortOptions.find(option => option.key === this.activeSort)?.name ||
+        ''
+      );
+    },
+  },
+  mounted() {
+    this.setSavedFilter();
+  },
+  methods: {
+    updateDisplayOption(option) {
+      this.displayOptions.forEach(displayOption => {
+        if (displayOption.key === option.key) {
+          displayOption.selected = !option.selected;
+          this.activeDisplayFilter[displayOption.type] = displayOption.selected
+            ? displayOption.key
+            : '';
+          this.saveSelectedDisplayFilter();
+          this.$emit('filter', option);
+        }
+      });
+    },
+    openSortMenu() {
+      this.showSortMenu = !this.showSortMenu;
+    },
+    onSortOptionClick(option) {
+      this.activeSort = option.key;
+      this.showSortMenu = false;
+      this.saveSelectedDisplayFilter();
+      this.$emit('filter', option);
+    },
+    saveSelectedDisplayFilter() {
+      this.updateUISettings({
+        inbox_filter_by: {
+          ...this.activeDisplayFilter,
+          sort_by: this.activeSort || wootConstants.INBOX_SORT_BY.NEWEST,
+        },
+      });
+    },
+    setSavedFilter() {
+      const { inbox_filter_by: filterBy = {} } = this.uiSettings;
+      const { status, type, sort_by: sortBy } = filterBy;
+      this.activeSort = sortBy || wootConstants.INBOX_SORT_BY.NEWEST;
+      this.displayOptions.forEach(option => {
+        option.selected =
+          option.type === wootConstants.INBOX_FILTER_TYPE.STATUS
+            ? option.key === status
+            : option.key === type;
+        this.activeDisplayFilter[option.type] = option.selected
+          ? option.key
+          : '';
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,145 @@
+<template>
+  <div
+    class="flex gap-2 py-2 ltr:pl-4 rtl:pl-2 h-14 ltr:pr-2 rtl:pr-4 rtl:border-r justify-between items-center w-full border-b border-slate-50 dark:border-slate-800/50"
+  >
+    <pagination-button
+      v-if="totalLength > 1"
+      :total-length="totalLength"
+      :current-index="currentIndex"
+      @next="onClickNext"
+      @prev="onClickPrev"
+    />
+    <div v-else />
+    <div class="flex items-center gap-2">
+      <woot-button
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        icon="snooze"
+        @click="openSnoozeNotificationModal"
+      >
+        {{ $t('INBOX.ACTION_HEADER.SNOOZE') }}
+      </woot-button>
+      <woot-button
+        icon="delete"
+        size="small"
+        color-scheme="secondary"
+        variant="hollow"
+        @click="deleteNotification"
+      >
+        {{ $t('INBOX.ACTION_HEADER.DELETE') }}
+      </woot-button>
+    </div>
+    <woot-modal
+      :show.sync="showCustomSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <custom-snooze-modal
+        @close="hideCustomSnoozeModal"
+        @choose-time="scheduleCustomSnooze"
+      />
+    </woot-modal>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import { getUnixTime } from 'date-fns';
+import { CMD_SNOOZE_NOTIFICATION } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+import wootConstants from 'dashboard/constants/globals';
+import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
+import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import PaginationButton from './PaginationButton.vue';
+import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  components: {
+    PaginationButton,
+    CustomSnoozeModal,
+  },
+  mixins: [alertMixin],
+  props: {
+    totalLength: {
+      type: Number,
+      default: 0,
+    },
+    currentIndex: {
+      type: Number,
+      default: 0,
+    },
+    activeNotification: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      showCustomSnoozeModal: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      meta: 'notifications/getMeta',
+    }),
+  },
+  mounted() {
+    bus.$on(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
+  },
+  destroyed() {
+    bus.$off(CMD_SNOOZE_NOTIFICATION, this.onCmdSnoozeNotification);
+  },
+  methods: {
+    openSnoozeNotificationModal() {
+      const ninja = document.querySelector('ninja-keys');
+      ninja.open({ parent: 'snooze_notification' });
+    },
+    hideCustomSnoozeModal() {
+      this.showCustomSnoozeModal = false;
+    },
+    snoozeNotification(snoozedUntil) {
+      this.$store
+        .dispatch('notifications/snooze', {
+          id: this.activeNotification?.id,
+          snoozedUntil,
+        })
+        .then(() => {
+          this.showAlert(this.$t('INBOX.ALERTS.SNOOZE'));
+        });
+    },
+    onCmdSnoozeNotification(snoozeType) {
+      if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
+        this.showCustomSnoozeModal = true;
+      } else {
+        const snoozedUntil = findSnoozeTime(snoozeType) || null;
+        this.snoozeNotification(snoozedUntil);
+      }
+    },
+    scheduleCustomSnooze(customSnoozeTime) {
+      this.showCustomSnoozeModal = false;
+      if (customSnoozeTime) {
+        const snoozedUntil = getUnixTime(customSnoozeTime) || null;
+        this.snoozeNotification(snoozedUntil);
+      }
+    },
+    deleteNotification() {
+      this.$track(INBOX_EVENTS.DELETE_NOTIFICATION);
+      this.$store
+        .dispatch('notifications/delete', {
+          notification: this.activeNotification,
+          unread_count: this.meta.unreadCount,
+          count: this.meta.count,
+        })
+        .then(() => {
+          this.showAlert(this.$t('INBOX.ALERTS.DELETE'));
+        });
+      this.$router.push({ name: 'inbox_view' });
+    },
+    onClickNext() {
+      this.$emit('next');
+    },
+    onClickPrev() {
+      this.$emit('prev');
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,123 @@
+<template>
+  <div
+    class="flex w-full ltr:pl-4 rtl:pl-2 rtl:pr-4 ltr:pr-2 py-2 h-14 justify-between items-center border-b border-slate-50 dark:border-slate-800/50"
+  >
+    <div class="flex items-center gap-1.5">
+      <h1 class="font-medium text-slate-900 dark:text-slate-25 text-xl">
+        {{ $t('INBOX.LIST.TITLE') }}
+      </h1>
+      <div class="relative">
+        <div
+          role="button"
+          class="flex gap-1 items-center py-1 px-2 border border-slate-100 dark:border-slate-700/50 rounded-md"
+          @click="openInboxDisplayMenu"
+        >
+          <span
+            class="text-slate-600 dark:text-slate-200 text-xs text-center font-medium"
+          >
+            {{ $t('INBOX.LIST.DISPLAY_DROPDOWN') }}
+          </span>
+          <fluent-icon
+            icon="chevron-down"
+            size="12"
+            class="text-slate-600 dark:text-slate-200"
+          />
+        </div>
+        <inbox-display-menu
+          v-if="showInboxDisplayMenu"
+          v-on-clickaway="openInboxDisplayMenu"
+          class="absolute top-8"
+          @filter="onFilterChange"
+        />
+      </div>
+    </div>
+    <div class="flex relative gap-1 items-center">
+      <!-- <woot-button
+        variant="clear"
+        size="small"
+        color-scheme="secondary"
+        icon="filter"
+        @click="openInboxFilter"
+      /> -->
+      <woot-button
+        variant="clear"
+        size="small"
+        color-scheme="secondary"
+        icon="mail-inbox"
+        @click="openInboxOptionsMenu"
+      />
+      <inbox-option-menu
+        v-if="showInboxOptionMenu"
+        v-on-clickaway="openInboxOptionsMenu"
+        class="absolute top-9"
+        @option-click="onInboxOptionMenuClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import InboxOptionMenu from './InboxOptionMenu.vue';
+import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import InboxDisplayMenu from './InboxDisplayMenu.vue';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  components: {
+    InboxOptionMenu,
+    InboxDisplayMenu,
+  },
+  mixins: [clickaway, alertMixin],
+  data() {
+    return {
+      showInboxDisplayMenu: false,
+      showInboxOptionMenu: false,
+    };
+  },
+  methods: {
+    markAllRead() {
+      this.$track(INBOX_EVENTS.MARK_ALL_NOTIFICATIONS_AS_READ);
+      this.$store.dispatch('notifications/readAll').then(() => {
+        this.showAlert(this.$t('INBOX.ALERTS.MARK_ALL_READ'));
+      });
+    },
+    deleteAll() {
+      this.$store.dispatch('notifications/deleteAll').then(() => {
+        this.showAlert(this.$t('INBOX.ALERTS.DELETE_ALL'));
+      });
+    },
+    deleteAllRead() {
+      this.$store.dispatch('notifications/deleteAllRead').then(() => {
+        this.showAlert(this.$t('INBOX.ALERTS.DELETE_ALL_READ'));
+      });
+    },
+    openInboxDisplayMenu() {
+      this.showInboxDisplayMenu = !this.showInboxDisplayMenu;
+    },
+    openInboxOptionsMenu() {
+      this.showInboxOptionMenu = !this.showInboxOptionMenu;
+    },
+    onInboxOptionMenuClick(key) {
+      this.showInboxOptionMenu = false;
+      if (key === 'mark_all_read') {
+        this.markAllRead();
+      }
+      if (key === 'delete_all') {
+        this.deleteAll();
+      }
+      if (key === 'delete_all_read') {
+        this.deleteAllRead();
+      }
+    },
+    onFilterChange(option) {
+      this.$emit('filter', option);
+      this.showInboxDisplayMenu = false;
+      if (this.$route.name === 'inbox_view') return;
+      this.$router.push({ name: 'inbox_view' });
+    },
+  },
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,44 @@
+<script>
+import { getInboxClassByType } from 'dashboard/helper/inbox';
+
+export default {
+  props: {
+    inbox: {
+      type: Object,
+      default: () => {},
+    },
+    conversationId: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    inboxIcon() {
+      const { phone_number: phoneNumber, channel_type: type } = this.inbox;
+      const classByType = getInboxClassByType(type, phoneNumber);
+      return classByType;
+    },
+  },
+};
+</script>
+<template>
+  <div
+    class="inline-flex items-center rounded-[4px] border border-slate-100 dark:border-slate-700/50 divide-x divide-slate-100 dark:divide-slate-700/50 bg-none"
+  >
+    <div v-if="inbox" class="flex items-center gap-0.5 py-0.5 px-1.5">
+      <fluent-icon
+        class="text-slate-600 dark:text-slate-300"
+        :icon="inboxIcon"
+        size="14"
+      />
+      <span class="font-medium text-slate-600 dark:text-slate-200 text-xs">
+        {{ inbox.name }}
+      </span>
+    </div>
+    <div class="flex items-center py-0.5 px-1.5">
+      <span class="font-medium text-slate-600 dark:text-slate-200 text-xs">
+        {{ conversationId }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="flex flex-col gap-1 bg-white z-50 dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
+  >
+    <div class="flex flex-col">
+      <menu-item
+        v-for="item in menuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onClick(item.key)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuItem from './MenuItem.vue';
+export default {
+  components: {
+    MenuItem,
+  },
+  data() {
+    return {
+      menuItems: [
+        {
+          key: 'mark_all_read',
+          label: this.$t('INBOX.MENU_ITEM.MARK_ALL_READ'),
+        },
+        {
+          key: 'delete_all',
+          label: this.$t('INBOX.MENU_ITEM.DELETE_ALL'),
+        },
+        {
+          key: 'delete_all_read',
+          label: this.$t('INBOX.MENU_ITEM.DELETE_ALL_READ'),
+        },
+      ],
+    };
+  },
+  methods: {
+    onClick(key) {
+      this.$emit('option-click', key);
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,25 @@
+<script setup>
+import { defineProps, defineEmits } from 'vue';
+
+defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+});
+
+const emits = defineEmits(['click']);
+
+const onMenuItemClick = () => {
+  emits('click');
+};
+</script>
+<template>
+  <div
+    role="button"
+    class="py-1 px-2 w-full h-8 font-medium text-xs text-slate-800 dark:text-slate-100 flex items-center whitespace-nowrap text-ellipsis overflow-hidden hover:text-woot-600 dark:hover:text-woot-500 cursor-pointer rounded-md"
+    @click.stop="onMenuItemClick"
+  >
+    {{ label }}
+  </div>
+</template>

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="flex gap-2 items-center">
+    <div class="flex gap-1 items-center">
+      <woot-button
+        size="tiny"
+        variant="hollow"
+        color-scheme="secondary"
+        icon="chevron-up"
+        :disabled="isUpDisabled"
+        @click="handleUpClick"
+      />
+      <woot-button
+        size="tiny"
+        variant="hollow"
+        color-scheme="secondary"
+        icon="chevron-down"
+        :disabled="isDownDisabled"
+        @click="handleDownClick"
+      />
+    </div>
+    <div class="flex items-center gap-1 whitespace-nowrap">
+      <span class="text-sm font-medium text-gray-600">
+        {{ totalLength <= 1 ? '1' : currentIndex }}
+      </span>
+      <span
+        v-if="totalLength > 1"
+        class="text-sm text-slate-400 relative -top-px"
+      >
+        /
+      </span>
+      <span v-if="totalLength > 1" class="text-sm text-slate-400">
+        {{ totalLength }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    totalLength: {
+      type: Number,
+      default: 0,
+    },
+    currentIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    isUpDisabled() {
+      return this.currentIndex === 1;
+    },
+    isDownDisabled() {
+      return this.currentIndex === this.totalLength || this.totalLength <= 1;
+    },
+  },
+  methods: {
+    handleUpClick() {
+      if (this.currentIndex > 1) {
+        this.$emit('prev');
+      }
+    },
+    handleDownClick() {
+      if (this.currentIndex < this.totalLength) {
+        this.$emit('next');
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,80 @@
+<script>
+import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
+export default {
+  props: {
+    priority: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      CONVERSATION_PRIORITY,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="inline-flex items-center justify-center rounded-md">
+    <!-- High Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.HIGH"
+      class="h-4 w-4"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="12" width="4" height="8" rx="1" fill="#FFC291" />
+      <rect x="10" y="8" width="4" height="12" rx="1" fill="#FFC291" />
+      <rect x="16" y="4" width="4" height="16" rx="1" fill="#FFC291" />
+    </svg>
+
+    <!-- Low Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.LOW"
+      class="h-4 w-4"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="12" width="4" height="8" rx="1" fill="#FFC291" />
+      <rect x="10" y="8" width="4" height="12" rx="1" fill="#DDDDDD" />
+      <rect x="16" y="4" width="4" height="16" rx="1" fill="#DDDDDD" />
+    </svg>
+
+    <!-- Medium Priority  -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.MEDIUM"
+      class="h-4 w-4"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="12" width="4" height="8" rx="1" fill="#FFC291" />
+      <rect x="10" y="8" width="4" height="12" rx="1" fill="#FFC291" />
+      <rect x="16" y="4" width="4" height="16" rx="1" fill="#DDDDDD" />
+    </svg>
+
+    <!-- Urgent Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.URGENT"
+      class="h-4 w-4"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="12" width="4" height="8" rx="1" fill="#E5484D" />
+      <rect x="10" y="8" width="4" height="12" rx="1" fill="#E5484D" />
+      <rect x="16" y="4" width="4" height="16" rx="1" fill="#E5484D" />
+    </svg>
+  </div>
+</template>

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

@@ -0,0 +1,86 @@
+<template>
+  <div class="inline-flex items-center justify-center rounded-md">
+    <!-- Pending -->
+    <svg
+      v-if="status === CONVERSATION_STATUS.PENDING"
+      class="h-3.5 w-3.5"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.1 0.0449978V1.8558C4.5486 2.2986 1.8 5.328 1.8 9C1.8 12.9762 5.0238 16.2 9 16.2C10.6641 16.2 12.195 15.6357 13.4154 14.688L14.6961 15.9687C13.1445 17.2377 11.16 18 9 18C4.0293 18 0 13.9707 0 9C0 4.3335 3.5523 0.495898 8.1 0.0449978ZM17.955 9.9C17.775 11.7099 17.0604 13.3623 15.9687 14.6952L14.688 13.4154C15.462 12.4191 15.9804 11.2149 16.1442 9.9H17.9559H17.955ZM9.9018 0.0449978C14.1534 0.467098 17.5338 3.8484 17.9568 8.1H16.1451C15.7392 4.8438 13.158 2.2626 9.9018 1.8558V0.0440979V0.0449978Z"
+        class="fill-[#B9BBC6]"
+      />
+    </svg>
+    <!-- Open -->
+    <svg
+      v-if="status === CONVERSATION_STATUS.OPEN"
+      class="h-3.5 w-3.5"
+      width="19"
+      height="19"
+      viewBox="0 0 19 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.375 18.875C4.19733 18.875 0 14.6776 0 9.5C0 4.32233 4.19733 0.125 9.375 0.125C14.5526 0.125 18.75 4.32233 18.75 9.5C18.75 14.6776 14.5526 18.875 9.375 18.875ZM9.375 17C13.5172 17 16.875 13.6422 16.875 9.5C16.875 5.35786 13.5172 2 9.375 2C5.23286 2 1.875 5.35786 1.875 9.5C1.875 13.6422 5.23286 17 9.375 17Z"
+        class="fill-[#ED8A5C]"
+      />
+    </svg>
+
+    <!-- Snoozed -->
+    <svg
+      v-if="status === CONVERSATION_STATUS.SNOOZED"
+      class="h-3.5 w-3.5"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9 18C4.0293 18 0 13.9707 0 9C0 4.0293 4.0293 0 9 0C13.9707 0 18 4.0293 18 9C18 13.9707 13.9707 18 9 18ZM2.9961 12.9825C3.58766 13.8676 4.36812 14.6105 5.28129 15.1577C6.19446 15.7049 7.21761 16.0428 8.27707 16.147C9.33652 16.2513 10.4059 16.1193 11.4082 15.7606C12.4105 15.4019 13.3208 14.8254 14.0736 14.0726C14.8263 13.3198 15.4027 12.4094 15.7613 11.4071C16.12 10.4047 16.2518 9.33532 16.1475 8.27588C16.0431 7.21644 15.7052 6.19332 15.1579 5.2802C14.6106 4.36707 13.8676 3.58668 12.9825 2.9952C13.3706 4.3796 13.383 5.84237 13.0186 7.23318C12.6542 8.62399 11.926 9.89269 10.9089 10.9089C9.89277 11.9258 8.62423 12.6539 7.23359 13.0183C5.84296 13.3828 4.38037 13.3704 2.9961 12.9825Z"
+        class="fill-[#0B68CB]"
+      />
+    </svg>
+
+    <!-- Resolved -->
+    <svg
+      v-if="status === CONVERSATION_STATUS.RESOLVED"
+      class="h-3.5 w-3.5"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="3 3 17.92 17.92"
+    >
+      <path
+        d="M11.96 20.92C7.01152 20.92 3 16.9084 3 11.96C3 7.01152 7.01152 3 11.96 3C16.9084 3 20.92 7.01152 20.92 11.96C20.92 16.9084 16.9084 20.92 11.96 20.92ZM11.96 19.128C15.9188 19.128 19.128 15.9188 19.128 11.96C19.128 8.00122 15.9188 4.792 11.96 4.792C8.00122 4.792 4.792 8.00122 4.792 11.96C4.792 15.9188 8.00122 19.128 11.96 19.128Z"
+        class="fill-[#5BB98C]"
+      />
+      <path
+        d="M11.9599 17.9333C15.2589 17.9333 17.9332 15.2589 17.9332 11.96C17.9332 8.66098 15.2589 5.98663 11.9599 5.98663C8.66092 5.98663 5.98657 8.66098 5.98657 11.96C5.98657 15.2589 8.66092 17.9333 11.9599 17.9333Z"
+        class="fill-[#5BB98C]"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+
+export default {
+  props: {
+    status: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      CONVERSATION_STATUS,
+    };
+  },
+};
+</script>

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue

@@ -188,6 +188,7 @@ export default {
         notificationType,
       });
       this.$store.dispatch('notifications/read', {
+        id: notification.id,
         primaryActorId,
         primaryActorType,
         unreadCount: this.meta.unreadCount,

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue

@@ -58,6 +58,7 @@ export default {
         notificationType,
       });
       this.$store.dispatch('notifications/read', {
+        id: notification.id,
         primaryActorId,
         primaryActorType,
         unreadCount: this.meta.unreadCount,

app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue

@@ -130,15 +130,23 @@ export default {
         this.showAlert(this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE'));
         this.onClose();
       } catch (error) {
-        const { response: { data: { error: errorResponse = '' } = {} } = {} } =
-          error;
+        const {
+          response: {
+            data: {
+              error: errorResponse = '',
+              attributes: attributes = [],
+              message: attrError = '',
+            } = {},
+          } = {},
+        } = error;
+
         let errorMessage = '';
-        if (error.response.status === 422) {
+        if (error.response.status === 422 && !attributes.includes('base')) {
           errorMessage = this.$t('AGENT_MGMT.ADD.API.EXIST_MESSAGE');
         } else {
           errorMessage = this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE');
         }
-        this.showAlert(errorResponse || errorMessage);
+        this.showAlert(errorResponse || attrError || errorMessage);
       }
     },
   },

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

@@ -143,9 +143,6 @@ export default {
             imap_login: this.login,
             imap_password: this.password,
             imap_enable_ssl: this.isSSLEnabled,
-            imap_inbox_synced_at: this.isIMAPEnabled
-              ? new Date().toISOString()
-              : undefined,
           },
         };
 

app/javascript/dashboard/store/modules/accounts.js

@@ -4,6 +4,9 @@ import AccountAPI from '../../api/account';
 import EnterpriseAccountAPI from '../../api/enterprise/account';
 import { throwErrorMessage } from '../utils/api';
 
+const findRecordById = ($state, id) =>
+  $state.records.find(record => record.id === Number(id)) || {};
+
 const state = {
   records: [],
   uiFlags: {
@@ -30,10 +33,15 @@ export const getters = {
         return true;
       }
 
-      const { features = {} } =
-        $state.records.find(record => record.id === Number(id)) || {};
+      const { features = {} } = findRecordById($state, id);
+
       return features[featureName] || false;
     },
+  // There are some features which can be enabled/disabled globally
+  isFeatureEnabledGlobally: $state => (id, featureName) => {
+    const { features = {} } = findRecordById($state, id);
+    return features[featureName] || false;
+  },
 };
 
 export const actions = {

app/javascript/dashboard/store/modules/auth.js

@@ -181,6 +181,14 @@ export const actions = {
       // Ignore error
     }
   },
+
+  resendConfirmation: async () => {
+    try {
+      await authAPI.resendConfirmation();
+    } catch (error) {
+      // Ignore error
+    }
+  },
 };
 
 // mutations

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -8,6 +8,7 @@ import {
   buildConversationList,
   isOnMentionsView,
   isOnUnattendedView,
+  isOnFoldersView,
 } from './helpers/actionHelpers';
 import messageReadActions from './actions/messageReadActions';
 import messageTranslateActions from './actions/messageTranslateActions';
@@ -321,12 +322,12 @@ const actions = {
       inbox_id: inboxId,
       meta: { sender },
     } = conversation;
-
     const hasAppliedFilters = !!appliedFilters.length;
     const isMatchingInboxFilter =
       !currentInbox || Number(currentInbox) === inboxId;
     if (
       !hasAppliedFilters &&
+      !isOnFoldersView(rootState) &&
       !isOnMentionsView(rootState) &&
       !isOnUnattendedView(rootState) &&
       isMatchingInboxFilter

app/javascript/dashboard/store/modules/conversations/helpers/actionHelpers.js

@@ -30,6 +30,14 @@ export const isOnUnattendedView = ({ route: { name: routeName } }) => {
   return UNATTENDED_ROUTES.includes(routeName);
 };
 
+export const isOnFoldersView = ({ route: { name: routeName } }) => {
+  const FOLDER_ROUTES = [
+    'folder_conversations',
+    'conversations_through_folders',
+  ];
+  return FOLDER_ROUTES.includes(routeName);
+};
+
 export const buildConversationList = (
   context,
   requestPayload,

app/javascript/dashboard/store/modules/conversations/helpers/specs/actionHelpers.spec.js

@@ -1,4 +1,4 @@
-import { isOnMentionsView } from '../actionHelpers';
+import { isOnMentionsView, isOnFoldersView } from '../actionHelpers';
 
 describe('#isOnMentionsView', () => {
   it('return valid responses when passing the state', () => {
@@ -10,3 +10,17 @@ describe('#isOnMentionsView', () => {
     );
   });
 });
+
+describe('#isOnFoldersView', () => {
+  it('return valid responses when passing the state', () => {
+    expect(isOnFoldersView({ route: { name: 'folder_conversations' } })).toBe(
+      true
+    );
+    expect(
+      isOnFoldersView({ route: { name: 'conversations_through_folders' } })
+    ).toBe(true);
+    expect(isOnFoldersView({ route: { name: 'conversation_messages' } })).toBe(
+      false
+    );
+  });
+});

app/javascript/dashboard/store/modules/notifications/actions.js

@@ -9,7 +9,7 @@ export const actions = {
         data: {
           data: { payload, meta },
         },
-      } = await NotificationsAPI.get(page);
+      } = await NotificationsAPI.get({ page });
       commit(types.CLEAR_NOTIFICATIONS);
       commit(types.SET_NOTIFICATIONS, payload);
       commit(types.SET_NOTIFICATIONS_META, meta);
@@ -18,6 +18,29 @@ export const actions = {
       commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
     }
   },
+  index: async ({ commit }, { page = 1, status, type, sortOrder } = {}) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true });
+    try {
+      const {
+        data: {
+          data: { payload, meta },
+        },
+      } = await NotificationsAPI.get({
+        page,
+        status,
+        type,
+        sortOrder,
+      });
+      commit(types.SET_NOTIFICATIONS, payload);
+      commit(types.SET_NOTIFICATIONS_META, meta);
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
+      if (payload.length < 15) {
+        commit(types.SET_ALL_NOTIFICATIONS_LOADED);
+      }
+    } catch (error) {
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
+    }
+  },
   unReadCount: async ({ commit } = {}) => {
     commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdatingUnreadCount: true });
     try {
@@ -30,14 +53,26 @@ export const actions = {
   },
   read: async (
     { commit },
-    { primaryActorType, primaryActorId, unreadCount }
+    { id, primaryActorType, primaryActorId, unreadCount }
   ) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true });
     try {
       await NotificationsAPI.read(primaryActorType, primaryActorId);
       commit(types.SET_NOTIFICATIONS_UNREAD_COUNT, unreadCount - 1);
-      commit(types.UPDATE_NOTIFICATION, primaryActorId);
+      commit(types.READ_NOTIFICATION, { id, read_at: new Date() });
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
     } catch (error) {
-      throw new Error(error);
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
+    }
+  },
+  unread: async ({ commit }, { id }) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true });
+    try {
+      await NotificationsAPI.unRead(id);
+      commit(types.READ_NOTIFICATION, { id, read_at: null });
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
+    } catch (error) {
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
     }
   },
   readAll: async ({ commit }) => {
@@ -53,10 +88,75 @@ export const actions = {
     }
   },
 
+  delete: async ({ commit }, { notification, count, unreadCount }) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true });
+    try {
+      await NotificationsAPI.delete(notification.id);
+      commit(types.SET_NOTIFICATIONS_UNREAD_COUNT, unreadCount - 1);
+      commit(types.DELETE_NOTIFICATION, { notification, count, unreadCount });
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false });
+    } catch (error) {
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false });
+    }
+  },
+
+  deleteAllRead: async ({ commit }) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true });
+    try {
+      await NotificationsAPI.deleteAll({
+        type: 'read',
+      });
+      commit(types.DELETE_READ_NOTIFICATIONS);
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false });
+    } catch (error) {
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false });
+    }
+  },
+  deleteAll: async ({ commit }) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true });
+    try {
+      await NotificationsAPI.deleteAll({
+        type: 'all',
+      });
+      commit(types.DELETE_ALL_NOTIFICATIONS);
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false });
+    } catch (error) {
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false });
+    }
+  },
+
+  snooze: async ({ commit }, { id, snoozedUntil }) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true });
+    try {
+      const response = await NotificationsAPI.snooze({
+        id,
+        snoozedUntil,
+      });
+
+      const {
+        data: { snoozed_until = null },
+      } = response;
+      commit(types.SNOOZE_NOTIFICATION, {
+        id,
+        snoozed_until,
+      });
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
+    } catch (error) {
+      commit(types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false });
+    }
+  },
+
+  updateNotification: async ({ commit }, data) => {
+    commit(types.UPDATE_NOTIFICATION, data);
+  },
+
   addNotification({ commit }, data) {
     commit(types.ADD_NOTIFICATION, data);
   },
   deleteNotification({ commit }, data) {
     commit(types.DELETE_NOTIFICATION, data);
   },
+  clear({ commit }) {
+    commit(types.CLEAR_NOTIFICATIONS);
+  },
 };

app/javascript/dashboard/store/modules/notifications/getters.js

@@ -1,7 +1,19 @@
+import { applyInboxPageFilters, sortComparator } from './helpers';
+
 export const getters = {
   getNotifications($state) {
     return Object.values($state.records).sort((n1, n2) => n2.id - n1.id);
   },
+  getFilteredNotifications: $state => filters => {
+    const sortOrder = filters.sortOrder === 'desc' ? 'newest' : 'oldest';
+    const filteredNotifications = Object.values($state.records).filter(
+      notification => applyInboxPageFilters(notification, filters)
+    );
+    const sortedNotifications = filteredNotifications.sort((a, b) =>
+      sortComparator(a, b, sortOrder)
+    );
+    return sortedNotifications;
+  },
   getUIFlags($state) {
     return $state.uiFlags;
   },

app/javascript/dashboard/store/modules/notifications/helpers.js

@@ -0,0 +1,45 @@
+export const filterByStatus = (snoozedUntil, filterStatus) =>
+  filterStatus === 'snoozed' ? !!snoozedUntil : !snoozedUntil;
+
+export const filterByType = (readAt, filterType) =>
+  filterType === 'read' ? !!readAt : !readAt;
+
+export const filterByTypeAndStatus = (
+  readAt,
+  snoozedUntil,
+  filterType,
+  filterStatus
+) => {
+  const shouldFilterByStatus = filterByStatus(snoozedUntil, filterStatus);
+  const shouldFilterByType = filterByType(readAt, filterType);
+  return shouldFilterByStatus && shouldFilterByType;
+};
+
+export const applyInboxPageFilters = (notification, filters) => {
+  const { status, type } = filters;
+  const { read_at: readAt, snoozed_until: snoozedUntil } = notification;
+
+  if (status && type)
+    return filterByTypeAndStatus(readAt, snoozedUntil, type, status);
+  if (status && !type) return filterByStatus(snoozedUntil, status);
+  if (!status && type) return filterByType(readAt, type);
+  return true;
+};
+
+const INBOX_SORT_OPTIONS = {
+  newest: 'desc',
+  oldest: 'asc',
+};
+
+const sortConfig = {
+  newest: (a, b) => b.created_at - a.created_at,
+  oldest: (a, b) => a.created_at - b.created_at,
+};
+
+export const sortComparator = (a, b, sortOrder) => {
+  const sortDirection = INBOX_SORT_OPTIONS[sortOrder];
+  if (sortOrder === 'newest' || sortOrder === 'oldest') {
+    return sortConfig[sortOrder](a, b, sortDirection);
+  }
+  return 0;
+};

app/javascript/dashboard/store/modules/notifications/index.js

@@ -13,7 +13,9 @@ const state = {
     isFetching: false,
     isFetchingItem: false,
     isUpdating: false,
+    isDeleting: false,
     isUpdatingUnreadCount: false,
+    isAllNotificationsLoaded: false,
   },
 };
 

app/javascript/dashboard/store/modules/notifications/mutations.js

@@ -10,6 +10,7 @@ export const mutations = {
   },
   [types.CLEAR_NOTIFICATIONS]: $state => {
     Vue.set($state, 'records', {});
+    Vue.set($state.uiFlags, 'isAllNotificationsLoaded', false);
   },
   [types.SET_NOTIFICATIONS_META]: ($state, data) => {
     const {
@@ -33,12 +34,8 @@ export const mutations = {
       });
     });
   },
-  [types.UPDATE_NOTIFICATION]: ($state, primaryActorId) => {
-    Object.values($state.records).forEach(item => {
-      if (item.primary_actor_id === primaryActorId) {
-        Vue.set($state.records[item.id], 'read_at', true);
-      }
-    });
+  [types.READ_NOTIFICATION]: ($state, { id, read_at }) => {
+    Vue.set($state.records[id], 'read_at', read_at);
   },
   [types.UPDATE_ALL_NOTIFICATIONS]: $state => {
     Object.values($state.records).forEach(item => {
@@ -55,10 +52,37 @@ export const mutations = {
     Vue.set($state.meta, 'unreadCount', unreadCount);
     Vue.set($state.meta, 'count', count);
   },
+  [types.UPDATE_NOTIFICATION]($state, data) {
+    const { notification, unread_count: unreadCount, count } = data;
+    Vue.set($state.records, notification.id, {
+      ...($state.records[notification.id] || {}),
+      ...notification,
+    });
+    Vue.set($state.meta, 'unreadCount', unreadCount);
+    Vue.set($state.meta, 'count', count);
+  },
   [types.DELETE_NOTIFICATION]($state, data) {
     const { notification, unread_count: unreadCount, count } = data;
     Vue.delete($state.records, notification.id);
     Vue.set($state.meta, 'unreadCount', unreadCount);
     Vue.set($state.meta, 'count', count);
   },
+  [types.SET_ALL_NOTIFICATIONS_LOADED]: $state => {
+    Vue.set($state.uiFlags, 'isAllNotificationsLoaded', true);
+  },
+
+  [types.DELETE_READ_NOTIFICATIONS]: $state => {
+    Object.values($state.records).forEach(item => {
+      if (item.read_at) {
+        Vue.delete($state.records, item.id);
+      }
+    });
+  },
+  [types.DELETE_ALL_NOTIFICATIONS]: $state => {
+    Vue.set($state, 'records', {});
+  },
+
+  [types.SNOOZE_NOTIFICATION]: ($state, { id, snoozed_until }) => {
+    Vue.set($state.records[id], 'snoozed_until', snoozed_until);
+  },
 };

app/javascript/dashboard/store/modules/specs/account/getters.spec.js

@@ -4,6 +4,10 @@ const accountData = {
   id: 1,
   name: 'Company one',
   locale: 'en',
+  features: {
+    auto_resolve_conversations: false,
+    agent_management: false,
+  },
 };
 
 describe('#getters', () => {
@@ -29,4 +33,32 @@ describe('#getters', () => {
       isDeleting: false,
     });
   });
+
+  it('isFeatureEnabledonAccount', () => {
+    const state = {
+      records: [accountData],
+    };
+    const rootGetters = {
+      getCurrentUser: {
+        type: 'SuperAdmin',
+      },
+    };
+    expect(
+      getters.isFeatureEnabledonAccount(
+        state,
+        null,
+        null,
+        rootGetters
+      )(1, 'auto_resolve_conversations')
+    ).toEqual(true);
+  });
+
+  it('isFeatureEnabledGlobally', () => {
+    const state = {
+      records: [accountData],
+    };
+    expect(
+      getters.isFeatureEnabledGlobally(state)(1, 'auto_resolve_conversations')
+    ).toEqual(false);
+  });
 });

app/javascript/dashboard/store/modules/specs/auth/actions.spec.js

@@ -12,7 +12,7 @@ jest.mock('../../../utils/api', () => ({
   getHeaderExpiry: jest.fn(),
 }));
 jest.mock('js-cookie', () => ({
-  getJSON: jest.fn(),
+  get: jest.fn(),
 }));
 
 const commit = jest.fn();
@@ -155,14 +155,14 @@ describe('#actions', () => {
 
   describe('#setUser', () => {
     it('sends correct actions if user is logged in', async () => {
-      Cookies.getJSON.mockImplementation(() => true);
+      Cookies.get.mockImplementation(() => true);
       actions.setUser({ commit, dispatch });
       expect(commit.mock.calls).toEqual([]);
       expect(dispatch.mock.calls).toEqual([['validityCheck']]);
     });
 
     it('sends correct actions if user is not logged in', async () => {
-      Cookies.getJSON.mockImplementation(() => false);
+      Cookies.get.mockImplementation(() => false);
       actions.setUser({ commit, dispatch });
       expect(commit.mock.calls).toEqual([
         [types.default.CLEAR_USER],

app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js

@@ -181,6 +181,26 @@ describe('#actions', () => {
       expect(dispatch.mock.calls).toEqual([]);
     });
 
+    it('doesnot send mutation if the view is conversation folders', () => {
+      const conversation = {
+        id: 1,
+        messages: [],
+        meta: { sender: { id: 1, name: 'john-doe' } },
+        inbox_id: 1,
+      };
+      actions.addConversation(
+        {
+          commit,
+          rootState: { route: { name: 'folder_conversations' } },
+          dispatch,
+          state: { currentInbox: 1, appliedFilters: [{ id: 'random-filter' }] },
+        },
+        conversation
+      );
+      expect(commit.mock.calls).toEqual([]);
+      expect(dispatch.mock.calls).toEqual([]);
+    });
+
     it('sends correct mutations', () => {
       const conversation = {
         id: 1,

app/javascript/dashboard/store/modules/specs/notifications/actions.spec.js

@@ -1,7 +1,6 @@
 import axios from 'axios';
 import { actions } from '../../notifications/actions';
 import types from '../../../mutation-types';
-
 const commit = jest.fn();
 global.axios = axios;
 jest.mock('axios');
@@ -39,6 +38,38 @@ describe('#actions', () => {
     });
   });
 
+  describe('#index', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: {
+          data: {
+            payload: [{ id: 1 }],
+            meta: { count: 3, current_page: 1, unread_count: 2 },
+          },
+        },
+      });
+      await actions.index({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true }],
+        [types.SET_NOTIFICATIONS, [{ id: 1 }]],
+        [
+          types.SET_NOTIFICATIONS_META,
+          { count: 3, current_page: 1, unread_count: 2 },
+        ],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false }],
+        [types.SET_ALL_NOTIFICATIONS_LOADED],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.get.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.index({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false }],
+      ]);
+    });
+  });
+
   describe('#unReadCount', () => {
     it('sends correct actions if API is success', async () => {
       axios.get.mockResolvedValue({ data: 1 });
@@ -62,18 +93,91 @@ describe('#actions', () => {
   describe('#read', () => {
     it('sends correct actions if API is success', async () => {
       axios.post.mockResolvedValue({});
-      await actions.read({ commit }, { unreadCount: 2, primaryActorId: 1 });
+      await actions.read(
+        { commit },
+        { id: 1, unreadCount: 2, primaryActorId: 1 }
+      );
       expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
         [types.SET_NOTIFICATIONS_UNREAD_COUNT, 1],
-        [types.UPDATE_NOTIFICATION, 1],
+        [types.READ_NOTIFICATION, { id: 1, read_at: expect.any(Date) }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
       ]);
     });
     it('sends correct actions if API is error', async () => {
       axios.post.mockRejectedValue({ message: 'Incorrect header' });
       await expect(actions.read({ commit })).rejects.toThrow(Error);
+      await actions.read(
+        { commit },
+        { id: 1, unreadCount: 2, primaryActorId: 1 }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
     });
   });
 
+  describe('#unread', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({});
+      await actions.unread({ commit }, { id: 1 });
+      expect(commit.mock.calls).toEqual([
+        ['SET_NOTIFICATIONS_UI_FLAG', { isUpdating: true }],
+        ['READ_NOTIFICATION', { id: 1, read_at: null }],
+        ['SET_NOTIFICATIONS_UI_FLAG', { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.unread({ commit })).rejects.toThrow(Error);
+      await actions.unread({ commit }, { id: 1 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
+
+  describe('#delete', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({});
+      await actions.delete(
+        { commit },
+        {
+          notification: { id: 1 },
+          count: 2,
+          unreadCount: 1,
+        }
+      );
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.SET_NOTIFICATIONS_UNREAD_COUNT, 0],
+        [
+          types.DELETE_NOTIFICATION,
+          { notification: { id: 1 }, count: 2, unreadCount: 1 },
+        ],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(actions.delete({ commit })).rejects.toThrow(Error);
+      await actions.delete(
+        { commit },
+        {
+          notification: { id: 1 },
+          count: 2,
+          unreadCount: 1,
+        }
+      );
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
   describe('#readAll', () => {
     it('sends correct actions if API is success', async () => {
       axios.post.mockResolvedValue({ data: 1 });
@@ -107,4 +211,76 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('clear', () => {
+    it('sends correct actions', async () => {
+      await actions.clear({ commit });
+      expect(commit.mock.calls).toEqual([[types.CLEAR_NOTIFICATIONS]]);
+    });
+  });
+
+  describe('deleteAllRead', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({});
+      await actions.deleteAllRead({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_READ_NOTIFICATIONS],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.deleteAllRead({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_READ_NOTIFICATIONS],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+
+  describe('deleteAll', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.delete.mockResolvedValue({});
+      await actions.deleteAll({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_ALL_NOTIFICATIONS],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.delete.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.deleteAll({ commit });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: true }],
+        [types.DELETE_ALL_NOTIFICATIONS],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isDeleting: false }],
+      ]);
+    });
+  });
+
+  describe('snooze', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({
+        data: { snoozed_until: '20 Jan, 5.04pm' },
+      });
+      await actions.snooze({ commit }, { id: 1, snoozedUntil: 1703057715 });
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
+        [types.SNOOZE_NOTIFICATION, { id: 1, snoozed_until: '20 Jan, 5.04pm' }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.post.mockRejectedValue({ message: 'Incorrect header' });
+      await actions.snooze({ commit }, { id: 1, snoozedUntil: 1703057715 });
+
+      expect(commit.mock.calls).toEqual([
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: true }],
+        [types.SET_NOTIFICATIONS_UI_FLAG, { isUpdating: false }],
+      ]);
+    });
+  });
 });

app/javascript/dashboard/store/modules/specs/notifications/getters.spec.js

@@ -16,6 +16,32 @@ describe('#getters', () => {
     ]);
   });
 
+  it('getFilteredNotifications', () => {
+    const state = {
+      records: {
+        1: { id: 1, read_at: '2024-02-07T11:42:39.988Z', snoozed_until: null },
+        2: { id: 2, read_at: null, snoozed_until: null },
+        3: {
+          id: 3,
+          read_at: '2024-02-07T11:42:39.988Z',
+          snoozed_until: '2024-02-07T11:42:39.988Z',
+        },
+      },
+    };
+    const filters = {
+      type: 'read',
+      status: 'snoozed',
+      sortOrder: 'desc',
+    };
+    expect(getters.getFilteredNotifications(state)(filters)).toEqual([
+      {
+        id: 3,
+        read_at: '2024-02-07T11:42:39.988Z',
+        snoozed_until: '2024-02-07T11:42:39.988Z',
+      },
+    ]);
+  });
+
   it('getUIFlags', () => {
     const state = {
       uiFlags: {

app/javascript/dashboard/store/modules/specs/notifications/helpers.spec.js

@@ -0,0 +1,200 @@
+import {
+  filterByStatus,
+  filterByType,
+  filterByTypeAndStatus,
+  applyInboxPageFilters,
+  sortComparator,
+} from '../../notifications/helpers';
+
+const notifications = [
+  {
+    id: 1,
+    read_at: '2024-02-07T11:42:39.988Z',
+    snoozed_until: null,
+    created_at: 1707328400,
+  },
+  {
+    id: 2,
+    read_at: null,
+    snoozed_until: null,
+    created_at: 1707233688,
+  },
+  {
+    id: 3,
+    read_at: '2024-01-07T11:42:39.988Z',
+    snoozed_until: null,
+    created_at: 1707233672,
+  },
+  {
+    id: 4,
+    read_at: null,
+    snoozed_until: '2024-02-08T03:30:00.000Z',
+    created_at: 1707233667,
+  },
+  {
+    id: 5,
+    read_at: '2024-02-07T10:42:39.988Z',
+    snoozed_until: '2024-02-08T03:30:00.000Z',
+    created_at: 1707233662,
+  },
+  {
+    id: 6,
+    read_at: null,
+    snoozed_until: '2024-02-08T03:30:00.000Z',
+    created_at: 1707233561,
+  },
+];
+
+describe('#filterByStatus', () => {
+  it('returns the notifications with snoozed status', () => {
+    const filters = { status: 'snoozed' };
+    notifications.forEach(notification => {
+      expect(
+        filterByStatus(notification.snoozed_until, filters.status)
+      ).toEqual(notification.snoozed_until !== null);
+    });
+  });
+  it('returns true if the notification is snoozed', () => {
+    const filters = { status: 'snoozed' };
+    expect(
+      filterByStatus(notifications[3].snoozed_until, filters.status)
+    ).toEqual(true);
+  });
+  it('returns false if the notification is not snoozed', () => {
+    const filters = { status: 'snoozed' };
+    expect(
+      filterByStatus(notifications[2].snoozed_until, filters.status)
+    ).toEqual(false);
+  });
+});
+
+describe('#filterByType', () => {
+  it('returns the notifications with read status', () => {
+    const filters = { type: 'read' };
+    notifications.forEach(notification => {
+      expect(filterByType(notification.read_at, filters.type)).toEqual(
+        notification.read_at !== null
+      );
+    });
+  });
+  it('returns true if the notification is read', () => {
+    const filters = { type: 'read' };
+    expect(filterByType(notifications[0].read_at, filters.type)).toEqual(true);
+  });
+  it('returns false if the notification is not read', () => {
+    const filters = { type: 'read' };
+    expect(filterByType(notifications[1].read_at, filters.type)).toEqual(false);
+  });
+});
+
+describe('#filterByTypeAndStatus', () => {
+  it('returns the notifications with type and status', () => {
+    const filters = { type: 'read', status: 'snoozed' };
+    notifications.forEach(notification => {
+      expect(
+        filterByTypeAndStatus(
+          notification.read_at,
+          notification.snoozed_until,
+          filters.type,
+          filters.status
+        )
+      ).toEqual(
+        notification.read_at !== null && notification.snoozed_until !== null
+      );
+    });
+  });
+  it('returns true if the notification is read and snoozed', () => {
+    const filters = { type: 'read', status: 'snoozed' };
+    expect(
+      filterByTypeAndStatus(
+        notifications[4].read_at,
+        notifications[4].snoozed_until,
+        filters.type,
+        filters.status
+      )
+    ).toEqual(true);
+  });
+  it('returns false if the notification is not read and snoozed', () => {
+    const filters = { type: 'read', status: 'snoozed' };
+    expect(
+      filterByTypeAndStatus(
+        notifications[3].read_at,
+        notifications[3].snoozed_until,
+        filters.type,
+        filters.status
+      )
+    ).toEqual(false);
+  });
+});
+
+describe('#applyInboxPageFilters', () => {
+  it('returns the notifications with type and status', () => {
+    const filters = { type: 'read', status: 'snoozed' };
+    notifications.forEach(notification => {
+      expect(applyInboxPageFilters(notification, filters)).toEqual(
+        filterByTypeAndStatus(
+          notification.read_at,
+          notification.snoozed_until,
+          filters.type,
+          filters.status
+        )
+      );
+    });
+  });
+  it('returns the notifications with type only', () => {
+    const filters = { type: 'read', status: null };
+    notifications.forEach(notification => {
+      expect(applyInboxPageFilters(notification, filters)).toEqual(
+        filterByType(notification.read_at, filters.type)
+      );
+    });
+  });
+  it('returns the notifications with status only', () => {
+    const filters = { type: null, status: 'snoozed' };
+    notifications.forEach(notification => {
+      expect(applyInboxPageFilters(notification, filters)).toEqual(
+        filterByStatus(notification.snoozed_until, filters.status)
+      );
+    });
+  });
+  it('returns true if there are no filters', () => {
+    const filters = { type: null, status: null };
+    notifications.forEach(notification => {
+      expect(applyInboxPageFilters(notification, filters)).toEqual(true);
+    });
+  });
+});
+
+describe('#sortComparator', () => {
+  it('returns the notifications sorted by newest', () => {
+    const sortOrder = 'newest';
+    const sortedNotifications = [...notifications].sort((a, b) =>
+      sortComparator(a, b, sortOrder)
+    );
+    const expectedOrder = [
+      notifications[0],
+      notifications[1],
+      notifications[2],
+      notifications[3],
+      notifications[4],
+      notifications[5],
+    ].sort((a, b) => b.created_at - a.created_at);
+    expect(sortedNotifications).toEqual(expectedOrder);
+  });
+
+  it('returns the notifications sorted by oldest', () => {
+    const sortOrder = 'oldest';
+    const sortedNotifications = [...notifications].sort((a, b) =>
+      sortComparator(a, b, sortOrder)
+    );
+    const expectedOrder = [
+      notifications[0],
+      notifications[1],
+      notifications[2],
+      notifications[3],
+      notifications[4],
+      notifications[5],
+    ].sort((a, b) => a.created_at - b.created_at);
+    expect(sortedNotifications).toEqual(expectedOrder);
+  });
+});

app/javascript/dashboard/store/modules/specs/notifications/mutations.spec.js

@@ -12,7 +12,10 @@ describe('#mutations', () => {
 
   describe('#CLEAR_NOTIFICATIONS', () => {
     it('clear notifications', () => {
-      const state = { records: { 1: { id: 1 } } };
+      const state = {
+        records: { 1: { id: 1 } },
+        uiFlags: { isAllNotificationsLoaded: true },
+      };
       mutations[types.CLEAR_NOTIFICATIONS](state);
       expect(state.records).toEqual({});
     });
@@ -72,7 +75,10 @@ describe('#mutations', () => {
           1: { id: 1, primary_actor_id: 1 },
         },
       };
-      mutations[types.UPDATE_NOTIFICATION](state, 1);
+      mutations[types.READ_NOTIFICATION](state, {
+        id: 1,
+        read_at: true,
+      });
       expect(state.records).toEqual({
         1: { id: 1, primary_actor_id: 1, read_at: true },
       });
@@ -141,4 +147,40 @@ describe('#mutations', () => {
       expect(state.meta.count).toEqual(232);
     });
   });
+
+  describe('#SET_ALL_NOTIFICATIONS_LOADED', () => {
+    it('set all notifications loaded', () => {
+      const state = { uiFlags: { isAllNotificationsLoaded: false } };
+      mutations[types.SET_ALL_NOTIFICATIONS_LOADED](state);
+      expect(state.uiFlags).toEqual({ isAllNotificationsLoaded: true });
+    });
+  });
+
+  describe('#DELETE_READ_NOTIFICATIONS', () => {
+    it('delete read notifications', () => {
+      const state = {
+        records: {
+          1: { id: 1, primary_actor_id: 1, read_at: true },
+          2: { id: 2, primary_actor_id: 2 },
+        },
+      };
+      mutations[types.DELETE_READ_NOTIFICATIONS](state);
+      expect(state.records).toEqual({
+        2: { id: 2, primary_actor_id: 2 },
+      });
+    });
+  });
+
+  describe('#DELETE_ALL_NOTIFICATIONS', () => {
+    it('delete all notifications', () => {
+      const state = {
+        records: {
+          1: { id: 1, primary_actor_id: 1, read_at: true },
+          2: { id: 2, primary_actor_id: 2 },
+        },
+      };
+      mutations[types.DELETE_ALL_NOTIFICATIONS](state);
+      expect(state.records).toEqual({});
+    });
+  });
 });