feat: Form selectable tags component to use with onboarding form

* feat: Inbox list display menu

* chore: Fix alignment

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)
@@ -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?
@@ -21,6 +21,16 @@ class AccountBuilder
 
   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/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,6 +29,11 @@ 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

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
@@ -53,6 +55,17 @@ class Api::V1::AccountsController < Api::BaseController
 
   private
 
+  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 get_cache_keys
     {
       label: fetch_value_for_key(params[:id], Label.name.underscore),

app/controllers/api/v1/profiles_controller.rb

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

app/controllers/api/v2/accounts_controller.rb

@@ -0,0 +1,48 @@
+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],
+      user: current_user
+    ).perform
+    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
+    @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

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/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

@@ -25,9 +25,17 @@ 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}`);
+  }
 }
 
 export default new NotificationsAPI();

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

@@ -87,6 +87,7 @@ import Thumbnail from '../Thumbnail.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { conversationReopenTime } 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,

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/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/i18n/locale/en/inbox.json

@@ -0,0 +1,47 @@
+{
+  "INBOX": {
+    "LIST": {
+      "TITLE": "Inbox",
+      "DISPLAY_DROPDOWN": "Display",
+      "LOADING": "Fetching notifications",
+      "EOF": "All notifications loaded 🎉",
+      "404": "There are no active notifications in this group.",
+      "NOTE": "Notifications from all subscribed inboxes"
+    },
+    "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"
+      }
+    }
+  }
+}

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/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'),
+      name: 'inbox',
+      roles: ['administrator', 'agent'],
+      component: InboxView,
+      props: () => {
+        return { inboxId: 0 };
+      },
+    },
+    {
+      path: frontendURL('accounts/:accountId/inbox/: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,131 @@
+<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 />
+    <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 records"
+        :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="showEndOfList"
+        class="text-center text-slate-300 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 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';
+export default {
+  components: {
+    InboxCard,
+    InboxListHeader,
+    IntersectionObserver,
+  },
+  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,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      meta: 'notifications/getMeta',
+      records: 'notifications/getNotifications',
+      uiFlags: 'notifications/getUIFlags',
+    }),
+    showEndOfList() {
+      return this.uiFlags.isAllNotificationsLoaded && !this.uiFlags.isFetching;
+    },
+  },
+  mounted() {
+    this.$store.dispatch('notifications/clear');
+    this.$store.dispatch('notifications/index', { page: 1 });
+  },
+  methods: {
+    redirectToInbox() {
+      if (!this.conversationId) return;
+      if (this.$route.name === 'inbox') return;
+      this.$router.push({ name: 'inbox' });
+    },
+    onMarkAllDoneClick() {
+      this.$track(INBOX_EVENTS.MARK_ALL_NOTIFICATIONS_AS_READ);
+      this.$store.dispatch('notifications/readAll');
+    },
+    loadMoreNotifications() {
+      if (this.uiFlags.isAllNotificationsLoaded) return;
+      this.$store.dispatch('notifications/index', { page: this.page + 1 });
+      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,
+      });
+    },
+    markNotificationAsUnRead(notification) {
+      this.$track(INBOX_EVENTS.MARK_NOTIFICATION_AS_UNREAD);
+      this.redirectToInbox();
+      const { id } = notification;
+      this.$store.dispatch('notifications/unread', {
+        id,
+      });
+    },
+    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,
+      });
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,206 @@
+<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 w-full h-full">
+      <inbox-item-header
+        :total-length="totalNotifications"
+        :current-index="activeNotificationIndex"
+        @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-row items-center gap-1">
+        <fluent-icon
+          icon="mail-inbox"
+          size="18"
+          class="text-slate-700 dark:text-slate-400"
+        />
+        <span class="text-slate-700 text-sm font-medium dark:text-slate-400">
+          {{ $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',
+    }),
+    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',
+      });
+    }
+  },
+  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,218 @@
+<template>
+  <div
+    role="button"
+    class="flex flex-col pl-5 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 -left-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="20px"
+        />
+        <div class="flex min-w-0">
+          <span
+            class="font-medium text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
+          >
+            <span class="font-normal text-sm">
+              {{ pushTitle }}
+            </span>
+          </span>
+        </div>
+      </div>
+      <span
+        class="font-medium max-w-[60px] text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
+      >
+        {{ lastActivityAt }}
+      </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 { 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;
+    },
+  },
+  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-500 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,169 @@
+<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="
+              activeSort === option.key ? 'bg-woot-50 dark:bg-woot-700/50' : ''
+            "
+            @click.stop="onSortOptionClick(option.key)"
+          >
+            <span
+              class="text-xs font-medium hover:text-woot-600 dark:hover:text-woot-600"
+              :class="
+                activeSort === option.key
+                  ? 'text-woot-600 dark:text-woot-600'
+                  : 'text-slate-600 dark:text-slate-300'
+              "
+            >
+              {{ 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.id"
+          class="flex items-center px-3 py-2 gap-1.5 h-9"
+        >
+          <input
+            :id="option.value"
+            type="checkbox"
+            :name="option.value"
+            :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.value"
+            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>
+export default {
+  data() {
+    return {
+      showSortMenu: false,
+      displayOptions: [
+        {
+          id: 1,
+          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.SNOOZED'),
+          value: 'snoozed',
+          selected: false,
+        },
+        {
+          id: 2,
+          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.READ'),
+          value: 'read',
+          selected: true,
+        },
+        {
+          id: 3,
+          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.LABELS'),
+          value: 'labels',
+          selected: false,
+        },
+        {
+          id: 4,
+          name: this.$t('INBOX.DISPLAY_MENU.DISPLAY_OPTIONS.CONVERSATION_ID'),
+          value: 'conversationId',
+          selected: false,
+        },
+      ],
+      sortOptions: [
+        {
+          name: this.$t('INBOX.DISPLAY_MENU.SORT_OPTIONS.NEWEST'),
+          key: 'newest',
+        },
+        {
+          name: this.$t('INBOX.DISPLAY_MENU.SORT_OPTIONS.OLDEST'),
+          key: 'oldest',
+        },
+        {
+          name: this.$t('INBOX.DISPLAY_MENU.SORT_OPTIONS.PRIORITY'),
+          key: 'priority',
+        },
+      ],
+      activeSort: 'newest',
+    };
+  },
+  computed: {
+    activeSortOption() {
+      return this.sortOptions.find(option => option.key === this.activeSort)
+        .name;
+    },
+  },
+  methods: {
+    updateDisplayOption(option) {
+      option.selected = !option.selected;
+      // TODO: Update the display options
+    },
+    openSortMenu() {
+      this.showSortMenu = !this.showSortMenu;
+    },
+    onSortOptionClick(key) {
+      this.activeSort = key;
+      this.showSortMenu = false;
+      // TODO: Update the sort options
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="flex gap-2 py-2 pl-4 h-14 pr-2 justify-between items-center w-full border-b border-slate-50 dark:border-slate-800/50"
+  >
+    <pagination-button
+      :total-length="totalLength"
+      :current-index="currentIndex"
+      @next="onClickNext"
+      @prev="onClickPrev"
+    />
+    <div class="flex items-center gap-2">
+      <woot-button
+        variant="hollow"
+        size="small"
+        color-scheme="secondary"
+        icon="snooze"
+        @click="onSnooze"
+      >
+        {{ $t('INBOX.ACTION_HEADER.SNOOZE') }}
+      </woot-button>
+      <woot-button
+        icon="delete"
+        size="small"
+        color-scheme="secondary"
+        variant="hollow"
+        @click="onDelete"
+      >
+        {{ $t('INBOX.ACTION_HEADER.DELETE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+<script>
+import PaginationButton from './PaginationButton.vue';
+
+export default {
+  components: {
+    PaginationButton,
+  },
+  props: {
+    totalLength: {
+      type: Number,
+      default: 0,
+    },
+    currentIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  methods: {
+    onSnooze() {},
+    onDelete() {},
+    onClickNext() {
+      this.$emit('next');
+    },
+    onClickPrev() {
+      this.$emit('prev');
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,84 @@
+<template>
+  <div
+    class="flex w-full pl-4 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"
+        />
+      </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"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import InboxOptionMenu from './InboxOptionMenu.vue';
+import InboxDisplayMenu from './InboxDisplayMenu.vue';
+export default {
+  components: {
+    InboxOptionMenu,
+    InboxDisplayMenu,
+  },
+  mixins: [clickaway],
+  data() {
+    return {
+      showInboxDisplayMenu: false,
+      showInboxOptionMenu: false,
+    };
+  },
+  methods: {
+    openInboxDisplayMenu() {
+      this.showInboxDisplayMenu = !this.showInboxDisplayMenu;
+    },
+    openInboxOptionsMenu() {
+      this.showInboxOptionMenu = !this.showInboxOptionMenu;
+    },
+  },
+};
+</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,72 @@
+<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-500 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="onMenuItemClick(item.key)"
+      />
+    </div>
+    <div class="flex flex-col">
+      <menu-item
+        v-for="item in commonMenuItems"
+        :key="item.key"
+        :label="item.label"
+        @click="onMenuItemClick(item.key)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import MenuItem from './MenuItem.vue';
+export default {
+  components: {
+    MenuItem,
+  },
+  data() {
+    return {
+      menuItems: [
+        {
+          key: 'mark_as_read',
+          label: this.$t('INBOX.MENU_ITEM.MARK_AS_READ'),
+        },
+        {
+          key: 'mark_as_unread',
+          label: this.$t('INBOX.MENU_ITEM.MARK_AS_UNREAD'),
+        },
+        {
+          key: 'snooze',
+          label: this.$t('INBOX.MENU_ITEM.SNOOZE'),
+        },
+        {
+          key: 'delete',
+          label: this.$t('INBOX.MENU_ITEM.DELETE'),
+        },
+      ],
+      commonMenuItems: [
+        {
+          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: {
+    onMenuItemClick(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/notifications/actions.js

@@ -18,6 +18,24 @@ export const actions = {
       commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: false });
     }
   },
+  index: async ({ commit }, { page = 1 } = {}) => {
+    commit(types.SET_NOTIFICATIONS_UI_FLAG, { isFetching: true });
+    try {
+      const {
+        data: {
+          data: { payload, meta },
+        },
+      } = await NotificationsAPI.get(page);
+      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 +48,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.UPDATE_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.UPDATE_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 +83,25 @@ 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 });
+    }
+  },
+
   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/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.UPDATE_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 => {
@@ -61,4 +58,7 @@ export const mutations = {
     Vue.set($state.meta, 'unreadCount', unreadCount);
     Vue.set($state.meta, 'count', count);
   },
+  [types.SET_ALL_NOTIFICATIONS_LOADED]: $state => {
+    Vue.set($state.uiFlags, 'isAllNotificationsLoaded', true);
+  },
 };

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/notifications/actions.spec.js

@@ -39,6 +39,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 +94,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.UPDATE_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 }],
+        ['UPDATE_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 +212,11 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('clear', () => {
+    it('sends correct actions', async () => {
+      await actions.clear({ commit });
+      expect(commit.mock.calls).toEqual([[types.CLEAR_NOTIFICATIONS]]);
+    });
+  });
 });

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.UPDATE_NOTIFICATION](state, {
+        id: 1,
+        read_at: true,
+      });
       expect(state.records).toEqual({
         1: { id: 1, primary_actor_id: 1, read_at: true },
       });
@@ -141,4 +147,12 @@ 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 });
+    });
+  });
 });

app/javascript/dashboard/store/mutation-types.js

@@ -140,6 +140,7 @@ export default {
   CLEAR_NOTIFICATIONS: 'CLEAR_NOTIFICATIONS',
   EDIT_NOTIFICATIONS: 'EDIT_NOTIFICATIONS',
   UPDATE_NOTIFICATIONS_PRESENCE: 'UPDATE_NOTIFICATIONS_PRESENCE',
+  SET_ALL_NOTIFICATIONS_LOADED: 'SET_ALL_NOTIFICATIONS_LOADED',
 
   // Contact Conversation
   SET_CONTACT_CONVERSATIONS_UI_FLAG: 'SET_CONTACT_CONVERSATIONS_UI_FLAG',

app/javascript/dashboard/store/utils/api.js

@@ -27,7 +27,7 @@ export const getHeaderExpiry = response =>
 
 export const setAuthCredentials = response => {
   const expiryDate = getHeaderExpiry(response);
-  Cookies.set('cw_d_session_info', response.headers, {
+  Cookies.set('cw_d_session_info', JSON.stringify(response.headers), {
     expires: differenceInDays(expiryDate, new Date()),
   });
   setUser(response.data.data, expiryDate);

app/javascript/sdk/cookieHelpers.js

@@ -34,5 +34,12 @@ export const setCookieWithDomain = (
     domain: baseDomain,
   };
 
+  // if type of value is object, stringify it
+  // this is because js-cookies 3.0 removed builtin json support
+  // ref: https://github.com/js-cookie/js-cookie/releases/tag/v3.0.0
+  if (typeof value === 'object') {
+    value = JSON.stringify(value);
+  }
+
   Cookies.set(name, value, cookieOptions);
 };

app/javascript/sdk/specs/cookieHelpers.spec.js

@@ -107,6 +107,26 @@ describe('setCookieWithDomain', () => {
     );
   });
 
+  it('should stringify the cookie value when setting', () => {
+    setCookieWithDomain(
+      'myCookie',
+      { value: 'cookieValue' },
+      {
+        baseDomain: 'example.com',
+      }
+    );
+
+    expect(Cookies.set).toHaveBeenCalledWith(
+      'myCookie',
+      JSON.stringify({ value: 'cookieValue' }),
+      expect.objectContaining({
+        expires: 365,
+        sameSite: 'Lax',
+        domain: 'example.com',
+      })
+    );
+  });
+
   it('should set a cookie with custom expiration, sameSite attribute, and specific base domain', () => {
     setCookieWithDomain('myCookie', 'cookieValue', {
       expires: 7,

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -125,6 +125,7 @@
   "location-outline": "M5.843 4.568a8.707 8.707 0 1 1 12.314 12.314l-1.187 1.174c-.875.858-2.01 1.962-3.406 3.312a2.25 2.25 0 0 1-3.128 0l-3.491-3.396c-.439-.431-.806-.794-1.102-1.09a8.707 8.707 0 0 1 0-12.314Zm11.253 1.06A7.207 7.207 0 1 0 6.904 15.822L8.39 17.29a753.98 753.98 0 0 0 3.088 3 .75.75 0 0 0 1.043 0l3.394-3.3c.47-.461.863-.85 1.18-1.168a7.207 7.207 0 0 0 0-10.192ZM12 7.999a3.002 3.002 0 1 1 0 6.004 3.002 3.002 0 0 1 0-6.003Zm0 1.5a1.501 1.501 0 1 0 0 3.004 1.501 1.501 0 0 0 0-3.003Z",
   "lock-closed-outline": "M12 2a4 4 0 0 1 4 4v2h1.75A2.25 2.25 0 0 1 20 10.25v9.5A2.25 2.25 0 0 1 17.75 22H6.25A2.25 2.25 0 0 1 4 19.75v-9.5A2.25 2.25 0 0 1 6.25 8H8V6a4 4 0 0 1 4-4Zm5.75 7.5H6.25a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-9.5a.75.75 0 0 0-.75-.75Zm-5.75 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-10A2.5 2.5 0 0 0 9.5 6v2h5V6A2.5 2.5 0 0 0 12 3.5Z",
   "lock-shield-outline": "M10 2a4 4 0 0 1 4 4v2h1.75A2.25 2.25 0 0 1 18 10.25V11c-.319 0-.637.11-.896.329l-.107.1c-.164.17-.33.323-.496.457L16.5 10.25a.75.75 0 0 0-.75-.75H4.25a.75.75 0 0 0-.75.75v9.5c0 .414.336.75.75.75h9.888a6.024 6.024 0 0 0 1.54 1.5H4.25A2.25 2.25 0 0 1 2 19.75v-9.5A2.25 2.25 0 0 1 4.25 8H6V6a4 4 0 0 1 4-4Zm8.284 10.122c.992 1.036 2.091 1.545 3.316 1.545.193 0 .355.143.392.332l.008.084v2.501c0 2.682-1.313 4.506-3.873 5.395a.385.385 0 0 1-.253 0c-2.476-.86-3.785-2.592-3.87-5.13L14 16.585v-2.5c0-.23.18-.417.4-.417 1.223 0 2.323-.51 3.318-1.545a.389.389 0 0 1 .566 0ZM10 13.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm0-10A2.5 2.5 0 0 0 7.5 6v2h5V6A2.5 2.5 0 0 0 10 3.5Z",
+  "mail-inbox-outline": "M6.25 3h11.5a3.25 3.25 0 0 1 3.245 3.066L21 6.25v11.5a3.25 3.25 0 0 1-3.066 3.245L17.75 21H6.25a3.25 3.25 0 0 1-3.245-3.066L3 17.75V6.25a3.25 3.25 0 0 1 3.066-3.245L6.25 3h11.5h-11.5ZM4.5 14.5v3.25a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V14.5h-3.825a3.752 3.752 0 0 1-3.475 2.995l-.2.005a3.752 3.752 0 0 1-3.632-2.812l-.043-.188H4.5v3.25v-3.25Zm13.25-10H6.25a1.75 1.75 0 0 0-1.744 1.606L4.5 6.25V13H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.495.154l.005-.154a.75.75 0 0 1 .648-.743L15 13h4.5V6.25a1.75 1.75 0 0 0-1.607-1.744L17.75 4.5Z",
   "mail-inbox-all-outline": "M6.25 3h11.5a3.25 3.25 0 0 1 3.245 3.066L21 6.25v11.5a3.25 3.25 0 0 1-3.066 3.245L17.75 21H6.25a3.25 3.25 0 0 1-3.245-3.066L3 17.75V6.25a3.25 3.25 0 0 1 3.066-3.245L6.25 3Zm2.075 11.5H4.5v3.25a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V14.5h-3.825a3.752 3.752 0 0 1-3.475 2.995l-.2.005a3.752 3.752 0 0 1-3.632-2.812l-.043-.188Zm9.425-10H6.25a1.75 1.75 0 0 0-1.744 1.606L4.5 6.25V13H9a.75.75 0 0 1 .743.648l.007.102a2.25 2.25 0 0 0 4.495.154l.005-.154a.75.75 0 0 1 .648-.743L15 13h4.5V6.25a1.75 1.75 0 0 0-1.607-1.744L17.75 4.5Zm-11 5h10.5a.75.75 0 0 1 .102 1.493L17.25 11H6.75a.75.75 0 0 1-.102-1.493L6.75 9.5h10.5-10.5Zm0-3h10.5a.75.75 0 0 1 .102 1.493L17.25 8H6.75a.75.75 0 0 1-.102-1.493L6.75 6.5h10.5-10.5Z",
   "mail-unread-outline": "M16 6.5H5.25a1.75 1.75 0 0 0-1.744 1.606l-.004.1L11 12.153l6.03-3.174a3.489 3.489 0 0 0 2.97.985v6.786a3.25 3.25 0 0 1-3.066 3.245L16.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-8.5a3.25 3.25 0 0 1 3.066-3.245L5.25 5h11.087A3.487 3.487 0 0 0 16 6.5Zm2.5 3.399-7.15 3.765a.75.75 0 0 1-.603.042l-.096-.042L3.5 9.9v6.85a1.75 1.75 0 0 0 1.606 1.744l.144.006h11.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.899ZM19.5 4a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z",
   "mail-outline": "M5.25 4h13.5a3.25 3.25 0 0 1 3.245 3.066L22 7.25v9.5a3.25 3.25 0 0 1-3.066 3.245L18.75 20H5.25a3.25 3.25 0 0 1-3.245-3.066L2 16.75v-9.5a3.25 3.25 0 0 1 3.066-3.245L5.25 4h13.5-13.5ZM20.5 9.373l-8.15 4.29a.75.75 0 0 1-.603.043l-.096-.042L3.5 9.374v7.376a1.75 1.75 0 0 0 1.606 1.744l.144.006h13.5a1.75 1.75 0 0 0 1.744-1.607l.006-.143V9.373ZM18.75 5.5H5.25a1.75 1.75 0 0 0-1.744 1.606L3.5 7.25v.429l8.5 4.473 8.5-4.474V7.25a1.75 1.75 0 0 0-1.607-1.744L18.75 5.5Z",

app/javascript/v3/components/Form/RadioTags.vue

@@ -0,0 +1,69 @@
+<template>
+  <with-label
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <div class="flex gap-2 flex-wrap">
+      <woot-button
+        v-for="option in options"
+        :key="option.value"
+        :variant="value === option.value ? '' : 'hollow'"
+        :color-scheme="value === option.value ? 'primary' : 'secondary'"
+        size="small"
+        @click="$emit('input', option.value)"
+      >
+        {{ option.label }}
+      </woot-button>
+    </div>
+  </with-label>
+</template>
+
+<script>
+import WithLabel from './WithLabel.vue';
+export default {
+  components: {
+    WithLabel,
+  },
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>

app/javascript/v3/components/Form/WithLabel.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="space-y-1">
+    <label
+      v-if="label"
+      :for="name"
+      class="flex justify-between text-sm font-medium leading-6 text-slate-900 dark:text-white"
+      :class="{ 'text-red-500': hasError }"
+    >
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </label>
+    <div>
+      <slot />
+      <span
+        v-if="errorMessage && hasError"
+        class="text-xs text-red-400 leading-2"
+      >
+        {{ errorMessage }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>

app/javascript/v3/helpers/AuthHelper.js

@@ -3,7 +3,7 @@ import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
 export const hasAuthCookie = () => {
-  return !!Cookies.getJSON('cw_d_session_info');
+  return !!Cookies.get('cw_d_session_info');
 };
 
 const getSSOAccountPath = ({ ssoAccountId, user }) => {

app/javascript/v3/helpers/specs/RouteHelper.spec.js

@@ -10,10 +10,10 @@ jest.mock('dashboard/store/utils/api', () => ({
 jest.mock('../CommonHelper', () => ({ replaceRouteWithReload: jest.fn() }));
 
 jest.mock('js-cookie', () => ({
-  getJSON: jest.fn(),
+  get: jest.fn(),
 }));
 
-Cookies.getJSON.mockReturnValueOnce(true).mockReturnValue(false);
+Cookies.get.mockReturnValueOnce(true).mockReturnValue(false);
 describe('#validateRouteAccess', () => {
   it('reset cookies and continues to the login page if the SSO parameters are present', () => {
     validateRouteAccess(
@@ -40,7 +40,7 @@ describe('#validateRouteAccess', () => {
   });
 
   it('redirects to dashboard if auth cookie is present', () => {
-    Cookies.getJSON.mockImplementation(() => true);
+    Cookies.get.mockImplementation(() => true);
     validateRouteAccess({ name: 'login' }, next);
     expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
     expect(replaceRouteWithReload).toHaveBeenCalledWith('/app/');

app/jobs/channels/whatsapp/templates_sync_scheduler_job.rb

@@ -2,8 +2,10 @@ class Channels::Whatsapp::TemplatesSyncSchedulerJob < ApplicationJob
   queue_as :low
 
   def perform
-    Channel::Whatsapp.where('message_templates_last_updated <= ? OR message_templates_last_updated IS NULL',
-                            3.hours.ago).limit(Limits::BULK_EXTERNAL_HTTP_CALLS_LIMIT).all.each do |channel|
+    Channel::Whatsapp.order(Arel.sql('message_templates_last_updated IS NULL DESC, message_templates_last_updated ASC'))
+                     .where('message_templates_last_updated <= ? OR message_templates_last_updated IS NULL', 3.hours.ago)
+                     .limit(Limits::BULK_EXTERNAL_HTTP_CALLS_LIMIT)
+                     .each do |channel|
       Channels::Whatsapp::TemplatesSyncJob.perform_later(channel)
     end
   end

app/jobs/inboxes/fetch_imap_emails_job.rb

@@ -51,6 +51,11 @@ class Inboxes::FetchImapEmailsJob < MutexApplicationJob
 
     return if email_already_present?(channel, message_id)
 
+    if message_id.blank?
+      Rails.logger.info "[IMAP::FETCH_EMAIL_SERVICE] Empty message id for #{channel.email} with seq no. <#{seq_no}>."
+      return
+    end
+
     # Fetch the original mail content using the sequence no
     mail_str = imap_client.fetch(seq_no, 'RFC822')[0].attr['RFC822']
 
@@ -74,7 +79,7 @@ class Inboxes::FetchImapEmailsJob < MutexApplicationJob
     message_ids_with_seq = []
     seq_nums.each_slice(10).each do |batch|
       # Fetch only message-id only without mail body or contents.
-      batch_message_ids = imap_client.fetch(batch, 'BODY.PEEK[HEADER.FIELDS (MESSAGE-ID)]')
+      batch_message_ids = imap_client.fetch(batch, 'BODY.PEEK[HEADER]')
 
       # .fetch returns an array of Net::IMAP::FetchData or nil
       # (instead of an empty array) if there is no matching message.
@@ -85,7 +90,7 @@ class Inboxes::FetchImapEmailsJob < MutexApplicationJob
       end
 
       batch_message_ids.each do |data|
-        message_id = build_mail_from_string(data.attr['BODY[HEADER.FIELDS (MESSAGE-ID)]']).message_id
+        message_id = build_mail_from_string(data.attr['BODY[HEADER]']).message_id
         message_ids_with_seq.push([data.seqno, message_id])
       end
     end
@@ -97,7 +102,7 @@ class Inboxes::FetchImapEmailsJob < MutexApplicationJob
   # created between yesterday and today and returns message sequence numbers.
   # Return <message set>
   def fetch_available_mail_sequence_numbers(imap_client)
-    imap_client.search(['BEFORE', tomorrow, 'SINCE', yesterday])
+    imap_client.search(['SINCE', yesterday])
   end
 
   def fetch_mail_for_ms_provider(channel)
@@ -161,8 +166,4 @@ class Inboxes::FetchImapEmailsJob < MutexApplicationJob
   def yesterday
     (Time.zone.today - 1).strftime('%d-%b-%Y')
   end
-
-  def tomorrow
-    (Time.zone.today + 1).strftime('%d-%b-%Y')
-  end
 end

app/jobs/internal/check_new_versions_job.rb

@@ -4,21 +4,17 @@ class Internal::CheckNewVersionsJob < ApplicationJob
   def perform
     return unless Rails.env.production?
 
-    instance_info = ChatwootHub.sync_with_hub
-    return unless instance_info
-
-    ::Redis::Alfred.set(::Redis::Alfred::LATEST_CHATWOOT_VERSION, instance_info['version'])
-    update_installation_config(key: 'INSTALLATION_PRICING_PLAN', value: instance_info['plan'])
-    update_installation_config(key: 'INSTALLATION_PRICING_PLAN_QUANTITY', value: instance_info['plan_quantity'])
-    update_installation_config(key: 'CHATWOOT_SUPPORT_WEBSITE_TOKEN', value: instance_info['chatwoot_support_website_token'])
-    update_installation_config(key: 'CHATWOOT_SUPPORT_IDENTIFIER_HASH', value: instance_info['chatwoot_support_identifier_hash'])
-    update_installation_config(key: 'CHATWOOT_SUPPORT_SCRIPT_URL', value: instance_info['chatwoot_support_script_url'])
+    @instance_info = ChatwootHub.sync_with_hub
+    update_version_info
   end
 
-  def update_installation_config(key:, value:)
-    config = InstallationConfig.find_or_initialize_by(name: key)
-    config.value = value
-    config.locked = true
-    config.save!
+  private
+
+  def update_version_info
+    return if @instance_info['version'].blank?
+
+    ::Redis::Alfred.set(::Redis::Alfred::LATEST_CHATWOOT_VERSION, @instance_info['version'])
   end
 end
+
+Internal::CheckNewVersionsJob.prepend_mod_with('Internal::CheckNewVersionsJob')

app/models/account.rb

@@ -32,7 +32,6 @@ class Account < ApplicationRecord
     check_for_column: false
   }.freeze
 
-  validates :name, presence: true
   validates :auto_resolve_duration, numericality: { greater_than_or_equal_to: 1, less_than_or_equal_to: 999, allow_nil: true }
   validates :domain, length: { maximum: 100 }
 

app/models/automation_rule.rb

@@ -30,10 +30,15 @@ class AutomationRule < ApplicationRecord
 
   scope :active, -> { where(active: true) }
 
-  CONDITIONS_ATTRS = %w[content email country_code status message_type browser_language assignee_id team_id referer city company inbox_id
-                        mail_subject phone_number priority conversation_language].freeze
-  ACTIONS_ATTRS = %w[send_message add_label remove_label send_email_to_team assign_team assign_agent send_webhook_event mute_conversation
-                     send_attachment change_status resolve_conversation snooze_conversation change_priority send_email_transcript].freeze
+  def conditions_attributes
+    %w[content email country_code status message_type browser_language assignee_id team_id referer city company inbox_id
+       mail_subject phone_number priority conversation_language]
+  end
+
+  def actions_attributes
+    %w[send_message add_label remove_label send_email_to_team assign_team assign_agent send_webhook_event mute_conversation
+       send_attachment change_status resolve_conversation snooze_conversation change_priority send_email_transcript].freeze
+  end
 
   def file_base_data
     files.map do |file|
@@ -55,7 +60,7 @@ class AutomationRule < ApplicationRecord
     return if conditions.blank?
 
     attributes = conditions.map { |obj, _| obj['attribute_key'] }
-    conditions = attributes - CONDITIONS_ATTRS
+    conditions = attributes - conditions_attributes
     conditions -= account.custom_attribute_definitions.pluck(:attribute_key)
     errors.add(:conditions, "Automation conditions #{conditions.join(',')} not supported.") if conditions.any?
   end
@@ -64,7 +69,7 @@ class AutomationRule < ApplicationRecord
     return if actions.blank?
 
     attributes = actions.map { |obj, _| obj['action_name'] }
-    actions = attributes - ACTIONS_ATTRS
+    actions = attributes - actions_attributes
 
     errors.add(:actions, "Automation actions #{actions.join(',')} not supported.") if actions.any?
   end
@@ -78,3 +83,4 @@ class AutomationRule < ApplicationRecord
 end
 
 AutomationRule.include_mod_with('Audit::AutomationRule')
+AutomationRule.prepend_mod_with('AutomationRule')

app/models/channel/email.rb

@@ -8,7 +8,6 @@
 #  imap_address              :string           default("")
 #  imap_enable_ssl           :boolean          default(TRUE)
 #  imap_enabled              :boolean          default(FALSE)
-#  imap_inbox_synced_at      :datetime
 #  imap_login                :string           default("")
 #  imap_password             :string           default("")
 #  imap_port                 :integer          default(0)
@@ -41,7 +40,7 @@ class Channel::Email < ApplicationRecord
   AUTHORIZATION_ERROR_THRESHOLD = 10
 
   self.table_name = 'channel_email'
-  EDITABLE_ATTRS = [:email, :imap_enabled, :imap_login, :imap_password, :imap_address, :imap_port, :imap_enable_ssl, :imap_inbox_synced_at,
+  EDITABLE_ATTRS = [:email, :imap_enabled, :imap_login, :imap_password, :imap_address, :imap_port, :imap_enable_ssl,
                     :smtp_enabled, :smtp_login, :smtp_password, :smtp_address, :smtp_port, :smtp_domain, :smtp_enable_starttls_auto,
                     :smtp_enable_ssl_tls, :smtp_openssl_verify_mode, :smtp_authentication, :provider].freeze
 

app/models/concerns/account_cache_revalidator.rb

@@ -2,7 +2,7 @@ module AccountCacheRevalidator
   extend ActiveSupport::Concern
 
   included do
-    after_commit :update_account_cache, on: [:create, :update]
+    after_commit :update_account_cache, on: [:create, :update, :destroy]
   end
 
   def update_account_cache

app/models/concerns/cache_keys.rb

@@ -4,6 +4,8 @@ module CacheKeys
   include CacheKeysHelper
   include Events::Types
 
+  CACHE_KEYS_EXPIRY = 72.hours
+
   included do
     class_attribute :cacheable_models
     self.cacheable_models = [Label, Inbox, Team]
@@ -18,26 +20,26 @@ module CacheKeys
     keys
   end
 
-  def invalidate_cache_key_for(key)
-    prefixed_cache_key = get_prefixed_cache_key(id, key)
-    Redis::Alfred.delete(prefixed_cache_key)
-    dispatch_cache_update_event
-  end
-
   def update_cache_key(key)
-    prefixed_cache_key = get_prefixed_cache_key(id, key)
-    Redis::Alfred.set(prefixed_cache_key, Time.now.utc.to_i)
+    update_cache_key_for_account(id, key)
     dispatch_cache_update_event
   end
 
   def reset_cache_keys
     self.class.cacheable_models.each do |model|
-      invalidate_cache_key_for(model.name.underscore)
+      update_cache_key_for_account(id, model.name.underscore)
     end
+
+    dispatch_cache_update_event
   end
 
   private
 
+  def update_cache_key_for_account(account_id, key)
+    prefixed_cache_key = get_prefixed_cache_key(account_id, key)
+    Redis::Alfred.setex(prefixed_cache_key, Time.now.utc.to_i, CACHE_KEYS_EXPIRY)
+  end
+
   def dispatch_cache_update_event
     Rails.configuration.dispatcher.dispatch(ACCOUNT_CACHE_INVALIDATED, Time.zone.now, cache_keys: cache_keys, account: self)
   end

app/models/contact.rb

@@ -7,11 +7,13 @@
 #  id                    :integer          not null, primary key
 #  additional_attributes :jsonb
 #  contact_type          :integer          default("visitor")
+#  country_code          :string           default("")
 #  custom_attributes     :jsonb
 #  email                 :string
 #  identifier            :string
 #  last_activity_at      :datetime
 #  last_name             :string           default("")
+#  location              :string           default("")
 #  middle_name           :string           default("")
 #  name                  :string           default("")
 #  phone_number          :string

app/models/user.rb

@@ -68,8 +68,7 @@ class User < ApplicationRecord
   # work because :validatable in devise overrides this.
   # validates_uniqueness_of :email, scope: :account_id
 
-  validates :email, :name, presence: true
-  validates_length_of :name, minimum: 1, maximum: 255
+  validates :email, presence: true
 
   has_many :account_users, dependent: :destroy_async
   has_many :accounts, through: :account_users
@@ -161,3 +160,4 @@ class User < ApplicationRecord
 end
 
 User.include_mod_with('Audit::User')
+User.include_mod_with('Concerns::User')

app/services/action_service.rb

@@ -89,3 +89,5 @@ class ActionService
     @conversation.additional_attributes['type'] == 'tweet'
   end
 end
+
+ActionService.include_mod_with('ActionService')

app/services/facebook/send_on_facebook_service.rb

@@ -7,7 +7,12 @@ class Facebook::SendOnFacebookService < Base::SendOnChannelService
 
   def perform_reply
     send_message_to_facebook fb_text_message_params if message.content.present?
-    send_message_to_facebook fb_attachment_message_params if message.attachments.present?
+
+    if message.attachments.present?
+      message.attachments.each do |attachment|
+        send_message_to_facebook fb_attachment_message_params(attachment)
+      end
+    end
   rescue Facebook::Messenger::FacebookError => e
     # TODO : handle specific errors or else page will get disconnected
     handle_facebook_error(e)
@@ -41,8 +46,7 @@ class Facebook::SendOnFacebookService < Base::SendOnChannelService
     "#{error_code} - #{error_message}"
   end
 
-  def fb_attachment_message_params
-    attachment = message.attachments.first
+  def fb_attachment_message_params(attachment)
     {
       recipient: { id: contact.get_source_id(inbox.id) },
       message: {
@@ -64,14 +68,6 @@ class Facebook::SendOnFacebookService < Base::SendOnChannelService
     'file'
   end
 
-  def fb_message_params
-    if message.attachments.blank?
-      fb_text_message_params
-    else
-      fb_attachment_message_params
-    end
-  end
-
   def sent_first_outgoing_message_after_24_hours?
     # we can send max 1 message after 24 hour window
     conversation.messages.outgoing.where('id > ?', conversation.last_incoming_message.id).count == 1

app/services/instagram/send_on_instagram_service.rb

@@ -14,8 +14,13 @@ class Instagram::SendOnInstagramService < Base::SendOnChannelService
   end
 
   def perform_reply
-    send_to_facebook_page attachament_message_params if message.attachments.present?
-    send_to_facebook_page message_params
+    if message.attachments.present?
+      message.attachments.each do |attachment|
+        send_to_facebook_page attachment_message_params(attachment)
+      end
+    end
+
+    send_to_facebook_page message_params if message.content.present?
   rescue StandardError => e
     ChatwootExceptionTracker.new(e, account: message.account, user: message.sender).capture_exception
     # TODO : handle specific errors or else page will get disconnected
@@ -33,8 +38,7 @@ class Instagram::SendOnInstagramService < Base::SendOnChannelService
     merge_human_agent_tag(params)
   end
 
-  def attachament_message_params
-    attachment = message.attachments.first
+  def attachment_message_params(attachment)
     params = {
       recipient: { id: contact.get_source_id(inbox.id) },
       message: {

app/services/instagram/webhooks_base_service.rb

@@ -24,7 +24,9 @@ class Instagram::WebhooksBaseService
   def update_instagram_profile_link(user)
     return unless user['username']
 
+    # TODO: Remove this once we show the social_instagram_user_name in the UI instead of the username
     @contact.additional_attributes = @contact.additional_attributes.merge({ 'social_profiles': { 'instagram': user['username'] } })
+    @contact.additional_attributes = @contact.additional_attributes.merge({ 'social_instagram_user_name': user['username'] })
     @contact.save
   end
 end

app/services/line/incoming_message_service.rb

@@ -139,7 +139,14 @@ class Line::IncomingMessageService
   def contact_attributes
     {
       name: line_contact_info['displayName'],
-      avatar_url: line_contact_info['pictureUrl']
+      avatar_url: line_contact_info['pictureUrl'],
+      additional_attributes: additional_attributes
+    }
+  end
+
+  def additional_attributes
+    {
+      social_line_user_id: line_contact_info['userId']
     }
   end
 

app/services/microsoft/refresh_oauth_token_service.rb

@@ -1,48 +1,39 @@
-# refer: https://gitlab.com/gitlab-org/ruby/gems/gitlab-mail_room/-/blob/master/lib/mail_room/microsoft_graph/connection.rb
-# refer: https://github.com/microsoftgraph/msgraph-sample-rubyrailsapp/tree/b4a6869fe4a438cde42b161196484a929f1bee46
-# https://learn.microsoft.com/en-us/azure/active-directory/develop/active-directory-configurable-token-lifetimes
+# Refer: https://learn.microsoft.com/en-us/entra/identity-platform/configurable-token-lifetimes
 class Microsoft::RefreshOauthTokenService
   pattr_initialize [:channel!]
 
-  # if the token is not expired yet then skip the refresh token step
+  # Additional references: https://gitlab.com/gitlab-org/ruby/gems/gitlab-mail_room/-/blob/master/lib/mail_room/microsoft_graph/connection.rb
   def access_token
-    provider_config = channel.provider_config.with_indifferent_access
-    if Time.current.utc >= expires_on(provider_config['expires_on'])
-      # Token expired, refresh
-      new_hash = refresh_tokens
-      new_hash[:access_token]
-    else
-      provider_config[:access_token]
-    end
+    return provider_config[:access_token] unless access_token_expired?
+
+    refreshed_tokens = refresh_tokens
+    refreshed_tokens[:access_token]
   end
 
-  def expires_on(expiry)
-    # we will give it a 5 minute gap for safety
-    expiry.presence ? DateTime.parse(expiry) - 5.minutes : Time.current.utc
+  def access_token_expired?
+    expiry = provider_config[:expires_on]
+
+    return true if expiry.blank?
+
+    # Adding a 5 minute window to expiry check to avoid any race
+    # conditions during the fetch operation. This would assure that the
+    # tokens are updated when we fetch the emails.
+    Time.current.utc >= DateTime.parse(expiry) - 5.minutes
   end
 
-  # <RefreshTokensSnippet>
+  # Refresh the access tokens using the refresh token
+  # Refer: https://github.com/microsoftgraph/msgraph-sample-rubyrailsapp/tree/b4a6869fe4a438cde42b161196484a929f1bee46
   def refresh_tokens
-    token_hash = channel.provider_config.with_indifferent_access
-    oauth_strategy = ::MicrosoftGraphAuth.new(
-      nil, ENV.fetch('AZURE_APP_ID', nil), ENV.fetch('AZURE_APP_SECRET', nil)
-    )
+    oauth_strategy = build_oauth_strategy
+    token_service = build_token_service(oauth_strategy)
 
-    token_service = OAuth2::AccessToken.new(
-      oauth_strategy.client, token_hash['access_token'],
-      refresh_token: token_hash['refresh_token']
-    )
-
-    # Refresh the tokens
     new_tokens = token_service.refresh!.to_hash.slice(:access_token, :refresh_token, :expires_at)
 
     update_channel_provider_config(new_tokens)
-    channel.provider_config
+    channel.reload.provider_config
   end
-  # </RefreshTokensSnippet>
 
   def update_channel_provider_config(new_tokens)
-    new_tokens = new_tokens.with_indifferent_access
     channel.provider_config = {
       access_token: new_tokens[:access_token],
       refresh_token: new_tokens[:refresh_token],
@@ -50,4 +41,24 @@ class Microsoft::RefreshOauthTokenService
     }
     channel.save!
   end
+
+  private
+
+  def provider_config
+    @provider_config ||= channel.provider_config.with_indifferent_access
+  end
+
+  # Builds the OAuth strategy for Microsoft Graph
+  def build_oauth_strategy
+    ::MicrosoftGraphAuth.new(nil, ENV.fetch('AZURE_APP_ID'), ENV.fetch('AZURE_APP_SECRET'))
+  end
+
+  # Builds the token service using OAuth2
+  def build_token_service(oauth_strategy)
+    OAuth2::AccessToken.new(
+      oauth_strategy.client,
+      provider_config[:access_token],
+      refresh_token: provider_config[:refresh_token]
+    )
+  end
 end

app/services/telegram/incoming_message_service.rb

@@ -78,8 +78,11 @@ class Telegram::IncomingMessageService
 
   def additional_attributes
     {
+      # TODO: Remove this once we show the social_telegram_user_name in the UI instead of the username
       username: telegram_params_username,
-      language_code: telegram_params_language_code
+      language_code: telegram_params_language_code,
+      social_telegram_user_id: telegram_params_from_id,
+      social_telegram_user_name: telegram_params_username
     }
   end
 

app/views/fields/account_features_field/_form.html.erb

@@ -4,11 +4,15 @@
 <div class="field-unit__field feature-container">
     <% field.data.each do |key,val| %>
     <div class='feature-cell'>
-    <% if ['audit_logs', 'response_bot'].include? key %>
-    <span class='icon-container'><i class="ion ion-asterisk"></i></span>
+    <% is_premium = SuperAdmin::AccountFeaturesHelper.account_premium_features.include? key %>
+    <% if is_premium  %>
+    <span class='icon-container'>
+      <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M480 224l-186.828 7.487L401.688 64l-59.247-32L256 208 169.824 32l-59.496 32 108.5 167.487L32 224v64l185.537-10.066L113.65 448l55.969 32L256 304l86.381 176 55.949-32-103.867-170.066L480 288z" fill="currentColor"/></svg>
+    </span>
     <% end %>
     <span><%= key %></span> 
-    <span class='value-container'><%= check_box "enabled_features", "feature_#{key}", { checked: val }, true, false  %> </span>
+    <% should_disable = is_premium && ChatwootHub.pricing_plan == 'community' %>
+    <span class='value-container'><%= check_box "enabled_features", "feature_#{key}", { checked: val, disabled: should_disable  }, true, false  %> </span>
     </div>
   <% end %>
 </div>

app/views/fields/account_features_field/_show.html.erb

@@ -1,8 +1,10 @@
 <div class='feature-container'>
   <% field.data.each do |key,val| %>
     <div class='feature-cell'>
-    <% if ['audit_logs', 'response_bot'].include? key %>
-    <span class='icon-container'><i class="ion ion-asterisk"></i></span>
+    <% if SuperAdmin::AccountFeaturesHelper.account_premium_features.include? key %>
+    <span class='icon-container'>
+      <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M480 224l-186.828 7.487L401.688 64l-59.247-32L256 208 169.824 32l-59.496 32 108.5 167.487L32 224v64l185.537-10.066L113.65 448l55.969 32L256 304l86.381 176 55.949-32-103.867-170.066L480 288z" fill="currentColor"/></svg>
+    </span>
     <% end %>
     <span><%= key %></span> 
     <span class='value-container'><%= val.present? ? '✅' : '❌' %> </span>

app/views/super_admin/app_configs/show.html.erb

@@ -1,5 +1,5 @@
 <% content_for(:title) do %>
-  Configure Settings
+  Configure Settings - <%= @config.titleize %>
 <% end %>
 <header class="main-content__header" role="banner">
   <h1 class="main-content__page-title" id="page-title">

app/views/super_admin/settings/show.html.erb

@@ -13,6 +13,15 @@
   </div>
 </header>
 <section class="main-content__body">
+
+  <% if Redis::Alfred.get(Redis::Alfred::CHATWOOT_INSTALLATION_CONFIG_RESET_WARNING) %>
+    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-5" role="alert">
+    <strong class="font-bold">Alert!</strong>
+    <span class="block sm:inline">Unauthorized premium changes detected in Chatwoot. To keep using them, please upgrade your plan. 
+      Contact for help :</span><span class="inline rounded-full bg-red-200 px-2  text-white  ml-2">sales@chatwoot.com</span>
+    </div>
+  <% end %>
+
   <div class="bg-white py-2 px-3">
     <div class="mb-4">
       <div class="flex items-center gap-2">
@@ -44,7 +53,7 @@
     <% if ChatwootHub.pricing_plan != 'community' &&  User.count > ChatwootHub.pricing_plan_quantity %>
     <div role="alert">
       <div class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
-        <p>You have <%= User.count %> agents. Please add more licenses.</p>
+        <p>You have <%= User.count %> agents. Please add more licenses to add more users.</p>
       </div>
     </div>
     <% end %>

config/features.yml

@@ -11,6 +11,7 @@
   enabled: false
 - name: disable_branding
   enabled: false
+  premium:  true
 - name: email_continuity_on_api_channel
   enabled: false
 - name: help_center
@@ -55,9 +56,13 @@
   enabled: false
 - name: audit_logs
   enabled: false
+  premium: true
 - name: response_bot
   enabled: false
+  premium: true
 - name: message_reply_to
   enabled: false
 - name: insert_article_in_reply
   enabled: false
+- name: inbox_view
+  enabled: false

config/initializers/rack_attack.rb

@@ -94,6 +94,11 @@ class Rack::Attack
     end
   end
 
+  ## Resend confirmation throttling
+  throttle('resend_confirmation/ip', limit: 5, period: 30.minutes) do |req|
+    req.ip if req.path_without_extentions == '/api/v1/profile/resend_confirmation' && req.post?
+  end
+
   ## Prevent Brute-Force Signup Attacks ###
   throttle('accounts/ip', limit: 5, period: 30.minutes) do |req|
     req.ip if req.path_without_extentions == '/api/v1/accounts' && req.post?

config/installation_config.yml

@@ -1,5 +1,20 @@
-# if you don't specify locked attribute, the default value will be true
-# which means the particular config will be locked
+# This file contains all the installation wide configuration which controls various settings in Chatwoot
+# This is internal config and should not be modified by the user directly in database
+# Chatwoot might override and modify these values during the upgrade process
+# Configs which can be modified by the user are available in the dashboard under appropriate UI
+#
+# name: the name of the config referenced in the code
+# value: the value of the config
+# display_title: the title of the config displayed in the dashboard UI
+# description: the description of the config displayed in the dashboard UI
+# locked: if you don't specify locked attribute in yaml, the default value will be true, 
+#         which means the particular config will be locked and won't be available in `super_admin/installation_configs`
+# premium: These values get overwritten unless the user is on a premium plan
+# type: The type of the config. Default is text,  boolean is also supported
+
+
+
+# ------- Branding Related Config ------- #
 - name: INSTALLATION_NAME
   value: 'Chatwoot'
   display_title: 'Installation Name'
@@ -41,32 +56,20 @@
   display_title: 'Chatwoot Metadata'
   description: 'Display default Chatwoot metadata like favicons and upgrade warnings'
   type: boolean
-- name: MAILER_INBOUND_EMAIL_DOMAIN
-  value:
-  locked: false
-- name: MAILER_SUPPORT_EMAIL
-  value:
+# ------- End of Branding Related Config ------- #
+
+
+
+# ------- Signup & Account Related Config ------- #
+- name: ENABLE_ACCOUNT_SIGNUP
+  display_title: 'Enable Account Signup'
+  value: false
+  description: 'Allow users to signup for new accounts'
   locked: false
+  type: boolean
 - name: CREATE_NEW_ACCOUNT_FROM_DASHBOARD
   value: false
-  locked: false
-- name: INSTALLATION_EVENTS_WEBHOOK_URL
-  value:
-  locked: false
-- name: CHATWOOT_INBOX_TOKEN
-  value:
-  locked: false
-- name: CHATWOOT_INBOX_HMAC_KEY
-  value:
-  locked: false
-- name: API_CHANNEL_NAME
-  value:
-- name: API_CHANNEL_THUMBNAIL
-  value:
-- name: ANALYTICS_TOKEN
-  value:
-- name: DIRECT_UPLOADS_ENABLED
-  value: false
+  description: 'Allow users to create new accounts from the dashboard'
   locked: false
 - name: HCAPTCHA_SITE_KEY
   value:
@@ -74,34 +77,107 @@
 - name: HCAPTCHA_SERVER_KEY
   value:
   locked: false
-- name: LOGOUT_REDIRECT_LINK
-  value: /app/login
+- name: INSTALLATION_EVENTS_WEBHOOK_URL
+  value:
+  display_title: 'System events Webhook URL'
+  description: 'The URL to which the system events like new accounts created will be sent'
   locked: false
-- name: DISABLE_USER_PROFILE_UPDATE
+- name: DIRECT_UPLOADS_ENABLED
+  type: boolean
   value: false
+  description: 'Enable direct uploads to cloud storage'
+  locked: false
+# ------- End of Account Related Config ------- #
+
+
+
+# ------- Email Related Config ------- #
+- name: MAILER_INBOUND_EMAIL_DOMAIN
+  value:
+  description: 'The domain name to be used for generating conversation continuity emails (reply+id@domain.com)'
+  locked: false
+- name: MAILER_SUPPORT_EMAIL
+  value:
+  locked: false
+# ------- End of Email Related Config ------- #
+
+
+# ------- Facebook Channel Related Config ------- #
+- name: FB_APP_ID 
+  display_title: 'Facebook App ID'
+  locked: false
+- name: FB_VERIFY_TOKEN 
+  display_title: 'Facebook Verify Token'
+  description: 'The verify token used for Facebook Messenger Webhook'
+  locked: false
+- name: FB_APP_SECRET
+  display_title: 'Facebook App Secret'
+  locked: false
+- name: IG_VERIFY_TOKEN
+  display_title: 'Instagram Verify Token'
+  description: 'The verify token used for Instagram Webhook'
   locked: false
 - name: ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT
+  display_title: 'Enable human agent'
   value: false
   locked: false
-- name: CSML_BOT_HOST
+  description: 'Enable human agent for messenger channel for longer message back period. Needs additional app approval: https://developers.facebook.com/docs/features-reference/human-agent/'
+  type: boolean
+# ------- End of Facebook Channel Related Config ------- #
+
+# ------- Chatwoot Internal Config for Cloud ----#
+- name: CHATWOOT_INBOX_TOKEN
   value:
+  description: 'The Chatwoot Inbox Token for Contact Support in Cloud'
   locked: false
-- name: CSML_BOT_API_KEY
+- name: CHATWOOT_INBOX_HMAC_KEY
   value:
+  description: 'The Chatwoot Inbox HMAC Key for Contact Support in Cloud'
   locked: false
 - name: CHATWOOT_CLOUD_PLANS
   value:
+  description: 'Config to store stripe plans for cloud'
 - name: DEPLOYMENT_ENV
   value: self-hosted
-- name: CSML_EDITOR_HOST
+  description: 'The deployment environment of the installation, to differentiate between Chatwoot cloud and self-hosted'
+- name: ANALYTICS_TOKEN
   value:
+  description: 'The June.so analytics token for Chatwoot cloud'
+# ------- End of Chatwoot Internal Config for Cloud ----#
+
+
+# ------- Chatwoot Internal Config for Self Hosted ----#
 - name: INSTALLATION_PRICING_PLAN
   value: 'community'
+  description: 'The pricing plan for the installation, retrieved from the billing API'
 - name: INSTALLATION_PRICING_PLAN_QUANTITY
   value: 0
+  description: 'The number of licenses purchased for the installation, retrieved from the billing API'
 - name: CHATWOOT_SUPPORT_WEBSITE_TOKEN
   value:
+  description: 'The Chatwoot website token, used to identify the Chatwoot inbox and display the "Contact Support" option on the billing page'
 - name: CHATWOOT_SUPPORT_SCRIPT_URL
   value:
+  description: 'The Chatwoot script base URL, to display the "Contact Support" option on the billing page'
 - name: CHATWOOT_SUPPORT_IDENTIFIER_HASH
   value:
+  description: 'The Chatwoot identifier hash, to validate the contact in the live chat window.'
+# ------- End of Chatwoot Internal Config for Self Hosted ----#
+
+## ------ Configs added for enterprise clients ------ ##
+- name: API_CHANNEL_NAME
+  value:
+  description: 'Custom name for the API channel'
+- name: API_CHANNEL_THUMBNAIL
+  value:
+  description: 'Custom thumbnail for the API channel'
+- name: LOGOUT_REDIRECT_LINK
+  value: /app/login
+  locked: false
+  description: 'Redirect to a different link after logout'
+- name: DISABLE_USER_PROFILE_UPDATE
+  value: false
+  locked: false
+  description: 'Disable rendering profile update page for users'
+
+## ------ End of Configs added for enterprise clients ------ ##

config/locales/en.yml

@@ -45,6 +45,7 @@ en:
       disposable_email: We do not allow disposable emails
       invalid_email: You have entered an invalid email
       email_already_exists: "You have already signed up for an account with %{email}"
+      invalid_params: 'Invalid, please check the signup paramters and try again'
       failed: Signup failed
     data_import:
       data_type:

config/routes.rb

@@ -176,6 +176,7 @@ Rails.application.routes.draw do
             end
             member do
               post :snooze
+              post :unread
             end
           end
           resource :notification_settings, only: [:show, :update]
@@ -247,6 +248,7 @@ Rails.application.routes.draw do
           post :availability
           post :auto_offline
           put :set_active_account
+          post :resend_confirmation
         end
       end
 
@@ -287,16 +289,18 @@ Rails.application.routes.draw do
     end
 
     namespace :v2 do
-      resources :accounts, only: [], module: :accounts do
-        resources :reports, only: [:index] do
-          collection do
-            get :summary
-            get :agents
-            get :inboxes
-            get :labels
-            get :teams
-            get :conversations
-            get :conversation_traffic
+      resources :accounts, only: [:create] do
+        scope module: :accounts do
+          resources :reports, only: [:index] do
+            collection do
+              get :summary
+              get :agents
+              get :inboxes
+              get :labels
+              get :teams
+              get :conversations
+              get :conversation_traffic
+            end
           end
         end
       end

db/migrate/20240129080827_add_location_and_country_code_to_contacts.rb

@@ -0,0 +1,6 @@
+class AddLocationAndCountryCodeToContacts < ActiveRecord::Migration[7.0]
+  def change
+    add_column :contacts, :location, :string, default: ''
+    add_column :contacts, :country_code, :string, default: ''
+  end
+end

db/migrate/20240131040316_remove_imap_inbox_syned_at_from_channel_email.rb

@@ -0,0 +1,5 @@
+class RemoveImapInboxSynedAtFromChannelEmail < ActiveRecord::Migration[7.0]
+  def change
+    remove_column :channel_email, :imap_inbox_synced_at, :datetime
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2024_01_24_084032) do
+ActiveRecord::Schema[7.0].define(version: 2024_01_31_040316) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"
@@ -276,7 +276,6 @@ ActiveRecord::Schema[7.0].define(version: 2024_01_24_084032) do
     t.string "imap_login", default: ""
     t.string "imap_password", default: ""
     t.boolean "imap_enable_ssl", default: true
-    t.datetime "imap_inbox_synced_at", precision: nil
     t.boolean "smtp_enabled", default: false
     t.string "smtp_address", default: ""
     t.integer "smtp_port", default: 0
@@ -421,6 +420,8 @@ ActiveRecord::Schema[7.0].define(version: 2024_01_24_084032) do
     t.integer "contact_type", default: 0
     t.string "middle_name", default: ""
     t.string "last_name", default: ""
+    t.string "location", default: ""
+    t.string "country_code", default: ""
     t.index "lower((email)::text), account_id", name: "index_contacts_on_lower_email_account_id"
     t.index ["account_id", "email", "phone_number", "identifier"], name: "index_contacts_on_nonempty_fields", where: "(((email)::text <> ''::text) OR ((phone_number)::text <> ''::text) OR ((identifier)::text <> ''::text))"
     t.index ["account_id"], name: "index_contacts_on_account_id"

enterprise/app/helpers/super_admin/features.yml

@@ -1,3 +1,5 @@
+# TODO: Move this values to features.yml itself
+# No need to replicate the same values in two places
 custom_branding:
   name: 'Custom Branding'
   description: 'Apply your own branding to this installation.'

enterprise/app/jobs/enterprise/internal/check_new_versions_job.rb

@@ -0,0 +1,30 @@
+module Enterprise::Internal::CheckNewVersionsJob
+  def perform
+    super
+    update_plan_info
+    reconcile_premium_config_and_features
+  end
+
+  private
+
+  def update_plan_info
+    return if @instance_info.blank?
+
+    update_installation_config(key: 'INSTALLATION_PRICING_PLAN', value: @instance_info['plan'])
+    update_installation_config(key: 'INSTALLATION_PRICING_PLAN_QUANTITY', value: @instance_info['plan_quantity'])
+    update_installation_config(key: 'CHATWOOT_SUPPORT_WEBSITE_TOKEN', value: @instance_info['chatwoot_support_website_token'])
+    update_installation_config(key: 'CHATWOOT_SUPPORT_IDENTIFIER_HASH', value: @instance_info['chatwoot_support_identifier_hash'])
+    update_installation_config(key: 'CHATWOOT_SUPPORT_SCRIPT_URL', value: @instance_info['chatwoot_support_script_url'])
+  end
+
+  def update_installation_config(key:, value:)
+    config = InstallationConfig.find_or_initialize_by(name: key)
+    config.value = value
+    config.locked = true
+    config.save!
+  end
+
+  def reconcile_premium_config_and_features
+    Internal::ReconcilePlanConfigService.new.perform
+  end
+end

enterprise/app/models/enterprise/automation_rule.rb

@@ -0,0 +1,9 @@
+module Enterprise::AutomationRule
+  def conditions_attributes
+    super + %w[sla_policy_id]
+  end
+
+  def actions_attributes
+    super + %w[add_sla]
+  end
+end

enterprise/app/models/enterprise/concerns/user.rb

@@ -0,0 +1,13 @@
+module Enterprise::Concerns::User
+  extend ActiveSupport::Concern
+
+  included do
+    before_validation :ensure_installation_pricing_plan_quantity
+  end
+
+  def ensure_installation_pricing_plan_quantity
+    return unless ChatwootHub.pricing_plan == 'premium'
+
+    errors.add(:base, 'User limit reached. Please purchase more licenses from super admin') if User.count >= ChatwootHub.pricing_plan_quantity
+  end
+end

enterprise/app/services/enterprise/action_service.rb

@@ -0,0 +1,15 @@
+module Enterprise::ActionService
+  def add_sla(sla_policy)
+    @conversation.update!(sla_policy_id: sla_policy.id)
+    create_applied_sla(sla_policy)
+  end
+
+  def create_applied_sla(sla_policy)
+    AppliedSla.create!(
+      account_id: @conversation.account_id,
+      sla_policy_id: sla_policy.id,
+      conversation_id: @conversation.id,
+      sla_status: 'active'
+    )
+  end
+end

enterprise/app/services/internal/reconcile_plan_config_service.rb

@@ -0,0 +1,60 @@
+class Internal::ReconcilePlanConfigService
+  def perform
+    remove_premium_config_reset_warning
+    return if ChatwootHub.pricing_plan != 'community'
+
+    create_premium_config_reset_warning if premium_config_reset_required?
+
+    # We will have this enabled in the future
+    # reconcile_premium_config
+    reconcile_premium_features
+  end
+
+  private
+
+  def config_path
+    @config_path ||= Rails.root.join('enterprise/config')
+  end
+
+  def premium_config
+    @premium_config ||= YAML.safe_load(File.read("#{config_path}/premium_installation_config.yml")).freeze
+  end
+
+  def remove_premium_config_reset_warning
+    Redis::Alfred.delete(Redis::Alfred::CHATWOOT_INSTALLATION_CONFIG_RESET_WARNING)
+  end
+
+  def create_premium_config_reset_warning
+    Redis::Alfred.set(Redis::Alfred::CHATWOOT_INSTALLATION_CONFIG_RESET_WARNING, true)
+  end
+
+  def premium_config_reset_required?
+    premium_config.any? do |config|
+      config = config.with_indifferent_access
+      existing_config = InstallationConfig.find_by(name: config[:name])
+      existing_config&.value != config[:value] if existing_config.present?
+    end
+  end
+
+  def reconcile_premium_config
+    premium_config.each do |config|
+      new_config = config.with_indifferent_access
+      existing_config = InstallationConfig.find_by(name: new_config[:name])
+      next if existing_config&.value == new_config[:value]
+
+      existing_config&.update!(value: new_config[:value])
+    end
+  end
+
+  def premium_features
+    @premium_features ||= YAML.safe_load(File.read("#{config_path}/premium_features.yml")).freeze
+  end
+
+  def reconcile_premium_features
+    Account.find_in_batches do |accounts|
+      accounts.each do |account|
+        account.disable_features!(*premium_features)
+      end
+    end
+  end
+end

enterprise/config/premium_features.yml

@@ -0,0 +1,4 @@
+# List of the premium features in EE edition
+- disable_branding
+- audit_logs
+- response_bot