Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
950ebcacd4 | ||
|
|
b9834c3a18 |
@@ -77,8 +77,7 @@ jobs:
|
||||
|
||||
- node/install:
|
||||
node-version: '24.13'
|
||||
- node/install-pnpm:
|
||||
version: '10.2.0'
|
||||
- node/install-pnpm
|
||||
- node/install-packages:
|
||||
pkg-manager: pnpm
|
||||
override-ci-command: pnpm i
|
||||
@@ -119,8 +118,7 @@ jobs:
|
||||
- checkout
|
||||
- node/install:
|
||||
node-version: '24.13'
|
||||
- node/install-pnpm:
|
||||
version: '10.2.0'
|
||||
- node/install-pnpm
|
||||
- node/install-packages:
|
||||
pkg-manager: pnpm
|
||||
override-ci-command: pnpm i
|
||||
@@ -151,8 +149,7 @@ jobs:
|
||||
- checkout
|
||||
- node/install:
|
||||
node-version: '24.13'
|
||||
- node/install-pnpm:
|
||||
version: '10.2.0'
|
||||
- node/install-pnpm
|
||||
- node/install-packages:
|
||||
pkg-manager: pnpm
|
||||
override-ci-command: pnpm i
|
||||
|
||||
+3
-3
@@ -272,9 +272,9 @@ AZURE_APP_SECRET=
|
||||
# ENABLE_SIDEKIQ_DEQUEUE_LOGGER=false
|
||||
|
||||
|
||||
# AI powered features (Captain)
|
||||
# The OpenAI API key and endpoint for Captain are not configured via .env.
|
||||
# Set them at Super Admin > App Configs > Captain (CAPTAIN_OPEN_AI_API_KEY, CAPTAIN_OPEN_AI_ENDPOINT).
|
||||
# AI powered features
|
||||
## OpenAI key
|
||||
# OPENAI_API_KEY=
|
||||
|
||||
# Housekeeping/Performance related configurations
|
||||
# Set to true if you want to remove stale contact inboxes
|
||||
|
||||
@@ -85,8 +85,8 @@
|
||||
## Project-Specific
|
||||
|
||||
- **Translations**:
|
||||
- For product and source-string changes, only update `en.yml` and `en.json`; other languages are handled through Crowdin and the community
|
||||
- Crowdin-generated translation sync PRs may update non-English locale files; do not flag those changes solely for modifying translated locale files
|
||||
- Only update `en.yml` and `en.json`
|
||||
- Other languages are handled by the community
|
||||
- Backend i18n → `en.yml`, Frontend i18n → `en.json`
|
||||
- **Frontend**:
|
||||
- Use `components-next/` for message bubbles (the rest is being deprecated)
|
||||
|
||||
@@ -195,7 +195,7 @@ gem 'reverse_markdown'
|
||||
|
||||
gem 'iso-639'
|
||||
gem 'ruby-openai'
|
||||
gem 'ai-agents', '>= 0.12.0'
|
||||
gem 'ai-agents', '>= 0.10.0'
|
||||
|
||||
# TODO: Move this gem as a dependency of ai-agents
|
||||
gem 'ruby_llm', '>= 1.14.1'
|
||||
|
||||
+19
-21
@@ -126,7 +126,7 @@ GEM
|
||||
jbuilder (~> 2)
|
||||
rails (>= 4.2, < 7.2)
|
||||
selectize-rails (~> 0.6)
|
||||
ai-agents (0.12.0)
|
||||
ai-agents (0.10.0)
|
||||
ruby_llm (~> 1.14)
|
||||
annotaterb (4.20.0)
|
||||
activerecord (>= 6.0.0)
|
||||
@@ -198,7 +198,7 @@ GEM
|
||||
crack (1.0.0)
|
||||
bigdecimal
|
||||
rexml
|
||||
crass (1.0.7)
|
||||
crass (1.0.6)
|
||||
cronex (0.15.0)
|
||||
tzinfo
|
||||
unicode (>= 0.4.4.5)
|
||||
@@ -211,14 +211,13 @@ GEM
|
||||
activerecord (>= 5.a)
|
||||
database_cleaner-core (~> 2.0.0)
|
||||
database_cleaner-core (2.0.1)
|
||||
datadog (2.38.0)
|
||||
cgi
|
||||
datadog-ruby_core_source (~> 3.5, >= 3.5.3)
|
||||
libdatadog (~> 36.0.0.1.0)
|
||||
libddwaf (~> 1.30.0.0.0)
|
||||
datadog (2.19.0)
|
||||
datadog-ruby_core_source (~> 3.4, >= 3.4.1)
|
||||
libdatadog (~> 18.1.0.1.0)
|
||||
libddwaf (~> 1.24.1.0.3)
|
||||
logger
|
||||
msgpack
|
||||
datadog-ruby_core_source (3.5.3)
|
||||
datadog-ruby_core_source (3.4.1)
|
||||
date (3.5.1)
|
||||
debug (1.8.0)
|
||||
irb (>= 1.5.0)
|
||||
@@ -523,16 +522,15 @@ GEM
|
||||
logger (~> 1.6)
|
||||
letter_opener (1.10.0)
|
||||
launchy (>= 2.2, < 4)
|
||||
libdatadog (36.0.0.1.0)
|
||||
libdatadog (36.0.0.1.0-arm64-darwin)
|
||||
libdatadog (36.0.0.1.0-x86_64-linux)
|
||||
libddwaf (1.30.0.0.2)
|
||||
libdatadog (18.1.0.1.0)
|
||||
libdatadog (18.1.0.1.0-x86_64-linux)
|
||||
libddwaf (1.24.1.0.3)
|
||||
ffi (~> 1.0)
|
||||
libddwaf (1.30.0.0.2-arm64-darwin)
|
||||
libddwaf (1.24.1.0.3-arm64-darwin)
|
||||
ffi (~> 1.0)
|
||||
libddwaf (1.30.0.0.2-x86_64-darwin)
|
||||
libddwaf (1.24.1.0.3-x86_64-darwin)
|
||||
ffi (~> 1.0)
|
||||
libddwaf (1.30.0.0.2-x86_64-linux)
|
||||
libddwaf (1.24.1.0.3-x86_64-linux)
|
||||
ffi (~> 1.0)
|
||||
line-bot-api (1.28.0)
|
||||
lint_roller (1.1.0)
|
||||
@@ -549,7 +547,7 @@ GEM
|
||||
activesupport (>= 4)
|
||||
railties (>= 4)
|
||||
request_store (~> 1.0)
|
||||
loofah (2.25.2)
|
||||
loofah (2.23.1)
|
||||
crass (~> 1.0.2)
|
||||
nokogiri (>= 1.12.0)
|
||||
mail (2.8.1)
|
||||
@@ -572,7 +570,7 @@ GEM
|
||||
minitest (5.25.5)
|
||||
mock_redis (0.36.0)
|
||||
ruby2_keywords
|
||||
msgpack (1.8.3)
|
||||
msgpack (1.8.0)
|
||||
multi_json (1.15.0)
|
||||
multi_xml (0.9.1)
|
||||
bigdecimal (>= 3.1, < 5)
|
||||
@@ -742,8 +740,8 @@ GEM
|
||||
activesupport (>= 5.0.0)
|
||||
minitest
|
||||
nokogiri (>= 1.6)
|
||||
rails-html-sanitizer (1.7.1)
|
||||
loofah (~> 2.25, >= 2.25.2)
|
||||
rails-html-sanitizer (1.6.1)
|
||||
loofah (~> 2.21)
|
||||
nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
|
||||
rails-i18n (7.0.10)
|
||||
i18n (>= 0.7, < 2)
|
||||
@@ -1032,7 +1030,7 @@ GEM
|
||||
addressable (>= 2.8.0)
|
||||
crack (>= 0.3.2)
|
||||
hashdiff (>= 0.4.0, < 2.0.0)
|
||||
websocket-driver (0.8.2)
|
||||
websocket-driver (0.7.7)
|
||||
base64
|
||||
websocket-extensions (>= 0.1.0)
|
||||
websocket-extensions (0.1.5)
|
||||
@@ -1060,7 +1058,7 @@ DEPENDENCIES
|
||||
administrate (>= 0.20.1)
|
||||
administrate-field-active_storage (>= 1.0.3)
|
||||
administrate-field-belongs_to_search (>= 0.9.0)
|
||||
ai-agents (>= 0.12.0)
|
||||
ai-agents (>= 0.10.0)
|
||||
annotaterb
|
||||
attr_extras
|
||||
audited (~> 5.4, >= 5.4.1)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Copyright (c) 2017-2026 Chatwoot Inc.
|
||||
Copyright (c) 2017-2024 Chatwoot Inc.
|
||||
|
||||
Portions of this software are licensed as follows:
|
||||
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
4.16.1
|
||||
4.15.1
|
||||
|
||||
@@ -2,14 +2,6 @@
|
||||
# It initializes with necessary attributes and provides a perform method
|
||||
# to create a user and account user in a transaction.
|
||||
class AgentBuilder
|
||||
LIMIT_EXCEEDED_MESSAGE = 'Account limit exceeded. Please purchase more licenses'.freeze
|
||||
|
||||
class LimitExceededError < StandardError
|
||||
def initialize
|
||||
super(AgentBuilder::LIMIT_EXCEEDED_MESSAGE)
|
||||
end
|
||||
end
|
||||
|
||||
# Initializes an AgentBuilder with necessary attributes.
|
||||
# @param email [String] the email of the user.
|
||||
# @param name [String] the name of the user.
|
||||
@@ -22,23 +14,15 @@ class AgentBuilder
|
||||
# Creates a user and account user in a transaction.
|
||||
# @return [User] the created user.
|
||||
def perform
|
||||
account.with_lock do
|
||||
raise LimitExceededError unless can_add_agent?
|
||||
|
||||
ActiveRecord::Base.transaction do
|
||||
@user = find_or_create_user
|
||||
create_account_user
|
||||
end
|
||||
ActiveRecord::Base.transaction do
|
||||
@user = find_or_create_user
|
||||
create_account_user
|
||||
end
|
||||
@user
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def can_add_agent?
|
||||
account.usage_limits[:agents] > account.account_users.count
|
||||
end
|
||||
|
||||
# Finds a user by email or creates a new one with a temporary password.
|
||||
# @return [User] the found or created user.
|
||||
def find_or_create_user
|
||||
|
||||
@@ -1,213 +0,0 @@
|
||||
class V2::Reports::DrilldownBuilder
|
||||
include DateRangeHelper
|
||||
include TimezoneHelper
|
||||
|
||||
DEFAULT_GROUP_BY = 'day'.freeze
|
||||
DEFAULT_PAGE = 1
|
||||
DEFAULT_PER_PAGE = 25
|
||||
MAX_PER_PAGE = 100
|
||||
SUPPORTED_GROUP_BY = %w[hour day week month year].freeze
|
||||
SUPPORTED_DIMENSION_TYPES = %w[account inbox agent label team].freeze
|
||||
MESSAGE_METRICS = {
|
||||
'incoming_messages_count' => :incoming,
|
||||
'outgoing_messages_count' => :outgoing
|
||||
}.freeze
|
||||
MESSAGE_EVENT_METRICS = %w[avg_first_response_time reply_time].freeze
|
||||
|
||||
pattr_initialize :account, :params
|
||||
|
||||
def self.supported_dimension_type?(type) = SUPPORTED_DIMENSION_TYPES.include?((type.presence || 'account').to_s)
|
||||
|
||||
def build
|
||||
records = paginated_records.to_a
|
||||
{ meta: meta, payload: records.map { |record| record_serializer(records).serialize(record) } }
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def meta
|
||||
{
|
||||
metric: metric,
|
||||
record_type: record_type,
|
||||
bucket: {
|
||||
since: bucket_range.begin.to_i,
|
||||
until: bucket_range.end.to_i
|
||||
},
|
||||
current_page: current_page,
|
||||
per_page: per_page,
|
||||
total_count: paginated_records.total_count,
|
||||
conversation_count: conversation_count
|
||||
}
|
||||
end
|
||||
|
||||
def conversation_count
|
||||
return paginated_records.total_count if conversation_metric?
|
||||
|
||||
drilldown_scope.except(:includes).reorder(nil).distinct.count(:conversation_id)
|
||||
end
|
||||
|
||||
def paginated_records
|
||||
@paginated_records ||= drilldown_scope.page(current_page).per(per_page)
|
||||
end
|
||||
|
||||
def drilldown_scope
|
||||
if message_metric?
|
||||
message_scope
|
||||
elsif conversation_metric?
|
||||
conversation_scope
|
||||
else
|
||||
reporting_event_scope
|
||||
end
|
||||
end
|
||||
|
||||
def message_scope
|
||||
scope.messages
|
||||
.where(account_id: account.id, created_at: bucket_range)
|
||||
.public_send(MESSAGE_METRICS.fetch(metric))
|
||||
.includes(:sender, conversation: [:assignee, :contact, :inbox])
|
||||
.reorder(created_at: :desc)
|
||||
end
|
||||
|
||||
def conversation_scope
|
||||
scope.conversations
|
||||
.where(account_id: account.id, created_at: bucket_range)
|
||||
.includes(:assignee, :contact, :inbox)
|
||||
.order(created_at: :desc)
|
||||
end
|
||||
|
||||
def reporting_event_scope
|
||||
events = scope.reporting_events
|
||||
.where(account_id: account.id, name: raw_event_name, created_at: bucket_range)
|
||||
.includes(:user, :inbox, conversation: [:assignee, :contact, :inbox])
|
||||
.order(created_at: :desc)
|
||||
|
||||
if raw_count_strategy == :exclude_bot_handoffs
|
||||
events = events.where.not(conversation_id: bot_handoff_conversation_ids_subquery)
|
||||
elsif raw_count_strategy == :distinct_conversation
|
||||
events = events.where(id: distinct_conversation_event_ids(events))
|
||||
end
|
||||
|
||||
events
|
||||
end
|
||||
|
||||
def bot_handoff_conversation_ids_subquery
|
||||
scope.reporting_events
|
||||
.where(account_id: account.id, name: :conversation_bot_handoff, created_at: range)
|
||||
.where.not(conversation_id: nil)
|
||||
.select(:conversation_id)
|
||||
end
|
||||
|
||||
def distinct_conversation_event_ids(events)
|
||||
events.reorder(nil)
|
||||
.where.not(conversation_id: nil)
|
||||
.select('MAX(reporting_events.id)')
|
||||
.group(:conversation_id)
|
||||
end
|
||||
|
||||
def record_serializer(records)
|
||||
@record_serializer ||= V2::Reports::DrilldownRecordSerializer.new(
|
||||
account,
|
||||
metric,
|
||||
use_business_hours?,
|
||||
records
|
||||
)
|
||||
end
|
||||
|
||||
def bucket_range
|
||||
@bucket_range ||= begin
|
||||
bucket_start = Time.zone.at(params[:bucket_timestamp].to_i).in_time_zone(timezone)
|
||||
bucket_end = bucket_end_for(bucket_start)
|
||||
requested_start = Time.zone.at(params[:since].to_i)
|
||||
requested_end = Time.zone.at(params[:until].to_i)
|
||||
|
||||
[bucket_start, requested_start].max...[bucket_end, requested_end].min
|
||||
end
|
||||
end
|
||||
|
||||
def bucket_end_for(bucket_start)
|
||||
{
|
||||
'hour' => bucket_start + 1.hour,
|
||||
'day' => bucket_start + 1.day,
|
||||
'week' => bucket_start + 1.week,
|
||||
'month' => bucket_start + 1.month,
|
||||
'year' => bucket_start + 1.year
|
||||
}.fetch(group_by)
|
||||
end
|
||||
|
||||
def scope
|
||||
case dimension_type
|
||||
when 'account' then account
|
||||
when 'inbox' then inbox
|
||||
when 'agent' then user
|
||||
when 'label' then label
|
||||
when 'team' then team
|
||||
else
|
||||
raise ArgumentError, "Unsupported drilldown dimension type: #{dimension_type}"
|
||||
end
|
||||
end
|
||||
|
||||
def inbox = @inbox ||= account.inboxes.find(params[:id])
|
||||
|
||||
def user = @user ||= account.users.find(params[:id])
|
||||
|
||||
def label = @label ||= account.labels.find(params[:id])
|
||||
|
||||
def team = @team ||= account.teams.find(params[:id])
|
||||
|
||||
def metric
|
||||
params[:metric].to_s
|
||||
end
|
||||
|
||||
def report_metric
|
||||
@report_metric ||= Reports::ReportMetricRegistry.fetch(metric)
|
||||
end
|
||||
|
||||
def raw_event_name
|
||||
report_metric&.raw_event_name
|
||||
end
|
||||
|
||||
def raw_count_strategy
|
||||
report_metric&.raw_count_strategy
|
||||
end
|
||||
|
||||
def record_type
|
||||
return 'message' if message_metric? || MESSAGE_EVENT_METRICS.include?(metric)
|
||||
|
||||
'conversation'
|
||||
end
|
||||
|
||||
def message_metric?
|
||||
MESSAGE_METRICS.key?(metric)
|
||||
end
|
||||
|
||||
def conversation_metric?
|
||||
metric == 'conversations_count'
|
||||
end
|
||||
|
||||
def dimension_type
|
||||
(params[:type].presence || 'account').to_s
|
||||
end
|
||||
|
||||
def group_by
|
||||
@group_by ||= SUPPORTED_GROUP_BY.include?(params[:group_by].to_s) ? params[:group_by].to_s : DEFAULT_GROUP_BY
|
||||
end
|
||||
|
||||
def timezone
|
||||
@timezone ||= timezone_name_from_offset(params[:timezone_offset])
|
||||
end
|
||||
|
||||
def current_page
|
||||
[params[:page].to_i, DEFAULT_PAGE].max
|
||||
end
|
||||
|
||||
def per_page
|
||||
requested_per_page = params[:per_page].to_i
|
||||
requested_per_page = DEFAULT_PER_PAGE if requested_per_page <= 0
|
||||
|
||||
[requested_per_page, MAX_PER_PAGE].min
|
||||
end
|
||||
|
||||
def use_business_hours?
|
||||
ActiveModel::Type::Boolean.new.cast(params[:business_hours])
|
||||
end
|
||||
end
|
||||
@@ -1,199 +0,0 @@
|
||||
class V2::Reports::DrilldownRecordSerializer
|
||||
MESSAGE_EVENT_METRICS = %w[avg_first_response_time reply_time].freeze
|
||||
|
||||
attr_reader :account, :metric, :use_business_hours, :records
|
||||
|
||||
def initialize(account, metric, use_business_hours, records = [])
|
||||
@account = account
|
||||
@metric = metric
|
||||
@use_business_hours = use_business_hours
|
||||
@records = records
|
||||
end
|
||||
|
||||
def serialize(record)
|
||||
return serialize_message(record) if record.is_a?(Message)
|
||||
return serialize_conversation_event(record) if record.is_a?(ReportingEvent)
|
||||
|
||||
serialize_conversation(record)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def serialize_message(message, metric_value: nil, occurred_at: nil)
|
||||
{
|
||||
record_type: 'message',
|
||||
conversation: conversation_attributes(message.conversation),
|
||||
message: message_attributes(message),
|
||||
metric_value: metric_value,
|
||||
occurred_at: (occurred_at || message.created_at).to_i
|
||||
}
|
||||
end
|
||||
|
||||
def serialize_conversation_event(event)
|
||||
inferred_message = inferred_message_for(event)
|
||||
if inferred_message.present?
|
||||
return serialize_message(
|
||||
inferred_message,
|
||||
metric_value: event_metric_value(event),
|
||||
occurred_at: event_timestamp(event)
|
||||
)
|
||||
end
|
||||
|
||||
serialize_conversation(
|
||||
event.conversation,
|
||||
metric_value: event_metric_value(event),
|
||||
occurred_at: event_timestamp(event),
|
||||
event_name: event.name
|
||||
)
|
||||
end
|
||||
|
||||
def serialize_conversation(conversation, metric_value: nil, occurred_at: nil, event_name: nil)
|
||||
serialized_record = {
|
||||
record_type: 'conversation',
|
||||
conversation: conversation_attributes(conversation),
|
||||
message: nil,
|
||||
metric_value: metric_value,
|
||||
occurred_at: (occurred_at || conversation&.created_at)&.to_i
|
||||
}
|
||||
serialized_record[:event_name] = event_name if event_name.present?
|
||||
serialized_record
|
||||
end
|
||||
|
||||
def conversation_attributes(conversation)
|
||||
return {} if conversation.blank?
|
||||
|
||||
{
|
||||
id: conversation.id,
|
||||
display_id: conversation.display_id,
|
||||
contact_id: conversation.contact_id,
|
||||
contact_name: conversation.contact&.name,
|
||||
inbox_id: conversation.inbox_id,
|
||||
inbox_name: conversation.inbox&.name,
|
||||
assignee_id: conversation.assignee_id,
|
||||
assignee_name: conversation.assignee&.name,
|
||||
status: conversation.status,
|
||||
created_at: conversation.created_at.to_i,
|
||||
last_activity_at: conversation.last_activity_at.to_i,
|
||||
last_message: last_message_attributes(conversation)
|
||||
}
|
||||
end
|
||||
|
||||
def message_attributes(message)
|
||||
{
|
||||
id: message.id,
|
||||
content: message.content,
|
||||
message_type: message.message_type,
|
||||
sender_name: message.sender&.try(:name),
|
||||
created_at: message.created_at.to_i
|
||||
}
|
||||
end
|
||||
|
||||
def last_message_attributes(conversation)
|
||||
message = latest_messages_by_conversation_id[conversation.id]
|
||||
return if message.blank?
|
||||
|
||||
message_attributes(message)
|
||||
end
|
||||
|
||||
def inferred_message_for(event)
|
||||
return unless MESSAGE_EVENT_METRICS.include?(metric)
|
||||
return if event.conversation.blank? || event.event_end_time.blank?
|
||||
|
||||
inferred_messages_by_event_id[event.id]
|
||||
end
|
||||
|
||||
def first_response_event_with_user?(event)
|
||||
metric == 'avg_first_response_time' && event.user_id.present?
|
||||
end
|
||||
|
||||
def message_inference_range(event)
|
||||
(event.event_end_time - 1.second)..(event.event_end_time + 1.second)
|
||||
end
|
||||
|
||||
def event_metric_value(event)
|
||||
use_business_hours ? event.value_in_business_hours : event.value
|
||||
end
|
||||
|
||||
def event_timestamp(event)
|
||||
event.event_end_time || event.created_at
|
||||
end
|
||||
|
||||
def latest_messages_by_conversation_id
|
||||
@latest_messages_by_conversation_id ||= if conversation_ids.blank?
|
||||
{}
|
||||
else
|
||||
latest_messages.index_by(&:conversation_id)
|
||||
end
|
||||
end
|
||||
|
||||
def latest_messages
|
||||
Message
|
||||
.where(account_id: account.id, conversation_id: conversation_ids)
|
||||
.where.not(message_type: :activity)
|
||||
.select('DISTINCT ON (messages.conversation_id) messages.*')
|
||||
.reorder(Arel.sql('messages.conversation_id, messages.created_at DESC, messages.id DESC'))
|
||||
.includes(:sender)
|
||||
end
|
||||
|
||||
def inferred_messages_by_event_id
|
||||
@inferred_messages_by_event_id ||= inference_events.each_with_object({}) do |event, messages_by_event_id|
|
||||
messages_by_event_id[event.id] = inferred_message_candidates.find do |message|
|
||||
message_matches_event?(message, event)
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
def inferred_message_candidates
|
||||
@inferred_message_candidates ||= if inference_events.blank?
|
||||
[]
|
||||
else
|
||||
inferred_messages.to_a
|
||||
end
|
||||
end
|
||||
|
||||
def inferred_messages
|
||||
Message
|
||||
.where(account_id: account.id, conversation_id: inference_events.map(&:conversation_id).uniq)
|
||||
.where(created_at: inference_time_range)
|
||||
.where(message_type: %i[outgoing template])
|
||||
.includes(:sender)
|
||||
.reorder(created_at: :desc, id: :desc)
|
||||
end
|
||||
|
||||
def message_matches_event?(message, event)
|
||||
message.conversation_id == event.conversation_id &&
|
||||
message.created_at.between?(
|
||||
message_inference_range(event).begin,
|
||||
message_inference_range(event).end
|
||||
) &&
|
||||
message_sender_matches_event?(message, event)
|
||||
end
|
||||
|
||||
def message_sender_matches_event?(message, event)
|
||||
return true unless first_response_event_with_user?(event)
|
||||
|
||||
message.sender_id == event.user_id && message.sender_type == 'User'
|
||||
end
|
||||
|
||||
def inference_time_range
|
||||
event_end_times = inference_events.map(&:event_end_time)
|
||||
|
||||
(event_end_times.min - 1.second)..(event_end_times.max + 1.second)
|
||||
end
|
||||
|
||||
def inference_events
|
||||
@inference_events ||= records.select do |record|
|
||||
record.is_a?(ReportingEvent) && record.conversation_id.present? && record.event_end_time.present?
|
||||
end
|
||||
end
|
||||
|
||||
def conversation_ids
|
||||
@conversation_ids ||= records.filter_map { |record| conversation_id_for(record) }.uniq
|
||||
end
|
||||
|
||||
def conversation_id_for(record)
|
||||
return record.conversation_id if record.is_a?(Message) || record.is_a?(ReportingEvent)
|
||||
|
||||
record.id
|
||||
end
|
||||
end
|
||||
@@ -1,4 +1,5 @@
|
||||
class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
|
||||
before_action :current_account
|
||||
before_action :check_authorization
|
||||
before_action :agent_bot, except: [:index, :create]
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
|
||||
before_action :fetch_agent, except: [:create, :index, :bulk_create]
|
||||
before_action :check_authorization
|
||||
before_action :validate_limit, only: [:create]
|
||||
before_action :validate_limit_for_bulk_create, only: [:bulk_create]
|
||||
|
||||
def index
|
||||
@agents = agents
|
||||
@@ -18,8 +20,6 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
|
||||
)
|
||||
|
||||
@agent = builder.perform
|
||||
rescue AgentBuilder::LimitExceededError => e
|
||||
render_payment_required(e.message)
|
||||
end
|
||||
|
||||
def update
|
||||
@@ -36,13 +36,25 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
|
||||
def bulk_create
|
||||
emails = params[:emails]
|
||||
|
||||
bulk_create_agents(emails)
|
||||
emails.each do |email|
|
||||
builder = AgentBuilder.new(
|
||||
email: email,
|
||||
name: email.split('@').first,
|
||||
inviter: current_user,
|
||||
account: Current.account
|
||||
)
|
||||
begin
|
||||
builder.perform
|
||||
rescue ActiveRecord::RecordInvalid => e
|
||||
Rails.logger.info "[Agent#bulk_create] ignoring email #{email}, errors: #{e.record.errors}"
|
||||
end
|
||||
end
|
||||
|
||||
# This endpoint is used to bulk create agents during onboarding
|
||||
# onboarding_step key in present in Current account custom attributes, since this is a one time operation
|
||||
clear_onboarding_step
|
||||
Current.account.custom_attributes.delete('onboarding_step')
|
||||
Current.account.save!
|
||||
head :ok
|
||||
rescue AgentBuilder::LimitExceededError => e
|
||||
render_payment_required(e.message)
|
||||
end
|
||||
|
||||
private
|
||||
@@ -75,33 +87,22 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
|
||||
@agents ||= Current.account.users.order_by_full_name.includes(:account_users, { avatar_attachment: [:blob] })
|
||||
end
|
||||
|
||||
def bulk_create_agents(emails)
|
||||
Current.account.with_lock do
|
||||
raise AgentBuilder::LimitExceededError if emails.count > available_agent_count
|
||||
def validate_limit_for_bulk_create
|
||||
limit_available = params[:emails].count <= available_agent_count
|
||||
|
||||
emails.each { |email| create_agent_from_email(email) }
|
||||
end
|
||||
render_payment_required('Account limit exceeded. Please purchase more licenses') unless limit_available
|
||||
end
|
||||
|
||||
def create_agent_from_email(email)
|
||||
builder = AgentBuilder.new(
|
||||
email: email,
|
||||
name: email.split('@').first,
|
||||
inviter: current_user,
|
||||
account: Current.account
|
||||
)
|
||||
builder.perform
|
||||
rescue ActiveRecord::RecordInvalid => e
|
||||
Rails.logger.info "[Agent#bulk_create] ignoring email #{email}, errors: #{e.record.errors}"
|
||||
end
|
||||
|
||||
def clear_onboarding_step
|
||||
Current.account.custom_attributes.delete('onboarding_step')
|
||||
Current.account.save!
|
||||
def validate_limit
|
||||
render_payment_required('Account limit exceeded. Please purchase more licenses') unless can_add_agent?
|
||||
end
|
||||
|
||||
def available_agent_count
|
||||
Current.account.usage_limits[:agents] - Current.account.account_users.count
|
||||
Current.account.usage_limits[:agents] - agents.count
|
||||
end
|
||||
|
||||
def can_add_agent?
|
||||
available_agent_count.positive?
|
||||
end
|
||||
|
||||
def delete_user_record(agent)
|
||||
|
||||
@@ -30,8 +30,8 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
|
||||
end
|
||||
|
||||
def update
|
||||
persist_article_changes if params[:article].present?
|
||||
render json: { message: @article.errors.full_messages.to_sentence }, status: :unprocessable_entity and return unless @article.valid?
|
||||
@article.update!(article_params) if params[:article].present?
|
||||
render json: { error: @article.errors.messages }, status: :unprocessable_entity and return unless @article.valid?
|
||||
end
|
||||
|
||||
def destroy
|
||||
@@ -40,8 +40,8 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
|
||||
end
|
||||
|
||||
def reorder
|
||||
positions = Article.update_positions(portal: @portal, positions_hash: params[:positions_hash])
|
||||
render json: { positions: positions }
|
||||
Article.update_positions(portal: @portal, positions_hash: params[:positions_hash])
|
||||
head :ok
|
||||
end
|
||||
|
||||
private
|
||||
@@ -67,26 +67,12 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
|
||||
@portal ||= Current.account.portals.find_by!(slug: params[:portal_id])
|
||||
end
|
||||
|
||||
# Draft-only autosaves must not bump the public-facing updated_at, so write
|
||||
# them with update_columns (which skips the timestamp). update_columns also
|
||||
# skips validations, so assign and validate first to avoid persisting content
|
||||
# that exceeds the column length limit.
|
||||
def persist_article_changes
|
||||
keys = article_params.to_h.keys
|
||||
if keys.any? && (keys - %w[draft_title draft_content]).empty?
|
||||
@article.assign_attributes(article_params)
|
||||
@article.update_columns(article_params.to_h) if @article.valid? # rubocop:disable Rails/SkipsModelValidations
|
||||
else
|
||||
@article.update!(article_params)
|
||||
end
|
||||
end
|
||||
|
||||
def article_params
|
||||
params.require(:article).permit(
|
||||
:title, :slug, :position, :content, :description, :category_id, :author_id, :associated_article_id, :status,
|
||||
:locale, :draft_title, :draft_content, meta: [:title,
|
||||
:description,
|
||||
{ tags: [] }]
|
||||
:locale, meta: [:title,
|
||||
:description,
|
||||
{ tags: [] }]
|
||||
)
|
||||
end
|
||||
|
||||
|
||||
@@ -2,8 +2,6 @@ class Api::V1::Accounts::AssignableAgentsController < Api::V1::Accounts::BaseCon
|
||||
before_action :fetch_inboxes
|
||||
|
||||
def index
|
||||
# TODO: Remove this opt-in once mobile clients support AgentBot assignees in this payload.
|
||||
@include_agent_bots = params[:include_agent_bots].present?
|
||||
agent_ids = @inboxes.map do |inbox|
|
||||
authorize inbox, :show?
|
||||
member_ids = inbox.members.pluck(:user_id)
|
||||
@@ -12,7 +10,6 @@ class Api::V1::Accounts::AssignableAgentsController < Api::V1::Accounts::BaseCon
|
||||
agent_ids = agent_ids.inject(:&)
|
||||
agents = Current.account.users.where(id: agent_ids)
|
||||
@assignable_agents = (agents + Current.account.administrators).uniq
|
||||
@agent_bots = @include_agent_bots ? AgentBot.accessible_to(Current.account) : []
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
@@ -2,14 +2,5 @@ class Api::V1::Accounts::BaseController < Api::BaseController
|
||||
include SwitchLocale
|
||||
include EnsureCurrentAccountHelper
|
||||
before_action :current_account
|
||||
before_action :validate_token_api_access, if: :authenticate_by_access_token?
|
||||
around_action :switch_locale_using_account_locale
|
||||
|
||||
private
|
||||
|
||||
def validate_token_api_access
|
||||
return if Current.account.api_and_webhooks_enabled?
|
||||
|
||||
render json: { error: 'API access is not enabled for this account' }, status: :forbidden
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
class Api::V1::Accounts::BrandedEmailLayoutsController < Api::V1::Accounts::BaseController
|
||||
before_action :check_admin_authorization?
|
||||
|
||||
def show
|
||||
set_branded_email_layout
|
||||
end
|
||||
|
||||
def update
|
||||
unless Current.account.feature_enabled?(:branded_email_templates)
|
||||
render_could_not_create_error('Branded email templates feature is not enabled')
|
||||
return
|
||||
end
|
||||
|
||||
branded_email_layout = params[:branded_email_layout] == 'null' ? nil : params[:branded_email_layout]
|
||||
EmailTemplate.update_account_branded_layout!(account: Current.account, body: branded_email_layout) if params.key?(:branded_email_layout)
|
||||
set_branded_email_layout
|
||||
rescue ActiveRecord::RecordInvalid => e
|
||||
render_could_not_create_error(e.record.errors.full_messages.join(', '))
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def set_branded_email_layout
|
||||
@branded_email_layout = EmailTemplate.account_branded_layout_template_for(Current.account)&.body
|
||||
end
|
||||
end
|
||||
|
||||
Api::V1::Accounts::BrandedEmailLayoutsController.prepend_mod_with('Api::V1::Accounts::BrandedEmailLayoutsController')
|
||||
@@ -6,7 +6,6 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
|
||||
page_access_token = params[:page_access_token]
|
||||
page_id = params[:page_id]
|
||||
inbox_name = params[:inbox_name]
|
||||
|
||||
ActiveRecord::Base.transaction do
|
||||
facebook_channel = Current.account.facebook_pages.create!(
|
||||
page_id: page_id, user_access_token: user_access_token,
|
||||
@@ -16,8 +15,6 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
|
||||
set_instagram_id(page_access_token, facebook_channel)
|
||||
set_avatar(@facebook_inbox, page_id)
|
||||
end
|
||||
rescue CustomExceptions::Inbox::LimitExceeded => e
|
||||
render_error_response(e)
|
||||
rescue StandardError => e
|
||||
ChatwootExceptionTracker.new(e).capture_exception
|
||||
Rails.logger.error "Error in register_facebook_page: #{e.message}"
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::BaseController
|
||||
before_action :current_account
|
||||
before_action :authorize_account_update, only: [:update]
|
||||
|
||||
def show
|
||||
@@ -65,7 +66,6 @@ class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::Bas
|
||||
config = Llm::Models.feature_config(feature_key)
|
||||
route = Llm::FeatureRouter.resolve(feature: feature_key, account: Current.account)
|
||||
config.merge(
|
||||
default: default_model_for(feature_key),
|
||||
enabled: account_features[feature_key] == true,
|
||||
model: route[:model],
|
||||
selected: route[:model],
|
||||
@@ -74,10 +74,4 @@ class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::Bas
|
||||
)
|
||||
end
|
||||
end
|
||||
|
||||
def default_model_for(feature_key)
|
||||
return Llm::FeatureRouter::CAPTAIN_V2_ASSISTANT_MODEL if feature_key == 'assistant' && Current.account.feature_enabled?('captain_integration_v2')
|
||||
|
||||
Llm::Models.default_model_for(feature_key)
|
||||
end
|
||||
end
|
||||
|
||||
@@ -6,8 +6,6 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts:
|
||||
|
||||
def create
|
||||
process_create
|
||||
rescue CustomExceptions::Inbox::LimitExceeded => e
|
||||
render_error_response(e)
|
||||
rescue StandardError => e
|
||||
render_could_not_create_error(e.message)
|
||||
end
|
||||
|
||||
@@ -1,17 +1,6 @@
|
||||
class Api::V1::Accounts::Conversations::DirectUploadsController < ActiveStorage::DirectUploadsController
|
||||
include DeviseTokenAuth::Concerns::SetUserByToken
|
||||
include RequestExceptionHandler
|
||||
include AccessTokenAuthHelper
|
||||
include EnsureCurrentAccountHelper
|
||||
|
||||
skip_before_action :verify_authenticity_token, if: :authenticate_by_access_token?
|
||||
|
||||
around_action :handle_with_exception
|
||||
before_action :authenticate_access_token!, if: :authenticate_by_access_token?
|
||||
before_action :validate_bot_access_token!, if: :authenticate_by_access_token?
|
||||
before_action :authenticate_user!, unless: :authenticate_by_access_token?
|
||||
before_action :current_account
|
||||
before_action :validate_token_api_access, if: :authenticate_by_access_token?
|
||||
before_action :conversation
|
||||
|
||||
def create
|
||||
@@ -22,16 +11,6 @@ class Api::V1::Accounts::Conversations::DirectUploadsController < ActiveStorage:
|
||||
|
||||
private
|
||||
|
||||
def authenticate_by_access_token?
|
||||
request.headers[:api_access_token].present? || request.headers[:HTTP_API_ACCESS_TOKEN].present?
|
||||
end
|
||||
|
||||
def validate_token_api_access
|
||||
return if Current.account.api_and_webhooks_enabled?
|
||||
|
||||
render json: { error: 'API access is not enabled for this account' }, status: :forbidden
|
||||
end
|
||||
|
||||
def conversation
|
||||
@conversation ||= Current.account.conversations.find_by(display_id: params[:conversation_id])
|
||||
end
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::Conversations::BaseController
|
||||
before_action :ensure_api_inbox, only: :update
|
||||
before_action :ensure_agent_bot_takeover, only: :create
|
||||
|
||||
def index
|
||||
@messages = message_finder.perform
|
||||
@@ -52,9 +53,6 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::
|
||||
end
|
||||
|
||||
render json: { content: translated_content }
|
||||
rescue Google::Cloud::Error => e
|
||||
# `details` carries the clean human message; `message` includes gRPC debug noise
|
||||
render_could_not_create_error(e.details.presence || e.message)
|
||||
end
|
||||
|
||||
private
|
||||
@@ -75,6 +73,21 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::
|
||||
message.translations.present? && message.translations[permitted_params[:target_language]].present?
|
||||
end
|
||||
|
||||
def ensure_agent_bot_takeover
|
||||
return unless Current.user.is_a?(User) && @conversation.assignee_agent_bot_id.present?
|
||||
return if private_message? || incoming_message?
|
||||
|
||||
render json: { error: 'Conversation is assigned to an Agent Bot. Take over the conversation before replying.' }, status: :unprocessable_entity
|
||||
end
|
||||
|
||||
def private_message?
|
||||
ActiveModel::Type::Boolean.new.cast(params[:private])
|
||||
end
|
||||
|
||||
def incoming_message?
|
||||
params[:message_type] == 'incoming'
|
||||
end
|
||||
|
||||
# API inbox check
|
||||
def ensure_api_inbox
|
||||
# Only API inboxes can update messages
|
||||
|
||||
@@ -1,40 +1,27 @@
|
||||
class Api::V1::Accounts::Conversations::ParticipantsController < Api::V1::Accounts::Conversations::BaseController
|
||||
include Events::Types
|
||||
|
||||
def show
|
||||
@participants = @conversation.conversation_participants
|
||||
end
|
||||
|
||||
def create
|
||||
participant_ids_to_add = participants_to_be_added_ids
|
||||
|
||||
ActiveRecord::Base.transaction do
|
||||
@participants = participant_ids_to_add.map { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
|
||||
@participants = participants_to_be_added_ids.map { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
|
||||
end
|
||||
notify_unread_count_change if participant_ids_to_add.any?
|
||||
end
|
||||
|
||||
def update
|
||||
participant_ids_to_add = participants_to_be_added_ids
|
||||
participant_ids_to_remove = participants_to_be_removed_ids
|
||||
changed_participant_ids = participant_ids_to_add + participant_ids_to_remove
|
||||
|
||||
ActiveRecord::Base.transaction do
|
||||
participant_ids_to_add.each { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
|
||||
participant_ids_to_remove.each { |user_id| @conversation.conversation_participants.find_by(user_id: user_id)&.destroy }
|
||||
participants_to_be_added_ids.each { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
|
||||
participants_to_be_removed_ids.each { |user_id| @conversation.conversation_participants.find_by(user_id: user_id)&.destroy }
|
||||
end
|
||||
notify_unread_count_change if changed_participant_ids.any?
|
||||
@participants = @conversation.conversation_participants
|
||||
render action: 'show'
|
||||
end
|
||||
|
||||
def destroy
|
||||
participant_ids_to_remove = current_participant_ids & params[:user_ids]
|
||||
|
||||
ActiveRecord::Base.transaction do
|
||||
params[:user_ids].map { |user_id| @conversation.conversation_participants.find_by(user_id: user_id)&.destroy }
|
||||
end
|
||||
notify_unread_count_change if participant_ids_to_remove.any?
|
||||
head :ok
|
||||
end
|
||||
|
||||
@@ -51,11 +38,4 @@ class Api::V1::Accounts::Conversations::ParticipantsController < Api::V1::Accoun
|
||||
def current_participant_ids
|
||||
@current_participant_ids ||= @conversation.conversation_participants.pluck(:user_id)
|
||||
end
|
||||
|
||||
def notify_unread_count_change
|
||||
return unless Current.account.feature_enabled?('conversation_unread_counts')
|
||||
return unless Current.account.feature_enabled?('unread_count_for_filters')
|
||||
|
||||
Rails.configuration.dispatcher.dispatch(CONVERSATION_UNREAD_COUNT_CHANGED, Time.zone.now, conversation: @conversation)
|
||||
end
|
||||
end
|
||||
|
||||
@@ -2,28 +2,12 @@ class Api::V1::Accounts::Conversations::UnreadCountsController < Api::V1::Accoun
|
||||
before_action :ensure_unread_counts_enabled
|
||||
|
||||
def index
|
||||
counts = if filtered_unread_counts_enabled?
|
||||
instrumentation.summarize_request(account_id: Current.account.id) { unread_counts }
|
||||
else
|
||||
unread_counts
|
||||
end
|
||||
counts = ::Conversations::UnreadCounts::Counter.new(account: Current.account, user: Current.user).perform
|
||||
render json: { payload: counts }
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def unread_counts
|
||||
::Conversations::UnreadCounts::Counter.new(account: Current.account, user: Current.user).perform
|
||||
end
|
||||
|
||||
def filtered_unread_counts_enabled?
|
||||
Current.account.feature_enabled?(::Conversations::UnreadCounts::FilteredCounter::FEATURE_FLAG)
|
||||
end
|
||||
|
||||
def instrumentation
|
||||
::Conversations::UnreadCounts::FilteredCountInstrumentation
|
||||
end
|
||||
|
||||
def ensure_unread_counts_enabled
|
||||
return if Current.account.feature_enabled?('conversation_unread_counts')
|
||||
|
||||
|
||||
@@ -164,7 +164,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
|
||||
# rubocop:enable Rails/SkipsModelValidations
|
||||
|
||||
::Conversations::UnreadCounts::Notifier.new(@conversation).perform
|
||||
::Conversations::UnreadCounts::FilteredCountInvalidator.new(Current.account).conversation_changed!
|
||||
end
|
||||
|
||||
def should_update_last_seen?
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
class Api::V1::Accounts::DashboardAppsController < Api::V1::Accounts::BaseController
|
||||
before_action :check_authorization
|
||||
before_action :fetch_dashboard_apps, except: [:create]
|
||||
before_action :fetch_dashboard_app, only: [:show, :update, :destroy]
|
||||
|
||||
|
||||
@@ -1,159 +0,0 @@
|
||||
require 'csv'
|
||||
|
||||
class Api::V1::Accounts::DataImportsController < Api::V1::Accounts::BaseController
|
||||
DATA_IMPORT_FEATURE = 'data_import'.freeze
|
||||
|
||||
before_action :ensure_data_import_feature_enabled
|
||||
before_action :set_data_import, only: [:show, :start, :abandon, :error_logs, :skip_logs]
|
||||
before_action :check_authorization
|
||||
|
||||
def index
|
||||
@data_imports = policy_scope(Current.account.data_imports).includes(:initiated_by).order(created_at: :desc)
|
||||
data_import_ids = @data_imports.map(&:id)
|
||||
@import_errors_counts = DataImportError.non_skip_logs.where(data_import_id: data_import_ids).group(:data_import_id).count
|
||||
@skip_logs_counts = DataImportError.skip_logs.where(data_import_id: data_import_ids).group(:data_import_id).count
|
||||
end
|
||||
|
||||
def show
|
||||
render_show
|
||||
end
|
||||
|
||||
def validate_source
|
||||
totals = validate_intercom_source
|
||||
render json: { valid: true, totals: totals }
|
||||
rescue DataImports::Intercom::Client::AuthenticationError
|
||||
render_source_validation_error('We could not validate this Intercom access key. Check the key and its permissions.')
|
||||
rescue DataImports::Intercom::Client::Error
|
||||
render_source_validation_error('Intercom could not be reached. Please try again.')
|
||||
rescue ArgumentError => e
|
||||
render_source_validation_error(e.message)
|
||||
end
|
||||
|
||||
def create
|
||||
@data_import = creation_service.perform
|
||||
unless @data_import
|
||||
render json: { message: 'Another data import is already in progress.' }, status: :unprocessable_entity
|
||||
return
|
||||
end
|
||||
|
||||
DataImports::Intercom::ImportJob.perform_later(@data_import, @data_import.active_intercom_import_run_id)
|
||||
render_show
|
||||
rescue DataImports::Intercom::Client::AuthenticationError
|
||||
render_source_validation_error('We could not validate this Intercom access key. Check the key and its permissions.')
|
||||
rescue DataImports::Intercom::Client::Error
|
||||
render_source_validation_error('Intercom could not be reached. Please try again.')
|
||||
rescue ArgumentError => e
|
||||
render_source_validation_error(e.message)
|
||||
end
|
||||
|
||||
def start
|
||||
restart_service = DataImports::Intercom::RestartService.new(account: Current.account, data_import: @data_import)
|
||||
restart_result = restart_service.perform
|
||||
@data_import = restart_service.data_import
|
||||
if restart_result == :access_token_missing
|
||||
render json: { message: 'The Intercom access key for this import is unavailable.' }, status: :unprocessable_entity
|
||||
return
|
||||
end
|
||||
|
||||
DataImports::Intercom::ImportJob.perform_later(@data_import, @data_import.active_intercom_import_run_id) if restart_result == :enqueue
|
||||
render_show
|
||||
end
|
||||
|
||||
def abandon
|
||||
@data_import.abandon!
|
||||
render_show
|
||||
end
|
||||
|
||||
def skip_logs
|
||||
send_data(
|
||||
skip_logs_csv,
|
||||
filename: "data-import-#{@data_import.id}-skip-logs.csv",
|
||||
type: 'text/csv'
|
||||
)
|
||||
end
|
||||
|
||||
def error_logs
|
||||
send_data(
|
||||
error_logs_csv,
|
||||
filename: "data-import-#{@data_import.id}-error-logs.csv",
|
||||
type: 'text/csv'
|
||||
)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def ensure_data_import_feature_enabled
|
||||
raise Pundit::NotAuthorizedError unless Current.account.feature_enabled?(DATA_IMPORT_FEATURE)
|
||||
end
|
||||
|
||||
def set_data_import
|
||||
@data_import = Current.account.data_imports.find(params[:id])
|
||||
end
|
||||
|
||||
def check_authorization
|
||||
authorize(@data_import || DataImport)
|
||||
end
|
||||
|
||||
def permitted_params
|
||||
params.permit(:name, :source_provider, :access_token, import_types: [])
|
||||
end
|
||||
|
||||
def creation_service
|
||||
DataImports::Intercom::CreationService.new(
|
||||
account: Current.account,
|
||||
initiated_by: Current.user,
|
||||
source_params: permitted_params.to_h
|
||||
)
|
||||
end
|
||||
|
||||
def import_types
|
||||
return DataImports::Intercom::Importer::DEFAULT_IMPORT_TYPES unless permitted_params.key?(:import_types)
|
||||
|
||||
Array(permitted_params[:import_types]).compact_blank
|
||||
end
|
||||
|
||||
def validate_intercom_source
|
||||
raise ArgumentError, 'Unsupported import source.' unless permitted_params[:source_provider] == 'intercom'
|
||||
|
||||
DataImports::Intercom::CredentialsValidator.new(
|
||||
access_token: permitted_params[:access_token],
|
||||
import_types: import_types
|
||||
).perform
|
||||
end
|
||||
|
||||
def render_source_validation_error(message)
|
||||
render json: { valid: false, message: message }, status: :unprocessable_entity
|
||||
end
|
||||
|
||||
def render_show
|
||||
@import_errors_finder = DataImportErrorFinder.new(@data_import)
|
||||
@skip_logs_finder = DataImportSkipLogFinder.new(@data_import, params)
|
||||
render :show
|
||||
end
|
||||
|
||||
def skip_logs_csv
|
||||
logs_csv(@data_import.import_errors.skip_logs)
|
||||
end
|
||||
|
||||
def error_logs_csv
|
||||
logs_csv(@data_import.import_errors.non_skip_logs)
|
||||
end
|
||||
|
||||
def logs_csv(logs)
|
||||
CSV.generate(headers: true) do |csv|
|
||||
csv << %w[created_at kind source_object_type source_object_id error_code message details]
|
||||
|
||||
logs.order(:created_at).find_each do |log|
|
||||
csv << [
|
||||
log.created_at.iso8601,
|
||||
log.details['kind'],
|
||||
log.source_object_type,
|
||||
log.source_object_id,
|
||||
log.error_code,
|
||||
log.message,
|
||||
log.details.to_json
|
||||
]
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -2,6 +2,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
|
||||
include Api::V1::InboxesHelper
|
||||
before_action :fetch_inbox, except: [:index, :create]
|
||||
before_action :fetch_agent_bot, only: [:set_agent_bot]
|
||||
before_action :validate_limit, only: [:create]
|
||||
# we are already handling the authorization in fetch inbox
|
||||
before_action :check_authorization, except: [:show]
|
||||
|
||||
@@ -45,20 +46,11 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
|
||||
end
|
||||
|
||||
def update
|
||||
continue_update = false
|
||||
|
||||
ActiveRecord::Base.transaction do
|
||||
continue_update = update_branded_email_layout
|
||||
raise ActiveRecord::Rollback unless continue_update
|
||||
|
||||
inbox_params = permitted_params.except(:channel, :csat_config)
|
||||
inbox_params[:csat_config] = format_csat_config(permitted_params[:csat_config]) if permitted_params[:csat_config].present?
|
||||
@inbox.update!(inbox_params)
|
||||
update_inbox_working_hours
|
||||
update_channel if channel_update_required?
|
||||
end
|
||||
|
||||
return unless continue_update
|
||||
inbox_params = permitted_params.except(:channel, :csat_config)
|
||||
inbox_params[:csat_config] = format_csat_config(permitted_params[:csat_config]) if permitted_params[:csat_config].present?
|
||||
@inbox.update!(inbox_params)
|
||||
update_inbox_working_hours
|
||||
update_channel if channel_update_required?
|
||||
end
|
||||
|
||||
def agent_bot
|
||||
@@ -133,8 +125,8 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
|
||||
end
|
||||
|
||||
def reauthorize_and_update_channel(channel_attributes)
|
||||
@inbox.channel.update!(permitted_params(channel_attributes)[:channel])
|
||||
@inbox.channel.reauthorized! if @inbox.channel.respond_to?(:reauthorized!)
|
||||
@inbox.channel.update!(permitted_params(channel_attributes)[:channel])
|
||||
end
|
||||
|
||||
def update_channel_feature_flags
|
||||
@@ -164,34 +156,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
|
||||
formatted['template'] = config['template'] if config['template'].present?
|
||||
end
|
||||
|
||||
def update_branded_email_layout
|
||||
return true unless params.key?(:branded_email_layout)
|
||||
|
||||
branded_email_layout = normalized_branded_email_layout
|
||||
|
||||
unless Current.account.feature_enabled?(:branded_email_templates)
|
||||
return true if branded_email_layout.blank?
|
||||
|
||||
render_could_not_create_error('Branded email templates feature is not enabled')
|
||||
return false
|
||||
end
|
||||
|
||||
unless @inbox.email?
|
||||
return true if branded_email_layout.blank?
|
||||
|
||||
render_could_not_create_error('Branded email layout is only supported for email inboxes')
|
||||
return false
|
||||
end
|
||||
|
||||
@inbox.update_branded_email_layout!(branded_email_layout)
|
||||
true
|
||||
rescue ActiveRecord::RecordInvalid => e
|
||||
render_could_not_create_error(e.record.errors.full_messages.join(', '))
|
||||
false
|
||||
end
|
||||
|
||||
def normalized_branded_email_layout = params[:branded_email_layout] == 'null' ? nil : params[:branded_email_layout]
|
||||
|
||||
def inbox_attributes
|
||||
[:name, :avatar, :greeting_enabled, :greeting_message, :enable_email_collect, :csat_survey_enabled,
|
||||
:enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved,
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
class Api::V1::Accounts::Integrations::BaseController < Api::V1::Accounts::BaseController
|
||||
private
|
||||
|
||||
# Managing an integration hook (create/update/destroy) is admin-only, enforced via HookPolicy.
|
||||
# Subclasses opt in per action with `before_action :check_authorization, only: [...]`.
|
||||
def check_authorization
|
||||
authorize(:hook)
|
||||
end
|
||||
end
|
||||
@@ -1,4 +1,4 @@
|
||||
class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::Integrations::BaseController
|
||||
class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::BaseController
|
||||
before_action :fetch_hook, except: [:create]
|
||||
before_action :check_authorization
|
||||
|
||||
@@ -35,6 +35,10 @@ class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::Inte
|
||||
@hook = Current.account.hooks.find(params[:id])
|
||||
end
|
||||
|
||||
def check_authorization
|
||||
authorize(:hook)
|
||||
end
|
||||
|
||||
def permitted_params
|
||||
params.require(:hook).permit(:app_id, :inbox_id, :status, settings: {})
|
||||
end
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Integrations::BaseController
|
||||
class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::BaseController
|
||||
before_action :fetch_conversation, only: [:create_issue, :link_issue, :unlink_issue, :linked_issues]
|
||||
before_action :fetch_hook, only: [:destroy]
|
||||
before_action :check_authorization, only: [:destroy]
|
||||
|
||||
def destroy
|
||||
revoke_linear_token
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
class Api::V1::Accounts::Integrations::NotionController < Api::V1::Accounts::Integrations::BaseController
|
||||
class Api::V1::Accounts::Integrations::NotionController < Api::V1::Accounts::BaseController
|
||||
before_action :fetch_hook, only: [:destroy]
|
||||
before_action :check_authorization, only: [:destroy]
|
||||
|
||||
def destroy
|
||||
@hook.destroy!
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
class Api::V1::Accounts::Integrations::ShopifyController < Api::V1::Accounts::Integrations::BaseController
|
||||
class Api::V1::Accounts::Integrations::ShopifyController < Api::V1::Accounts::BaseController
|
||||
include Shopify::IntegrationHelper
|
||||
before_action :setup_shopify_context, only: [:orders]
|
||||
before_action :fetch_hook, except: [:auth]
|
||||
before_action :check_authorization, only: [:destroy]
|
||||
before_action :validate_contact, only: [:orders]
|
||||
|
||||
def auth
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
class Api::V1::Accounts::LabelsController < Api::V1::Accounts::BaseController
|
||||
before_action :current_account
|
||||
before_action :fetch_label, except: [:index, :create]
|
||||
before_action :check_authorization
|
||||
|
||||
|
||||
@@ -6,10 +6,7 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
|
||||
{
|
||||
redirect_uri: "#{base_url}/microsoft/callback",
|
||||
scope: scope,
|
||||
state: state,
|
||||
# Force the Microsoft account picker so an already-signed-in account does not
|
||||
# silently authorize and re-bind to an existing inbox in the new-inbox flow.
|
||||
prompt: 'select_account'
|
||||
state: state
|
||||
}
|
||||
)
|
||||
if redirect_url
|
||||
|
||||
@@ -81,8 +81,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
|
||||
:name, :page_title, :slug, :archived,
|
||||
{ config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
|
||||
{ social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] },
|
||||
{ locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } },
|
||||
{ popular_content: popular_content_keys.index_with { { category_ids: [], article_ids: [] } } }] }
|
||||
{ locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
|
||||
)
|
||||
end
|
||||
|
||||
@@ -90,10 +89,6 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
|
||||
params.dig(:portal, :config, :locale_translations)&.keys || []
|
||||
end
|
||||
|
||||
def popular_content_keys
|
||||
params.dig(:portal, :config, :popular_content)&.keys || []
|
||||
end
|
||||
|
||||
def live_chat_widget_params
|
||||
permitted_params = params.permit(:inbox_id)
|
||||
return {} unless permitted_params.key?(:inbox_id)
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
|
||||
before_action :ensure_embedded_signup_enabled
|
||||
# Reconfiguring/reauthorizing a live inbox swaps its credentials, so restrict it to admins.
|
||||
before_action :check_admin_authorization?, if: -> { params[:inbox_id].present? }
|
||||
before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
|
||||
|
||||
# POST /api/v1/accounts/:account_id/whatsapp/authorization
|
||||
@@ -11,21 +8,12 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
|
||||
validate_embedded_signup_params!
|
||||
channel = process_embedded_signup
|
||||
render_success_response(channel.inbox)
|
||||
rescue CustomExceptions::Inbox::LimitExceeded => e
|
||||
render_error_response(e)
|
||||
rescue StandardError => e
|
||||
render_embedded_signup_error(e)
|
||||
render_error_response(e)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def ensure_embedded_signup_enabled
|
||||
return unless ChatwootApp.chatwoot_cloud?
|
||||
return if Current.account.feature_enabled?('whatsapp_embedded_signup_inbox_creation')
|
||||
|
||||
raise Pundit::NotAuthorizedError
|
||||
end
|
||||
|
||||
def process_embedded_signup
|
||||
service = Whatsapp::EmbeddedSignupService.new(
|
||||
account: Current.account,
|
||||
@@ -41,7 +29,7 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
|
||||
end
|
||||
|
||||
def validate_reauthorization_required
|
||||
return if @inbox.channel.reauthorization_required? || can_reconfigure_channel?
|
||||
return if @inbox.channel.reauthorization_required? || can_upgrade_to_embedded_signup?
|
||||
|
||||
render json: {
|
||||
success: false,
|
||||
@@ -49,11 +37,9 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
|
||||
}, status: :unprocessable_entity
|
||||
end
|
||||
|
||||
def can_reconfigure_channel?
|
||||
def can_upgrade_to_embedded_signup?
|
||||
channel = @inbox.channel
|
||||
return false unless channel.provider == 'whatsapp_cloud'
|
||||
return true if ChatwootApp.chatwoot_cloud?
|
||||
return Current.account.feature_enabled?('whatsapp_reconfigure') if channel.provider_config['source'] == 'embedded_signup'
|
||||
|
||||
true
|
||||
end
|
||||
@@ -69,7 +55,7 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
|
||||
render json: response
|
||||
end
|
||||
|
||||
def render_embedded_signup_error(error)
|
||||
def render_error_response(error)
|
||||
Rails.logger.error "[WHATSAPP AUTHORIZATION] Embedded signup error: #{error.message}"
|
||||
Rails.logger.error error.backtrace.join("\n")
|
||||
render json: {
|
||||
|
||||
@@ -8,7 +8,6 @@ class Api::V1::AccountsController < Api::BaseController
|
||||
before_action :ensure_account_name, only: [:create]
|
||||
before_action :validate_captcha, only: [:create]
|
||||
before_action :fetch_account, except: [:create]
|
||||
before_action :validate_token_api_access, if: :authenticate_by_access_token?, except: [:create]
|
||||
before_action :check_authorization, except: [:create]
|
||||
|
||||
rescue_from CustomExceptions::Account::InvalidEmail,
|
||||
@@ -106,12 +105,6 @@ class Api::V1::AccountsController < Api::BaseController
|
||||
@current_account_user = @account.account_users.find_by(user_id: current_user.id)
|
||||
end
|
||||
|
||||
def validate_token_api_access
|
||||
return if @account.api_and_webhooks_enabled?
|
||||
|
||||
render json: { error: 'API access is not enabled for this account' }, status: :forbidden
|
||||
end
|
||||
|
||||
def account_params
|
||||
params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :user_full_name)
|
||||
end
|
||||
|
||||
@@ -59,10 +59,6 @@ class Api::V1::Widget::BaseController < ApplicationController
|
||||
permitted_params.dig(:contact, :phone_number)
|
||||
end
|
||||
|
||||
def contact_custom_attributes
|
||||
permitted_params.dig(:contact, :custom_attributes)&.to_h
|
||||
end
|
||||
|
||||
def browser_params
|
||||
{
|
||||
browser_name: browser.name,
|
||||
|
||||
@@ -2,7 +2,6 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
|
||||
include WidgetHelper
|
||||
|
||||
before_action :validate_hmac, only: [:set_user]
|
||||
before_action :validate_hmac_for_identified_update, only: [:update]
|
||||
|
||||
def show; end
|
||||
|
||||
@@ -47,16 +46,6 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
|
||||
@contact.identifier.present? && @contact.identifier != permitted_params[:identifier]
|
||||
end
|
||||
|
||||
# The plain update endpoint is also used for anonymous prechat updates
|
||||
# (name/email/phone/custom_attributes with no identifier), which must keep
|
||||
# working on hmac_mandatory inboxes. Only the identity-binding path, where an
|
||||
# identifier is supplied and the contact can be rebound, requires HMAC.
|
||||
def validate_hmac_for_identified_update
|
||||
return if params[:identifier].blank?
|
||||
|
||||
validate_hmac
|
||||
end
|
||||
|
||||
def validate_hmac
|
||||
return unless should_verify_hmac?
|
||||
|
||||
@@ -73,15 +62,11 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
|
||||
end
|
||||
|
||||
def valid_hmac?
|
||||
expected_hash = OpenSSL::HMAC.hexdigest(
|
||||
params[:identifier_hash] == OpenSSL::HMAC.hexdigest(
|
||||
'sha256',
|
||||
@web_widget.hmac_token,
|
||||
params[:identifier].to_s
|
||||
)
|
||||
identifier_hash = params[:identifier_hash].to_s
|
||||
return false unless identifier_hash.bytesize == expected_hash.bytesize
|
||||
|
||||
ActiveSupport::SecurityUtils.secure_compare(identifier_hash, expected_hash)
|
||||
end
|
||||
|
||||
def permitted_params
|
||||
|
||||
@@ -19,7 +19,7 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
|
||||
def process_update_contact
|
||||
@contact = ContactIdentifyAction.new(
|
||||
contact: @contact,
|
||||
params: { email: contact_email, phone_number: contact_phone_number, name: contact_name, custom_attributes: contact_custom_attributes },
|
||||
params: { email: contact_email, phone_number: contact_phone_number, name: contact_name },
|
||||
retain_original_contact_name: true,
|
||||
discard_invalid_attrs: true
|
||||
).perform
|
||||
@@ -95,7 +95,7 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
|
||||
end
|
||||
|
||||
def permitted_params
|
||||
params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number, { custom_attributes: {} }],
|
||||
params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number],
|
||||
message: [:content, :referer_url, :timestamp, :echo_id],
|
||||
custom_attributes: {})
|
||||
end
|
||||
|
||||
@@ -51,13 +51,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
|
||||
generate_csv('conversation_traffic_reports', 'api/v2/accounts/reports/conversation_traffic')
|
||||
end
|
||||
|
||||
def drilldown
|
||||
return head :unauthorized unless Current.account_user.administrator?
|
||||
return head :unprocessable_entity unless valid_drilldown_params?
|
||||
|
||||
render json: V2::Reports::DrilldownBuilder.new(Current.account, drilldown_params).build
|
||||
end
|
||||
|
||||
def conversations
|
||||
return head :unprocessable_entity if params[:type].blank?
|
||||
|
||||
@@ -140,22 +133,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
|
||||
})
|
||||
end
|
||||
|
||||
def drilldown_params
|
||||
permitted_params = params.permit(
|
||||
:metric, :id, :since, :until, :group_by, :timezone_offset, :bucket_timestamp, :page, :per_page
|
||||
).to_h.symbolize_keys
|
||||
permitted_params.merge(
|
||||
type: (params[:type].presence || 'account').to_sym,
|
||||
business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
|
||||
)
|
||||
end
|
||||
|
||||
def valid_drilldown_params?
|
||||
%i[metric bucket_timestamp since until].all? { |param| params[param].present? } &&
|
||||
Reports::ReportMetricRegistry.supported?(params[:metric]) &&
|
||||
V2::Reports::DrilldownBuilder.supported_dimension_type?(params[:type]) && Reports::DrilldownTimestampValidator.valid?(params)
|
||||
end
|
||||
|
||||
def conversation_params
|
||||
{
|
||||
type: params[:type].to_sym,
|
||||
|
||||
@@ -14,8 +14,6 @@ module EnsureCurrentAccountHelper
|
||||
account_accessible_for_user?(account)
|
||||
elsif @resource.is_a?(AgentBot)
|
||||
account_accessible_for_bot?(account)
|
||||
else
|
||||
render_unauthorized(I18n.t('errors.account.not_authorized'))
|
||||
end
|
||||
account
|
||||
end
|
||||
@@ -23,7 +21,7 @@ module EnsureCurrentAccountHelper
|
||||
def account_accessible_for_user?(account)
|
||||
@current_account_user = account.account_users.find_by(user_id: current_user.id)
|
||||
Current.account_user = @current_account_user
|
||||
render_unauthorized(I18n.t('errors.account.not_authorized')) unless @current_account_user
|
||||
render_unauthorized('You are not authorized to access this account') unless @current_account_user
|
||||
end
|
||||
|
||||
def account_accessible_for_bot?(account)
|
||||
|
||||
@@ -4,53 +4,17 @@ module PortalHomeData
|
||||
private
|
||||
|
||||
def load_home_data
|
||||
load_recommended_content
|
||||
# The classic hero only needs the recommendations above; the rest is
|
||||
# documentation-layout home data (also used on custom-domain home pages).
|
||||
return unless @portal.layout == 'documentation'
|
||||
|
||||
base_articles = @portal.articles.published.where(locale: @locale).includes(:author, :category)
|
||||
@visible_categories = @portal.categories
|
||||
.where(locale: @locale)
|
||||
.joins(:articles).where(articles: { status: :published })
|
||||
.order(position: :asc)
|
||||
.group('categories.id')
|
||||
@popular_topics = @recommended_categories.presence || @visible_categories.first(3)
|
||||
@popular_topics = @visible_categories.first(3)
|
||||
@featured = base_articles.order_by_views.limit(6)
|
||||
@category_contributors = build_category_contributors(@visible_categories)
|
||||
end
|
||||
|
||||
def load_recommended_content
|
||||
@recommended_categories = recommended_categories
|
||||
@recommended_articles = recommended_articles
|
||||
end
|
||||
|
||||
def base_articles
|
||||
@base_articles ||= @portal.articles.published.where(locale: @locale).includes(:author, :category)
|
||||
end
|
||||
|
||||
# Admin-recommended categories for the locale, in the chosen order. Unlike the
|
||||
# position-based fallback, published articles aren't required: the admin's pick wins.
|
||||
def recommended_categories
|
||||
ids = @portal.popular_category_ids(@locale)
|
||||
ordered_by_ids(@portal.categories.where(locale: @locale, id: ids), ids)
|
||||
end
|
||||
|
||||
# Admin-recommended articles for the locale, in the chosen order, limited to
|
||||
# published articles that still exist.
|
||||
def recommended_articles
|
||||
ids = @portal.popular_article_ids(@locale)
|
||||
ordered_by_ids(base_articles.where(id: ids), ids)
|
||||
end
|
||||
|
||||
# Loads the scope and returns its records ordered to match `ids`, dropping any
|
||||
# that no longer exist. Skips the query entirely when `ids` is blank.
|
||||
def ordered_by_ids(scope, ids)
|
||||
return [] if ids.blank?
|
||||
|
||||
by_id = scope.index_by(&:id)
|
||||
ids.filter_map { |id| by_id[id] }
|
||||
end
|
||||
|
||||
def build_category_contributors(categories)
|
||||
category_ids = categories.map(&:id)
|
||||
return {} if category_ids.empty?
|
||||
|
||||
@@ -1,15 +1,8 @@
|
||||
module RequestExceptionHandler
|
||||
extend ActiveSupport::Concern
|
||||
|
||||
QUERY_CANCELED_ERROR_MESSAGE_PATTERNS = [
|
||||
'ActiveRecord::QueryCanceled',
|
||||
'PG::QueryCanceled',
|
||||
'canceling statement due to statement timeout'
|
||||
].freeze
|
||||
|
||||
included do
|
||||
rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid
|
||||
rescue_from CustomExceptions::Inbox::LimitExceeded, with: :render_error_response
|
||||
end
|
||||
|
||||
private
|
||||
@@ -25,9 +18,6 @@ module RequestExceptionHandler
|
||||
rescue ActionController::ParameterMissing => e
|
||||
log_handled_error(e)
|
||||
render_could_not_create_error(e.message)
|
||||
rescue ActiveRecord::QueryCanceled => e
|
||||
log_handled_error(e)
|
||||
render_could_not_create_error(database_query_canceled_message)
|
||||
ensure
|
||||
# to address the thread variable leak issues in Puma/Thin webserver
|
||||
Current.reset
|
||||
@@ -41,8 +31,8 @@ module RequestExceptionHandler
|
||||
render json: { error: message }, status: :not_found
|
||||
end
|
||||
|
||||
def render_could_not_create_error(error)
|
||||
render json: { error: sanitized_error_message(error) }, status: :unprocessable_entity
|
||||
def render_could_not_create_error(message)
|
||||
render json: { error: message }, status: :unprocessable_entity
|
||||
end
|
||||
|
||||
def render_payment_required(message)
|
||||
@@ -69,19 +59,4 @@ module RequestExceptionHandler
|
||||
def log_handled_error(exception)
|
||||
logger.info("Handled error: #{exception.inspect}")
|
||||
end
|
||||
|
||||
def sanitized_error_message(message)
|
||||
return database_query_canceled_message if database_query_canceled_message?(message)
|
||||
|
||||
message
|
||||
end
|
||||
|
||||
def database_query_canceled_message?(message)
|
||||
error_message = message.to_s
|
||||
QUERY_CANCELED_ERROR_MESSAGE_PATTERNS.any? { |pattern| error_message.include?(pattern) }
|
||||
end
|
||||
|
||||
def database_query_canceled_message
|
||||
I18n.t('errors.database.query_canceled')
|
||||
end
|
||||
end
|
||||
|
||||
@@ -64,8 +64,10 @@ class DashboardController < ActionController::Base
|
||||
return unless @portal
|
||||
|
||||
@locale = @portal.default_locale
|
||||
request.variant = :documentation if @portal.layout == 'documentation'
|
||||
load_home_data
|
||||
if @portal.layout == 'documentation'
|
||||
request.variant = :documentation
|
||||
load_home_data
|
||||
end
|
||||
render 'public/api/v1/portals/show', layout: 'portal', portal: @portal and return
|
||||
end
|
||||
|
||||
|
||||
@@ -11,8 +11,6 @@ class Instagram::CallbacksController < ApplicationController
|
||||
end
|
||||
|
||||
process_successful_authorization
|
||||
rescue CustomExceptions::Inbox::LimitExceeded => e
|
||||
handle_limit_error(e)
|
||||
rescue StandardError => e
|
||||
handle_error(e)
|
||||
end
|
||||
@@ -49,14 +47,6 @@ class Instagram::CallbacksController < ApplicationController
|
||||
redirect_to_error_page(error_info)
|
||||
end
|
||||
|
||||
def handle_limit_error(error)
|
||||
redirect_to_error_page(
|
||||
'error_type' => error.class.name,
|
||||
'code' => Rack::Utils.status_code(error.http_status),
|
||||
'error_message' => error.message
|
||||
)
|
||||
end
|
||||
|
||||
# Extract error details from the exception
|
||||
def extract_error_info(error)
|
||||
if error.is_a?(OAuth2::Error)
|
||||
|
||||
@@ -18,8 +18,7 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
|
||||
contact: @contact_inbox.contact,
|
||||
params: permitted_params.to_h.deep_symbolize_keys.except(:identifier)
|
||||
)
|
||||
contact_identify_action.perform
|
||||
@contact_inbox.reload
|
||||
render json: contact_identify_action.perform
|
||||
end
|
||||
|
||||
private
|
||||
@@ -36,15 +35,11 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
|
||||
end
|
||||
|
||||
def valid_hmac?
|
||||
expected_hash = OpenSSL::HMAC.hexdigest(
|
||||
params[:identifier_hash] == OpenSSL::HMAC.hexdigest(
|
||||
'sha256',
|
||||
@inbox_channel.hmac_token,
|
||||
params[:identifier].to_s
|
||||
)
|
||||
identifier_hash = params[:identifier_hash].to_s
|
||||
return false unless identifier_hash.bytesize == expected_hash.bytesize
|
||||
|
||||
ActiveSupport::SecurityUtils.secure_compare(identifier_hash, expected_hash)
|
||||
end
|
||||
|
||||
def permitted_params
|
||||
|
||||
@@ -24,11 +24,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
|
||||
end
|
||||
|
||||
def set_view_variant
|
||||
request.variant = if @is_plain_layout_enabled
|
||||
:plain
|
||||
elsif @portal_layout == 'documentation'
|
||||
:documentation
|
||||
end
|
||||
request.variant = :documentation if @portal_layout == 'documentation' && !@is_plain_layout_enabled
|
||||
end
|
||||
|
||||
def portal
|
||||
@@ -69,8 +65,6 @@ class Public::Api::V1::Portals::BaseController < PublicController
|
||||
|
||||
def render_404
|
||||
portal
|
||||
# set_locale can render_404 before the child's set_view_variant runs; set it here so plain 404s stay chrome-less
|
||||
set_view_variant
|
||||
render 'public/api/v1/portals/error/404', status: :not_found
|
||||
end
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
|
||||
before_action :set_portal_layout
|
||||
before_action :set_view_variant
|
||||
before_action :ensure_portal_feature_enabled
|
||||
before_action :load_home_data, only: [:show], unless: -> { @is_plain_layout_enabled }
|
||||
before_action :load_home_data, only: [:show], if: -> { @portal_layout == 'documentation' }
|
||||
layout 'portal'
|
||||
|
||||
def show
|
||||
|
||||
@@ -6,8 +6,6 @@ class Tiktok::CallbacksController < ApplicationController
|
||||
return handle_ungranted_scopes_error unless all_scopes_granted?
|
||||
|
||||
process_successful_authorization
|
||||
rescue CustomExceptions::Inbox::LimitExceeded => e
|
||||
handle_limit_error(e)
|
||||
rescue StandardError => e
|
||||
handle_error(e)
|
||||
end
|
||||
@@ -38,14 +36,6 @@ class Tiktok::CallbacksController < ApplicationController
|
||||
redirect_to_error_page(error_type: error.class.name, code: 500, error_message: error.message)
|
||||
end
|
||||
|
||||
def handle_limit_error(error)
|
||||
redirect_to_error_page(
|
||||
error_type: error.class.name,
|
||||
code: Rack::Utils.status_code(error.http_status),
|
||||
error_message: error.message
|
||||
)
|
||||
end
|
||||
|
||||
# Handles the case when a user denies permissions or cancels the authorization flow
|
||||
def handle_authorization_error
|
||||
redirect_to_error_page(
|
||||
|
||||
@@ -47,10 +47,18 @@ class Webhooks::WhatsappController < ActionController::API
|
||||
metadata = params.dig(:entry, 0, :changes, 0, :value, :metadata)
|
||||
return if metadata.blank?
|
||||
|
||||
Whatsapp::WebhookChannelFinderService.new(
|
||||
display_phone_number: metadata[:display_phone_number],
|
||||
phone_number_id: metadata[:phone_number_id]
|
||||
).perform
|
||||
phone_number = normalized_phone_number(metadata[:display_phone_number])
|
||||
phone_number_id = metadata[:phone_number_id]
|
||||
channel = Channel::Whatsapp.find_by(phone_number: phone_number)
|
||||
|
||||
return channel if channel && channel.provider_config['phone_number_id'] == phone_number_id
|
||||
end
|
||||
|
||||
def normalized_phone_number(phone_number)
|
||||
return if phone_number.blank?
|
||||
|
||||
phone_number = phone_number.to_s
|
||||
phone_number.start_with?('+') ? phone_number : "+#{phone_number}"
|
||||
end
|
||||
|
||||
def inactive_whatsapp_number?
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
class ConversationDrop < BaseDrop
|
||||
include MessageFormatHelper
|
||||
|
||||
def id
|
||||
@obj.try(:display_id)
|
||||
end
|
||||
|
||||
def display_id
|
||||
@obj.try(:display_id)
|
||||
end
|
||||
|
||||
@@ -2,18 +2,4 @@ class InboxDrop < BaseDrop
|
||||
def name
|
||||
@obj.try(:name)
|
||||
end
|
||||
|
||||
def business_name
|
||||
@obj.try(:sanitized_business_name)
|
||||
end
|
||||
|
||||
def avatar_url
|
||||
@obj.try(:avatar_url)
|
||||
end
|
||||
|
||||
def email
|
||||
return unless @obj.try(:email?)
|
||||
|
||||
@obj.try(:email_address).presence || @obj.try(:channel).try(:email)
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
class DataImportErrorFinder
|
||||
RESULTS_LIMIT = 5
|
||||
|
||||
def initialize(data_import)
|
||||
@data_import = data_import
|
||||
end
|
||||
|
||||
def import_errors
|
||||
@data_import.import_errors.non_skip_logs.order(created_at: :desc).limit(RESULTS_LIMIT)
|
||||
end
|
||||
end
|
||||
@@ -1,35 +0,0 @@
|
||||
class DataImportSkipLogFinder
|
||||
RESULTS_LIMIT = 5
|
||||
SOURCE_OBJECT_TYPES = %w[contact conversation message].freeze
|
||||
|
||||
attr_reader :selected_source_object_type
|
||||
|
||||
def initialize(data_import, params = {})
|
||||
@data_import = data_import
|
||||
@selected_source_object_type = valid_source_object_type(params[:skip_logs_type])
|
||||
end
|
||||
|
||||
def skip_logs
|
||||
filtered_scope.order(created_at: :desc).limit(RESULTS_LIMIT)
|
||||
end
|
||||
|
||||
def counts_by_type
|
||||
base_scope.group(:source_object_type).count
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def base_scope
|
||||
@base_scope ||= @data_import.import_errors.skip_logs
|
||||
end
|
||||
|
||||
def filtered_scope
|
||||
return base_scope if selected_source_object_type.blank?
|
||||
|
||||
base_scope.where(source_object_type: selected_source_object_type)
|
||||
end
|
||||
|
||||
def valid_source_object_type(source_object_type)
|
||||
source_object_type if SOURCE_OBJECT_TYPES.include?(source_object_type)
|
||||
end
|
||||
end
|
||||
@@ -114,4 +114,10 @@ module Api::V1::InboxesHelper
|
||||
'sms' => Current.account.sms_channels
|
||||
}[permitted_params[:channel][:type]]
|
||||
end
|
||||
|
||||
def validate_limit
|
||||
return unless Current.account.inboxes.count >= Current.account.usage_limits[:inboxes]
|
||||
|
||||
render_payment_required('Account limit exceeded. Upgrade to a higher plan')
|
||||
end
|
||||
end
|
||||
|
||||
@@ -22,16 +22,4 @@ module BillingHelper
|
||||
def agents(account)
|
||||
account.users.count
|
||||
end
|
||||
|
||||
# current_period_end moved to the subscription item in newer Stripe API versions; read both.
|
||||
def subscription_period_end(subscription)
|
||||
subscription['current_period_end'] || subscription['items']['data'].first&.[]('current_period_end')
|
||||
end
|
||||
|
||||
def subscription_ends_on(subscription)
|
||||
period_end = subscription_period_end(subscription)
|
||||
return if period_end.blank?
|
||||
|
||||
Time.zone.at(period_end)
|
||||
end
|
||||
end
|
||||
|
||||
@@ -68,8 +68,6 @@ module Filters::FilterHelper
|
||||
when 'text_case_insensitive'
|
||||
text_case_insensitive_filter(query_hash, filter_operator_value)
|
||||
else
|
||||
return text_cast_filter(query_hash, filter_operator_value) if text_search_on_display_id?(query_hash)
|
||||
|
||||
default_filter(query_hash, filter_operator_value)
|
||||
end
|
||||
end
|
||||
@@ -84,18 +82,10 @@ module Filters::FilterHelper
|
||||
"#{filter_operator_value} #{query_hash[:query_operator]}"
|
||||
end
|
||||
|
||||
def text_cast_filter(query_hash, filter_operator_value)
|
||||
"(#{filter_config[:table_name]}.#{query_hash[:attribute_key]})::text #{filter_operator_value} #{query_hash[:query_operator]}"
|
||||
end
|
||||
|
||||
def default_filter(query_hash, filter_operator_value)
|
||||
"#{filter_config[:table_name]}.#{query_hash[:attribute_key]} #{filter_operator_value} #{query_hash[:query_operator]}"
|
||||
end
|
||||
|
||||
def text_search_on_display_id?(query_hash)
|
||||
query_hash[:attribute_key] == 'display_id' && %w[contains does_not_contain].include?(query_hash[:filter_operator])
|
||||
end
|
||||
|
||||
def validate_single_condition(condition)
|
||||
return if condition['query_operator'].nil?
|
||||
return if condition['query_operator'].empty?
|
||||
|
||||
@@ -6,12 +6,9 @@ class AssignableAgents extends ApiClient {
|
||||
super('assignable_agents', { accountScoped: true });
|
||||
}
|
||||
|
||||
get(inboxIds, { includeAgentBots = false } = {}) {
|
||||
get(inboxIds) {
|
||||
return axios.get(this.url, {
|
||||
params: {
|
||||
inbox_ids: inboxIds,
|
||||
...(includeAgentBots ? { include_agent_bots: true } : {}),
|
||||
},
|
||||
params: { inbox_ids: inboxIds },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
/* global axios */
|
||||
import ApiClient from './ApiClient';
|
||||
|
||||
class CallsAPI extends ApiClient {
|
||||
constructor() {
|
||||
super('calls', { accountScoped: true });
|
||||
}
|
||||
|
||||
get(params = {}) {
|
||||
return axios.get(this.url, { params });
|
||||
}
|
||||
}
|
||||
|
||||
export default new CallsAPI();
|
||||
@@ -1,9 +0,0 @@
|
||||
import ApiClient from '../ApiClient';
|
||||
|
||||
class CaptainAgentSessions extends ApiClient {
|
||||
constructor() {
|
||||
super('captain/agent_sessions', { accountScoped: true });
|
||||
}
|
||||
}
|
||||
|
||||
export default new CaptainAgentSessions();
|
||||
@@ -1,10 +1,6 @@
|
||||
/* global axios */
|
||||
import ApiClient from '../ApiClient';
|
||||
|
||||
// Viewer's UTC offset in hours, matching the reports API convention so the
|
||||
// backend can anchor calendar ranges to the viewer's day.
|
||||
const getTimezoneOffset = () => -new Date().getTimezoneOffset() / 60;
|
||||
|
||||
class CaptainAssistant extends ApiClient {
|
||||
constructor() {
|
||||
super('captain/assistants', { accountScoped: true });
|
||||
@@ -25,42 +21,6 @@ class CaptainAssistant extends ApiClient {
|
||||
message_history: messageHistory,
|
||||
});
|
||||
}
|
||||
|
||||
getMetrics({ assistantId, range, signal }) {
|
||||
const requestConfig = {
|
||||
params: { range, timezone_offset: getTimezoneOffset() },
|
||||
};
|
||||
if (signal) requestConfig.signal = signal;
|
||||
|
||||
return axios.get(`${this.url}/${assistantId}/metrics`, requestConfig);
|
||||
}
|
||||
|
||||
getFaqStats({ assistantId, signal }) {
|
||||
const requestConfig = {};
|
||||
if (signal) requestConfig.signal = signal;
|
||||
|
||||
return axios.get(`${this.url}/${assistantId}/faq_stats`, requestConfig);
|
||||
}
|
||||
|
||||
getSummary({ assistantId, range, stats }) {
|
||||
return axios.get(`${this.url}/${assistantId}/summary`, {
|
||||
params: { range, timezone_offset: getTimezoneOffset(), stats },
|
||||
});
|
||||
}
|
||||
|
||||
getDrilldown({ assistantId, metric, range, page, signal }) {
|
||||
const requestConfig = {
|
||||
params: {
|
||||
metric,
|
||||
range,
|
||||
timezone_offset: getTimezoneOffset(),
|
||||
page,
|
||||
},
|
||||
};
|
||||
if (signal) requestConfig.signal = signal;
|
||||
|
||||
return axios.get(`${this.url}/${assistantId}/drilldown`, requestConfig);
|
||||
}
|
||||
}
|
||||
|
||||
export default new CaptainAssistant();
|
||||
|
||||
@@ -10,13 +10,10 @@ class WhatsappCallsAPI extends ApiClient {
|
||||
return axios.get(`${this.url}/${callId}`).then(r => r.data);
|
||||
}
|
||||
|
||||
// Either conversationId, or contactId + inboxId to let the BE resolve the conversation.
|
||||
initiate({ conversationId, contactId, inboxId }, sdpOffer) {
|
||||
initiate(conversationId, sdpOffer) {
|
||||
return axios
|
||||
.post(`${this.url}/initiate`, {
|
||||
conversation_id: conversationId,
|
||||
contact_id: contactId,
|
||||
inbox_id: inboxId,
|
||||
sdp_offer: sdpOffer,
|
||||
})
|
||||
.then(r => r.data);
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
/* global axios */
|
||||
|
||||
import ApiClient from './ApiClient';
|
||||
|
||||
class DataImportsAPI extends ApiClient {
|
||||
constructor() {
|
||||
super('data_imports', { accountScoped: true });
|
||||
}
|
||||
|
||||
start(id) {
|
||||
return axios.post(`${this.url}/${id}/start`);
|
||||
}
|
||||
|
||||
abandon(id) {
|
||||
return axios.post(`${this.url}/${id}/abandon`);
|
||||
}
|
||||
|
||||
show(id, params = {}) {
|
||||
return axios.get(`${this.url}/${id}`, { params });
|
||||
}
|
||||
|
||||
validateSource(payload) {
|
||||
return axios.post(`${this.url}/validate_source`, payload);
|
||||
}
|
||||
|
||||
downloadSkipLogs(id) {
|
||||
return axios.get(`${this.url}/${id}/skip_logs.csv`, {
|
||||
responseType: 'blob',
|
||||
});
|
||||
}
|
||||
|
||||
downloadErrorLogs(id) {
|
||||
return axios.get(`${this.url}/${id}/error_logs.csv`, {
|
||||
responseType: 'blob',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default new DataImportsAPI();
|
||||
@@ -14,10 +14,6 @@ class EnterpriseAccountAPI extends ApiClient {
|
||||
return axios.post(`${this.url}subscription`);
|
||||
}
|
||||
|
||||
selectBillingCurrency(currency) {
|
||||
return axios.post(`${this.url}select_billing_currency`, { currency });
|
||||
}
|
||||
|
||||
getLimits() {
|
||||
return axios.get(`${this.url}limits`);
|
||||
}
|
||||
@@ -31,11 +27,6 @@ class EnterpriseAccountAPI extends ApiClient {
|
||||
createTopupCheckout(credits) {
|
||||
return axios.post(`${this.url}topup_checkout`, { credits });
|
||||
}
|
||||
|
||||
// Topup packages for the account's billing currency.
|
||||
getTopupOptions() {
|
||||
return axios.get(`${this.url}topup_options`);
|
||||
}
|
||||
}
|
||||
|
||||
export default new EnterpriseAccountAPI();
|
||||
|
||||
@@ -17,7 +17,6 @@ class ArticlesAPI extends PortalsAPI {
|
||||
categorySlug,
|
||||
sort,
|
||||
query,
|
||||
signal,
|
||||
}) {
|
||||
const url = getArticleSearchURL({
|
||||
pageNumber,
|
||||
@@ -31,7 +30,7 @@ class ArticlesAPI extends PortalsAPI {
|
||||
host: this.url,
|
||||
});
|
||||
|
||||
return axios.get(url, { signal });
|
||||
return axios.get(url);
|
||||
}
|
||||
|
||||
searchArticles({ portalSlug, query }) {
|
||||
|
||||
@@ -62,10 +62,9 @@ class ConversationApi extends ApiClient {
|
||||
});
|
||||
}
|
||||
|
||||
assignAgent({ conversationId, agentId, assigneeType }) {
|
||||
assignAgent({ conversationId, agentId }) {
|
||||
return axios.post(`${this.url}/${conversationId}/assignments`, {
|
||||
assignee_id: agentId,
|
||||
assignee_type: assigneeType,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -31,42 +31,6 @@ class ReportsAPI extends ApiClient {
|
||||
});
|
||||
}
|
||||
|
||||
getDrilldown({
|
||||
metric,
|
||||
bucketTimestamp,
|
||||
from,
|
||||
to,
|
||||
type = 'account',
|
||||
id,
|
||||
groupBy,
|
||||
businessHours,
|
||||
page,
|
||||
perPage,
|
||||
signal,
|
||||
}) {
|
||||
const requestConfig = {
|
||||
params: {
|
||||
metric,
|
||||
bucket_timestamp: bucketTimestamp,
|
||||
since: from,
|
||||
until: to,
|
||||
type,
|
||||
id,
|
||||
group_by: groupBy,
|
||||
business_hours: businessHours,
|
||||
timezone_offset: getTimeOffset(),
|
||||
page,
|
||||
per_page: perPage,
|
||||
},
|
||||
};
|
||||
|
||||
if (signal) {
|
||||
requestConfig.signal = signal;
|
||||
}
|
||||
|
||||
return axios.get(`${this.url}/drilldown`, requestConfig);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line default-param-last
|
||||
getSummary(since, until, type = 'account', id, groupBy, businessHours) {
|
||||
return axios.get(`${this.url}/summary`, {
|
||||
|
||||
@@ -37,8 +37,7 @@ describe('#PortalAPI', () => {
|
||||
authorId: '1',
|
||||
});
|
||||
expect(axiosMock.get).toHaveBeenCalledWith(
|
||||
'/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1',
|
||||
{ signal: undefined }
|
||||
'/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -26,15 +26,5 @@ describe('#AssignableAgentsAPI', () => {
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('#getAssignableAgents with agent bots', () => {
|
||||
assignableAgentsAPI.get([1], { includeAgentBots: true });
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/assignable_agents', {
|
||||
params: {
|
||||
inbox_ids: [1],
|
||||
include_agent_bots: true,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -90,16 +90,11 @@ describe('#ConversationAPI', () => {
|
||||
});
|
||||
|
||||
it('#assignAgent', () => {
|
||||
conversationAPI.assignAgent({
|
||||
conversationId: 12,
|
||||
agentId: 34,
|
||||
assigneeType: 'AgentBot',
|
||||
});
|
||||
conversationAPI.assignAgent({ conversationId: 12, agentId: 34 });
|
||||
expect(axiosMock.post).toHaveBeenCalledWith(
|
||||
`/api/v1/conversations/12/assignments`,
|
||||
{
|
||||
assignee_id: 34,
|
||||
assignee_type: 'AgentBot',
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import reportsAPI from '../reports';
|
||||
import ApiClient from '../ApiClient';
|
||||
|
||||
const timezoneOffset = () => -new Date().getTimezoneOffset() / 60;
|
||||
|
||||
describe('#Reports API', () => {
|
||||
it('creates correct instance', () => {
|
||||
expect(reportsAPI).toBeInstanceOf(ApiClient);
|
||||
@@ -13,7 +11,6 @@ describe('#Reports API', () => {
|
||||
expect(reportsAPI).toHaveProperty('update');
|
||||
expect(reportsAPI).toHaveProperty('delete');
|
||||
expect(reportsAPI).toHaveProperty('getReports');
|
||||
expect(reportsAPI).toHaveProperty('getDrilldown');
|
||||
expect(reportsAPI).toHaveProperty('getSummary');
|
||||
expect(reportsAPI).toHaveProperty('getAgentReports');
|
||||
expect(reportsAPI).toHaveProperty('getLabelReports');
|
||||
@@ -45,14 +42,11 @@ describe('#Reports API', () => {
|
||||
});
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
|
||||
params: {
|
||||
business_hours: undefined,
|
||||
group_by: undefined,
|
||||
id: undefined,
|
||||
metric: 'conversations_count',
|
||||
since: 1621103400,
|
||||
until: 1621621800,
|
||||
type: 'account',
|
||||
timezone_offset: timezoneOffset(),
|
||||
timezone_offset: -0,
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -65,70 +59,13 @@ describe('#Reports API', () => {
|
||||
group_by: undefined,
|
||||
id: undefined,
|
||||
since: 1621103400,
|
||||
timezone_offset: timezoneOffset(),
|
||||
timezone_offset: -0,
|
||||
type: 'account',
|
||||
until: 1621621800,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('#getDrilldown', () => {
|
||||
reportsAPI.getDrilldown({
|
||||
metric: 'incoming_messages_count',
|
||||
bucketTimestamp: 1621103400,
|
||||
from: 1621103400,
|
||||
to: 1621621800,
|
||||
type: 'inbox',
|
||||
id: 1,
|
||||
groupBy: 'day',
|
||||
businessHours: false,
|
||||
page: 2,
|
||||
perPage: 25,
|
||||
});
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', {
|
||||
params: {
|
||||
metric: 'incoming_messages_count',
|
||||
bucket_timestamp: 1621103400,
|
||||
since: 1621103400,
|
||||
until: 1621621800,
|
||||
type: 'inbox',
|
||||
id: 1,
|
||||
group_by: 'day',
|
||||
business_hours: false,
|
||||
timezone_offset: timezoneOffset(),
|
||||
page: 2,
|
||||
per_page: 25,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('#getDrilldown with abort signal', () => {
|
||||
const controller = new AbortController();
|
||||
|
||||
reportsAPI.getDrilldown({
|
||||
metric: 'incoming_messages_count',
|
||||
bucketTimestamp: 1621103400,
|
||||
signal: controller.signal,
|
||||
});
|
||||
|
||||
expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', {
|
||||
params: {
|
||||
metric: 'incoming_messages_count',
|
||||
bucket_timestamp: 1621103400,
|
||||
since: undefined,
|
||||
until: undefined,
|
||||
type: 'account',
|
||||
id: undefined,
|
||||
group_by: undefined,
|
||||
business_hours: undefined,
|
||||
timezone_offset: timezoneOffset(),
|
||||
page: undefined,
|
||||
per_page: undefined,
|
||||
},
|
||||
signal: controller.signal,
|
||||
});
|
||||
});
|
||||
|
||||
it('#getAgentReports', () => {
|
||||
reportsAPI.getAgentReports({
|
||||
from: 1621103400,
|
||||
|
||||
+1
-6
@@ -28,12 +28,7 @@ const inboxes = computed(() => {
|
||||
return {
|
||||
name: inbox.name,
|
||||
id: inbox.id,
|
||||
icon: getInboxIconByType(
|
||||
inbox.channelType,
|
||||
inbox.medium,
|
||||
'line',
|
||||
inbox.voiceEnabled
|
||||
),
|
||||
icon: getInboxIconByType(inbox.channelType, inbox.medium, 'line'),
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,244 +0,0 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { relativeDayTimestamp } from 'shared/helpers/timeHelper';
|
||||
import { getInboxVoiceIcon } from 'dashboard/helper/inbox';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import AudioPlayer from 'dashboard/components-next/audio/AudioPlayer.vue';
|
||||
import {
|
||||
VOICE_CALL_DIRECTION,
|
||||
VOICE_CALL_STATUS,
|
||||
} from 'dashboard/components-next/message/constants';
|
||||
import CallStatusBadge from './CallStatusBadge.vue';
|
||||
import { CALL_KIND, getCallKind } from './constants';
|
||||
|
||||
const props = defineProps({
|
||||
call: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const kind = computed(() => getCallKind(props.call));
|
||||
|
||||
const contactName = computed(() =>
|
||||
(props.call.contact.name || props.call.contact.phoneNumber || '').replace(
|
||||
/^\+/,
|
||||
''
|
||||
)
|
||||
);
|
||||
|
||||
const agentActionLabel = computed(() => {
|
||||
if (!props.call.agent) return '';
|
||||
if (kind.value === CALL_KIND.OUTGOING) return t('CALLS_PAGE.ROW.DIALED_BY');
|
||||
if (kind.value === CALL_KIND.INCOMING) return t('CALLS_PAGE.ROW.PICKED_BY');
|
||||
// Ongoing collapses direction, so resolve dialed-vs-picked from the raw value.
|
||||
if (kind.value === CALL_KIND.ONGOING) {
|
||||
return props.call.direction === VOICE_CALL_DIRECTION.OUTBOUND
|
||||
? t('CALLS_PAGE.ROW.DIALED_BY')
|
||||
: t('CALLS_PAGE.ROW.PICKED_BY');
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
const resultLabel = computed(() => {
|
||||
if (kind.value === CALL_KIND.MISSED) return t('CALLS_PAGE.ROW.NO_AGENT');
|
||||
if (kind.value === CALL_KIND.NO_REPLY) {
|
||||
return t('CALLS_PAGE.ROW.NO_CONTACT_ANSWER');
|
||||
}
|
||||
if (kind.value === CALL_KIND.FAILED) return t('CALLS_PAGE.ROW.FAILED');
|
||||
if (kind.value === CALL_KIND.ONGOING) {
|
||||
return props.call.status === VOICE_CALL_STATUS.RINGING
|
||||
? t('CALLS_PAGE.ROW.RINGING')
|
||||
: t('CALLS_PAGE.ROW.IN_PROGRESS');
|
||||
}
|
||||
return t('CALLS_PAGE.ROW.ANSWERED');
|
||||
});
|
||||
|
||||
const providerIcon = computed(() =>
|
||||
getInboxVoiceIcon(props.call.inbox.channelType, props.call.inbox.medium)
|
||||
);
|
||||
|
||||
const createdAtLabel = computed(() =>
|
||||
relativeDayTimestamp(props.call.createdAt, t('CALLS_PAGE.ROW.YESTERDAY'))
|
||||
);
|
||||
|
||||
const conversationRoute = computed(() => ({
|
||||
name: 'inbox_conversation',
|
||||
params: {
|
||||
accountId: route.params.accountId,
|
||||
conversation_id: props.call.conversation.displayId,
|
||||
},
|
||||
query: { messageId: props.call.messageId },
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2 py-3.5 border-b border-n-weak lg:hidden">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<Avatar
|
||||
:src="call.contact.avatar"
|
||||
:name="contactName"
|
||||
:size="24"
|
||||
rounded-full
|
||||
/>
|
||||
<span
|
||||
v-tooltip.top="{ content: contactName, delay: { show: 500, hide: 0 } }"
|
||||
class="text-heading-3 font-medium truncate text-n-slate-12 min-w-0"
|
||||
>
|
||||
{{ contactName }}
|
||||
</span>
|
||||
<CallStatusBadge :kind="kind" class="ms-auto shrink-0" />
|
||||
<RouterLink
|
||||
:to="conversationRoute"
|
||||
class="inline-flex items-center h-6 gap-1 px-2 text-label-small outline outline-1 -outline-offset-1 rounded-md outline-n-weak text-n-slate-11 hover:bg-n-alpha-1 shrink-0"
|
||||
>
|
||||
<Icon icon="i-lucide-message-circle" class="size-3.5 text-n-slate-11" />
|
||||
{{ call.conversation.displayId }}
|
||||
<Icon icon="i-lucide-arrow-up-right" class="size-3.5 text-n-slate-11" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<template v-if="agentActionLabel">
|
||||
<span class="text-label-small text-n-slate-10 shrink-0">
|
||||
{{ agentActionLabel }}
|
||||
</span>
|
||||
<Avatar
|
||||
:src="call.agent.avatar"
|
||||
:name="call.agent.name"
|
||||
:size="20"
|
||||
rounded-full
|
||||
/>
|
||||
<span class="text-body-main truncate text-n-slate-12 min-w-0">
|
||||
{{ call.agent.name }}
|
||||
</span>
|
||||
</template>
|
||||
<span v-else class="text-body-main truncate text-n-slate-10 min-w-0">
|
||||
{{ resultLabel }}
|
||||
</span>
|
||||
<span class="w-px h-3 bg-n-strong shrink-0" />
|
||||
<Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
|
||||
<span class="text-body-main truncate text-n-slate-11 min-w-0">
|
||||
{{ call.inbox.name }}
|
||||
</span>
|
||||
<span
|
||||
v-if="!call.recordingUrl"
|
||||
class="ms-auto shrink-0 text-label-small text-n-slate-11 tabular-nums"
|
||||
>
|
||||
{{ createdAtLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="call.recordingUrl"
|
||||
class="flex items-center gap-2 min-w-0 justify-between"
|
||||
>
|
||||
<AudioPlayer
|
||||
:src="call.recordingUrl"
|
||||
:fallback-duration="call.durationSeconds || 0"
|
||||
class="flex-1 sm:flex-[0.7] min-w-0"
|
||||
/>
|
||||
<span class="shrink-0 text-label-small text-n-slate-11 tabular-nums">
|
||||
{{ createdAtLabel }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="hidden items-center gap-x-1.5 gap-y-2.5 border-b border-n-weak lg:flex lg:items-center lg:gap-1.5"
|
||||
>
|
||||
<div class="flex items-center gap-2.5 min-w-0 w-52 shrink-0 py-3.5">
|
||||
<Avatar
|
||||
:src="call.contact.avatar"
|
||||
:name="contactName"
|
||||
:size="24"
|
||||
rounded-full
|
||||
/>
|
||||
<span
|
||||
v-tooltip.top="{ content: contactName, delay: { show: 500, hide: 0 } }"
|
||||
class="text-heading-3 font-medium truncate text-n-slate-12"
|
||||
>
|
||||
{{ contactName }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-nowrap items-center gap-x-2 gap-y-2 min-w-0 grow shrink"
|
||||
>
|
||||
<div class="flex items-center gap-x-2 min-w-0 lg:contents py-3.5">
|
||||
<CallStatusBadge :kind="kind" class="shrink-0" />
|
||||
<div
|
||||
v-if="agentActionLabel"
|
||||
class="gap-x-1.5 min-w-0 flex items-center"
|
||||
>
|
||||
<span
|
||||
class="text-label-small text-n-slate-10 truncate shrink min-w-8 xl:min-w-14"
|
||||
>
|
||||
{{ agentActionLabel }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1.5 min-w-16 shrink-[20]">
|
||||
<Avatar
|
||||
:src="call.agent.avatar"
|
||||
:name="call.agent.name"
|
||||
:size="20"
|
||||
rounded-full
|
||||
/>
|
||||
<span
|
||||
v-tooltip.top="{
|
||||
content: call.agent.name,
|
||||
delay: { show: 500, hide: 0 },
|
||||
}"
|
||||
class="text-body-main truncate text-n-slate-12 min-w-0"
|
||||
>
|
||||
{{ call.agent.name }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
v-else-if="resultLabel"
|
||||
class="text-body-main truncate text-n-slate-10 min-w-0 shrink-[20]"
|
||||
>
|
||||
{{ resultLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<AudioPlayer
|
||||
v-if="call.recordingUrl"
|
||||
:src="call.recordingUrl"
|
||||
:fallback-duration="call.durationSeconds || 0"
|
||||
class="w-auto min-w-44 shrink mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-tooltip.top="{
|
||||
content: call.inbox.name,
|
||||
delay: { show: 500, hide: 0 },
|
||||
}"
|
||||
class="flex items-center gap-1 justify-end w-40 min-w-4 shrink-[100] py-3.5"
|
||||
>
|
||||
<Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
|
||||
<span class="text-body-main truncate text-n-slate-11 min-w-0">
|
||||
{{ call.inbox.name }}
|
||||
</span>
|
||||
</div>
|
||||
<RouterLink
|
||||
:to="conversationRoute"
|
||||
class="inline-flex items-center h-6 gap-1 px-2 text-label-small py-3.5 outline outline-1 -outline-offset-1 rounded-md outline-n-weak text-n-slate-11 hover:bg-n-alpha-1 shrink-0 justify-self-start"
|
||||
>
|
||||
<Icon icon="i-lucide-message-circle" class="size-3.5 text-n-slate-11" />
|
||||
{{ call.conversation.displayId }}
|
||||
<Icon icon="i-lucide-arrow-up-right" class="size-3.5 text-n-slate-11" />
|
||||
</RouterLink>
|
||||
<span
|
||||
v-tooltip.top="{
|
||||
content: createdAtLabel,
|
||||
delay: { show: 500, hide: 0 },
|
||||
}"
|
||||
class="text-label-small text-end text-n-slate-11 truncate py-3.5 tabular-nums justify-self-end min-w-16 max-w-20 shrink-0"
|
||||
>
|
||||
{{ createdAtLabel }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,158 +0,0 @@
|
||||
<script setup>
|
||||
import { computed, getCurrentInstance, ref, useTemplateRef } from 'vue';
|
||||
import { downloadFile } from '@chatwoot/utils';
|
||||
import { useEmitter } from 'dashboard/composables/emitter';
|
||||
import { emitter } from 'shared/helpers/mitt';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
fallbackDuration: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const PLAYBACK_SPEEDS = [1, 1.5, 2];
|
||||
|
||||
const audioPlayer = useTemplateRef('audioPlayer');
|
||||
const { uid } = getCurrentInstance();
|
||||
|
||||
const isPlaying = ref(false);
|
||||
const currentTime = ref(0);
|
||||
const duration = ref(props.fallbackDuration);
|
||||
const playbackSpeed = ref(1);
|
||||
|
||||
const onLoadedMetadata = () => {
|
||||
const loadedDuration = audioPlayer.value?.duration;
|
||||
if (Number.isFinite(loadedDuration)) duration.value = loadedDuration;
|
||||
};
|
||||
|
||||
const formatTime = time => {
|
||||
if (!time || Number.isNaN(time)) return '00:00';
|
||||
const minutes = Math.floor(time / 60);
|
||||
const seconds = Math.floor(time % 60);
|
||||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const playbackSpeedLabel = computed(() => `${playbackSpeed.value}x`);
|
||||
|
||||
const displayedTime = computed(() =>
|
||||
formatTime(
|
||||
isPlaying.value || currentTime.value ? currentTime.value : duration.value
|
||||
)
|
||||
);
|
||||
|
||||
// Only one recording should play at a time across the list.
|
||||
useEmitter('pause_playing_audio', currentPlayingId => {
|
||||
if (currentPlayingId !== uid && isPlaying.value) {
|
||||
audioPlayer.value?.pause();
|
||||
isPlaying.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const playOrPause = () => {
|
||||
if (isPlaying.value) {
|
||||
audioPlayer.value.pause();
|
||||
isPlaying.value = false;
|
||||
} else {
|
||||
emitter.emit('pause_playing_audio', uid);
|
||||
audioPlayer.value.play();
|
||||
isPlaying.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const onTimeUpdate = () => {
|
||||
currentTime.value = audioPlayer.value?.currentTime;
|
||||
};
|
||||
|
||||
const seek = event => {
|
||||
const time = Number(event.target.value);
|
||||
audioPlayer.value.currentTime = time;
|
||||
currentTime.value = time;
|
||||
};
|
||||
|
||||
const onEnd = () => {
|
||||
isPlaying.value = false;
|
||||
currentTime.value = 0;
|
||||
};
|
||||
|
||||
const changePlaybackSpeed = () => {
|
||||
const currentIndex = PLAYBACK_SPEEDS.indexOf(playbackSpeed.value);
|
||||
playbackSpeed.value =
|
||||
PLAYBACK_SPEEDS[(currentIndex + 1) % PLAYBACK_SPEEDS.length];
|
||||
audioPlayer.value.playbackRate = playbackSpeed.value;
|
||||
};
|
||||
|
||||
const downloadRecording = () => {
|
||||
downloadFile({ url: props.src, type: 'audio' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-center h-9 gap-2 px-2 rounded-full bg-n-alpha-1 dark:bg-n-alpha-2 overflow-hidden"
|
||||
@click.stop
|
||||
>
|
||||
<audio
|
||||
ref="audioPlayer"
|
||||
class="hidden"
|
||||
playsinline
|
||||
@loadedmetadata="onLoadedMetadata"
|
||||
@timeupdate="onTimeUpdate"
|
||||
@ended="onEnd"
|
||||
>
|
||||
<source :src="src" />
|
||||
</audio>
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="!w-6 !p-0 text-n-slate-12"
|
||||
@click="playOrPause"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon
|
||||
:icon="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
|
||||
class="size-4 flex-shrink-0"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
:max="duration || 0"
|
||||
:value="currentTime"
|
||||
class="flex-1 min-w-0 lg:grow-0 lg:basis-24 h-1 rounded-lg appearance-none cursor-pointer bg-n-slate-12/30 accent-n-slate-11"
|
||||
@input="seek"
|
||||
/>
|
||||
<span class="text-sm tabular-nums text-n-slate-11 shrink-0">
|
||||
{{ displayedTime }}
|
||||
</span>
|
||||
<div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
:label="playbackSpeedLabel"
|
||||
class="!px-1 min-w-6 !text-n-slate-11"
|
||||
@click="changePlaybackSpeed"
|
||||
/>
|
||||
<div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
|
||||
<Button
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="!w-6 !p-0 text-n-slate-11"
|
||||
@click="downloadRecording"
|
||||
>
|
||||
<template #icon>
|
||||
<Icon icon="i-lucide-download" class="size-4 flex-shrink-0" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,56 +0,0 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import { CALL_KIND } from './constants';
|
||||
|
||||
const props = defineProps({
|
||||
kind: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const KIND_CONFIG = {
|
||||
[CALL_KIND.ONGOING]: {
|
||||
icon: 'i-lucide-phone-call',
|
||||
class: 'bg-n-teal-3 text-n-teal-11',
|
||||
},
|
||||
[CALL_KIND.INCOMING]: {
|
||||
icon: 'i-lucide-phone-incoming',
|
||||
class: 'bg-n-slate-3 text-n-slate-11',
|
||||
},
|
||||
[CALL_KIND.OUTGOING]: {
|
||||
icon: 'i-lucide-phone-outgoing',
|
||||
class: 'bg-n-slate-3 text-n-slate-11',
|
||||
},
|
||||
[CALL_KIND.MISSED]: {
|
||||
icon: 'i-lucide-phone-missed',
|
||||
class: 'bg-n-ruby-3 text-n-ruby-11',
|
||||
},
|
||||
[CALL_KIND.NO_REPLY]: {
|
||||
icon: 'i-lucide-phone-outgoing',
|
||||
class: 'bg-n-amber-3 text-n-amber-11',
|
||||
},
|
||||
[CALL_KIND.FAILED]: {
|
||||
icon: 'i-lucide-phone-off',
|
||||
class: 'bg-n-ruby-3 text-n-ruby-11',
|
||||
},
|
||||
};
|
||||
|
||||
const config = computed(() => KIND_CONFIG[props.kind]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="inline-flex items-center justify-center w-20 gap-1.5 h-6 px-1 rounded-md text-label-small shrink-0"
|
||||
:class="config.class"
|
||||
>
|
||||
<Icon :icon="config.icon" class="size-3 flex-shrink-0" />
|
||||
<span class="truncate">{{
|
||||
t(`CALLS_PAGE.STATUS.${kind.toUpperCase()}`)
|
||||
}}</span>
|
||||
</span>
|
||||
</template>
|
||||
@@ -1,34 +0,0 @@
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const setupVoiceChannel = () => {
|
||||
router.push({
|
||||
name: 'settings_inbox_new',
|
||||
params: { accountId: route.params.accountId },
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EmptyStateLayout
|
||||
:title="t('CALLS_PAGE.SETUP.TITLE')"
|
||||
:subtitle="t('CALLS_PAGE.SETUP.SUBTITLE')"
|
||||
:show-backdrop="false"
|
||||
:action-perms="['administrator']"
|
||||
>
|
||||
<template #actions>
|
||||
<Button
|
||||
:label="t('CALLS_PAGE.SETUP.ACTION')"
|
||||
icon="i-lucide-plus"
|
||||
@click="setupVoiceChannel"
|
||||
/>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -1,270 +0,0 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { OnClickOutside } from '@vueuse/components';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
|
||||
const props = defineProps({
|
||||
// Null while a fetch is in flight so stale counts are never shown.
|
||||
totalCount: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
agents: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
inboxes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// Self-scoped viewers only ever see their own calls, so the assignee filter
|
||||
// is meaningless for them — only admins get it.
|
||||
showAssignee: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const activity = defineModel('activity', { type: String, default: null });
|
||||
const assigneeId = defineModel('assigneeId', { type: Number, default: null });
|
||||
const inboxId = defineModel('inboxId', { type: Number, default: null });
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const ACTIVITY_ICONS = {
|
||||
missed: 'i-lucide-phone-missed',
|
||||
no_reply: 'i-lucide-phone-outgoing',
|
||||
incoming: 'i-lucide-phone-incoming',
|
||||
outgoing: 'i-lucide-phone-outgoing',
|
||||
in_progress: 'i-lucide-phone-call',
|
||||
};
|
||||
|
||||
const BASE_ACTIVITIES = ['missed', 'no_reply'];
|
||||
const OTHER_ACTIVITIES = ['incoming', 'outgoing', 'in_progress'];
|
||||
|
||||
// A single open-menu identifier keeps the three dropdowns mutually exclusive:
|
||||
// opening one closes the others without any cross-wiring.
|
||||
const openMenu = ref(null); // 'activity' | 'assignee' | 'more' | null
|
||||
|
||||
const toggleMenu = name => {
|
||||
openMenu.value = openMenu.value === name ? null : name;
|
||||
};
|
||||
|
||||
// Each dropdown wrapper closes itself on outside clicks. The guard keeps the
|
||||
// other two wrappers (which the click is also outside of) from closing a
|
||||
// menu the user is interacting with.
|
||||
const closeOnOutside = name => {
|
||||
if (openMenu.value === name) openMenu.value = null;
|
||||
};
|
||||
|
||||
const activityLabel = value => t(`CALLS_PAGE.FILTERS.${value.toUpperCase()}`);
|
||||
|
||||
const activeChipLabel = computed(() => {
|
||||
const label = activityLabel(activity.value);
|
||||
return props.totalCount === null ? label : `${label} (${props.totalCount})`;
|
||||
});
|
||||
|
||||
const inactiveChips = computed(() =>
|
||||
BASE_ACTIVITIES.filter(value => value !== activity.value)
|
||||
);
|
||||
|
||||
const otherActivityItems = computed(() =>
|
||||
OTHER_ACTIVITIES.map(value => ({
|
||||
label: activityLabel(value),
|
||||
value,
|
||||
action: 'filter',
|
||||
icon: ACTIVITY_ICONS[value],
|
||||
isSelected: activity.value === value,
|
||||
}))
|
||||
);
|
||||
|
||||
const assigneeItems = computed(() => [
|
||||
{
|
||||
label: t('CALLS_PAGE.FILTERS.ALL_ASSIGNEES'),
|
||||
value: null,
|
||||
action: 'filter',
|
||||
isSelected: !assigneeId.value,
|
||||
},
|
||||
...props.agents.map(agent => ({
|
||||
label: agent.name,
|
||||
value: agent.id,
|
||||
action: 'filter',
|
||||
thumbnail: { name: agent.name, src: agent.thumbnail },
|
||||
isSelected: assigneeId.value === agent.id,
|
||||
})),
|
||||
]);
|
||||
|
||||
const moreFiltersSections = computed(() => [
|
||||
{
|
||||
title: t('CALLS_PAGE.FILTERS.INBOX'),
|
||||
items: [
|
||||
{
|
||||
label: t('CALLS_PAGE.FILTERS.ALL_INBOXES'),
|
||||
value: null,
|
||||
action: 'inbox',
|
||||
isSelected: !inboxId.value,
|
||||
},
|
||||
...props.inboxes.map(inbox => ({
|
||||
label: inbox.name,
|
||||
value: inbox.id,
|
||||
action: 'inbox',
|
||||
isSelected: inboxId.value === inbox.id,
|
||||
})),
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const selectedAssignee = computed(
|
||||
() => props.agents.find(agent => agent.id === assigneeId.value) || null
|
||||
);
|
||||
|
||||
const selectedAssigneeLabel = computed(
|
||||
() => selectedAssignee.value?.name || t('CALLS_PAGE.FILTERS.ASSIGNEE')
|
||||
);
|
||||
|
||||
const isOtherActivitySelected = computed(() =>
|
||||
OTHER_ACTIVITIES.includes(activity.value)
|
||||
);
|
||||
|
||||
const hasMoreFilters = computed(() => Boolean(inboxId.value));
|
||||
|
||||
const setActivity = value => {
|
||||
openMenu.value = null;
|
||||
activity.value = value;
|
||||
};
|
||||
|
||||
const setAssignee = ({ value }) => {
|
||||
openMenu.value = null;
|
||||
assigneeId.value = value;
|
||||
};
|
||||
|
||||
const applyMoreFilter = ({ action, value }) => {
|
||||
openMenu.value = null;
|
||||
if (action === 'inbox') inboxId.value = value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span v-if="!activity" class="text-heading-3 text-n-slate-11 shrink-0">
|
||||
{{
|
||||
totalCount === null
|
||||
? t('CALLS_PAGE.ALL_CALLS')
|
||||
: t('CALLS_PAGE.ALL_CALLS_COUNT', { count: totalCount })
|
||||
}}
|
||||
</span>
|
||||
<Button
|
||||
v-else
|
||||
variant="outline"
|
||||
color="blue"
|
||||
size="sm"
|
||||
:icon="ACTIVITY_ICONS[activity]"
|
||||
class="shrink-0 !h-7 !px-2"
|
||||
@click="setActivity(null)"
|
||||
>
|
||||
{{ activeChipLabel }}
|
||||
<Icon icon="i-lucide-x" />
|
||||
</Button>
|
||||
<div class="w-px h-3.5 mx-1 bg-n-strong shrink-0" />
|
||||
<Button
|
||||
v-for="chip in inactiveChips"
|
||||
:key="chip"
|
||||
variant="outline"
|
||||
color="slate"
|
||||
size="sm"
|
||||
:icon="ACTIVITY_ICONS[chip]"
|
||||
:label="activityLabel(chip)"
|
||||
class="shrink-0 text-n-slate-11 !h-7 !px-2"
|
||||
@click="setActivity(chip)"
|
||||
/>
|
||||
<OnClickOutside
|
||||
class="relative shrink-0"
|
||||
@trigger="closeOnOutside('activity')"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="slate"
|
||||
size="sm"
|
||||
icon="i-lucide-phone"
|
||||
class="!h-7 !px-2"
|
||||
:class="
|
||||
isOtherActivitySelected ? 'text-n-slate-12' : 'text-n-slate-11'
|
||||
"
|
||||
@click="toggleMenu('activity')"
|
||||
>
|
||||
{{ t('CALLS_PAGE.FILTERS.OTHER_ACTIVITY') }}
|
||||
<Icon icon="i-lucide-chevron-down" class="text-n-slate-11" />
|
||||
</Button>
|
||||
<DropdownMenu
|
||||
v-if="openMenu === 'activity'"
|
||||
:menu-items="otherActivityItems"
|
||||
class="mt-1 start-0 top-full w-44"
|
||||
@action="setActivity($event.value)"
|
||||
/>
|
||||
</OnClickOutside>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<OnClickOutside
|
||||
v-if="showAssignee"
|
||||
class="relative"
|
||||
@trigger="closeOnOutside('assignee')"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
color="slate"
|
||||
size="sm"
|
||||
icon="i-woot-empty-assignee"
|
||||
class="max-w-52 !h-7 !px-2"
|
||||
:class="assigneeId ? 'text-n-slate-12' : 'text-n-slate-11'"
|
||||
@click="toggleMenu('assignee')"
|
||||
>
|
||||
<template v-if="selectedAssignee" #icon>
|
||||
<Avatar
|
||||
:src="selectedAssignee.thumbnail"
|
||||
:name="selectedAssignee.name"
|
||||
:size="16"
|
||||
rounded-full
|
||||
/>
|
||||
</template>
|
||||
<span class="truncate">{{ selectedAssigneeLabel }}</span>
|
||||
<Icon icon="i-lucide-chevron-down" class="text-n-slate-11 shrink-0" />
|
||||
</Button>
|
||||
<DropdownMenu
|
||||
v-if="openMenu === 'assignee'"
|
||||
:menu-items="assigneeItems"
|
||||
show-search
|
||||
class="mt-1 end-0 top-full w-56 max-h-72"
|
||||
@action="setAssignee"
|
||||
/>
|
||||
</OnClickOutside>
|
||||
<OnClickOutside class="relative" @trigger="closeOnOutside('more')">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-lucide-list-filter"
|
||||
class="!h-7 !px-2"
|
||||
:color="hasMoreFilters ? 'blue' : 'slate'"
|
||||
:class="hasMoreFilters ? '' : 'text-n-slate-11'"
|
||||
@click="toggleMenu('more')"
|
||||
>
|
||||
{{ t('CALLS_PAGE.FILTERS.MORE_FILTERS') }}
|
||||
<Icon
|
||||
icon="i-lucide-chevron-down"
|
||||
:class="hasMoreFilters ? '' : 'text-n-slate-11'"
|
||||
/>
|
||||
</Button>
|
||||
<DropdownMenu
|
||||
v-if="openMenu === 'more'"
|
||||
:menu-sections="moreFiltersSections"
|
||||
class="mt-1 end-0 top-full w-56 max-h-80"
|
||||
@action="applyMoreFilter"
|
||||
/>
|
||||
</OnClickOutside>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,51 +0,0 @@
|
||||
import {
|
||||
VOICE_CALL_STATUS,
|
||||
VOICE_CALL_DIRECTION,
|
||||
} from 'dashboard/components-next/message/constants';
|
||||
|
||||
export const CALL_KIND = {
|
||||
ONGOING: 'ongoing',
|
||||
INCOMING: 'incoming',
|
||||
OUTGOING: 'outgoing',
|
||||
MISSED: 'missed',
|
||||
NO_REPLY: 'no_reply',
|
||||
FAILED: 'failed',
|
||||
};
|
||||
|
||||
// The API returns display values: status (ringing/in-progress/completed/
|
||||
// no-answer/failed) and direction (inbound/outbound). The list UI presents
|
||||
// them as a single "kind" per row.
|
||||
export const getCallKind = call => {
|
||||
if (
|
||||
[VOICE_CALL_STATUS.RINGING, VOICE_CALL_STATUS.IN_PROGRESS].includes(
|
||||
call.status
|
||||
)
|
||||
) {
|
||||
return CALL_KIND.ONGOING;
|
||||
}
|
||||
if (
|
||||
[VOICE_CALL_STATUS.FAILED, VOICE_CALL_STATUS.REJECTED].includes(call.status)
|
||||
) {
|
||||
return CALL_KIND.FAILED;
|
||||
}
|
||||
const isInbound = call.direction === VOICE_CALL_DIRECTION.INBOUND;
|
||||
if (call.status === VOICE_CALL_STATUS.NO_ANSWER) {
|
||||
return isInbound ? CALL_KIND.MISSED : CALL_KIND.NO_REPLY;
|
||||
}
|
||||
return isInbound ? CALL_KIND.INCOMING : CALL_KIND.OUTGOING;
|
||||
};
|
||||
|
||||
// Filter chips map to the status/direction params supported by CallFinder.
|
||||
export const CALL_ACTIVITY_PARAMS = {
|
||||
missed: {
|
||||
status: VOICE_CALL_STATUS.NO_ANSWER,
|
||||
direction: VOICE_CALL_DIRECTION.INBOUND,
|
||||
},
|
||||
no_reply: {
|
||||
status: VOICE_CALL_STATUS.NO_ANSWER,
|
||||
direction: VOICE_CALL_DIRECTION.OUTBOUND,
|
||||
},
|
||||
incoming: { direction: VOICE_CALL_DIRECTION.INBOUND },
|
||||
outgoing: { direction: VOICE_CALL_DIRECTION.OUTBOUND },
|
||||
in_progress: { status: VOICE_CALL_STATUS.IN_PROGRESS },
|
||||
};
|
||||
@@ -83,12 +83,8 @@ const campaignStatus = computed(() => {
|
||||
const inboxName = computed(() => props.inbox?.name || '');
|
||||
|
||||
const inboxIcon = computed(() => {
|
||||
const {
|
||||
medium,
|
||||
channel_type: type,
|
||||
voice_enabled: voiceEnabled,
|
||||
} = props.inbox;
|
||||
return getInboxIconByType(type, medium, 'fill', voiceEnabled);
|
||||
const { medium, channel_type: type } = props.inbox;
|
||||
return getInboxIconByType(type, medium);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@ import { useAlert } from 'dashboard/composables';
|
||||
import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
|
||||
import { useCallsStore } from 'dashboard/stores/calls';
|
||||
import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
|
||||
import ContactAPI from 'dashboard/api/contacts';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
@@ -82,18 +83,39 @@ const navigateToConversation = conversationId => {
|
||||
|
||||
const whatsappCallSession = useWhatsappCallSession();
|
||||
|
||||
// Find the most recent open conversation for this contact in the picked inbox.
|
||||
// WhatsApp /initiate is conversation-scoped (unlike Twilio's contact-scoped path).
|
||||
// Pass inboxId so the BE applies the filter before the 20-row cap — without it,
|
||||
// contacts whose latest WhatsApp conversation falls outside the 20 most recent
|
||||
// across all inboxes would be treated as having no conversation.
|
||||
const findWhatsappConversationId = async inboxId => {
|
||||
const { data } = await ContactAPI.getConversations(props.contactId, {
|
||||
inboxId,
|
||||
});
|
||||
const conversations = data?.payload || [];
|
||||
const match = [...conversations].sort(
|
||||
(a, b) => (b.last_activity_at || 0) - (a.last_activity_at || 0)
|
||||
)[0];
|
||||
return match?.id || null;
|
||||
};
|
||||
|
||||
const startWhatsappCall = async (inboxId, conversationIdHint) => {
|
||||
const response = await whatsappCallSession.initiateOutboundCall(
|
||||
conversationIdHint
|
||||
? { conversationId: conversationIdHint }
|
||||
: { contactId: props.contactId, inboxId }
|
||||
);
|
||||
// WhatsApp /initiate is conversation-scoped, so we must hand it a
|
||||
// conversation. Use the caller's hint when given (in-conversation flow);
|
||||
// otherwise pick the most recent one in the inbox.
|
||||
const conversationId =
|
||||
conversationIdHint || (await findWhatsappConversationId(inboxId));
|
||||
if (!conversationId) {
|
||||
useAlert(t('CONTACT_PANEL.CALL_FAILED'));
|
||||
return;
|
||||
}
|
||||
|
||||
const response =
|
||||
await whatsappCallSession.initiateOutboundCall(conversationId);
|
||||
// The composable returns { status: 'locked' } when an init is already in
|
||||
// flight or a call is already active; treat that as a soft no-op rather than
|
||||
// claiming success.
|
||||
if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
|
||||
|
||||
const conversationId = response?.conversation_id || conversationIdHint;
|
||||
if (!response?.id) {
|
||||
// Permission template path returns no call id. Mirror the header button and
|
||||
// surface whether the request was just sent or is already pending instead of
|
||||
|
||||
+1
-7
@@ -16,10 +16,6 @@ const props = defineProps({
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
contact: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
@@ -53,9 +49,7 @@ const unreadMessagesCount = computed(() => {
|
||||
|
||||
const hasSlaThreshold = computed(() => {
|
||||
return (
|
||||
!props.contact?.blocked &&
|
||||
slaCardLabelRef.value?.hasSlaThreshold &&
|
||||
props.conversation?.appliedSla?.id
|
||||
slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
+2
-3
@@ -48,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
|
||||
const inboxName = computed(() => inbox.value?.name);
|
||||
|
||||
const inboxIcon = computed(() => {
|
||||
const { channelType, medium, voiceEnabled } = inbox.value;
|
||||
return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
|
||||
const { channelType, medium } = inbox.value;
|
||||
return getInboxIconByType(channelType, medium);
|
||||
});
|
||||
|
||||
const lastActivityAt = computed(() => {
|
||||
@@ -126,7 +126,6 @@ const onCardClick = e => {
|
||||
v-show="!showMessagePreviewWithoutMeta"
|
||||
ref="cardMessagePreviewWithMetaRef"
|
||||
:conversation="conversation"
|
||||
:contact="contact"
|
||||
:account-labels="accountLabels"
|
||||
/>
|
||||
</div>
|
||||
|
||||
+1
-3
@@ -51,9 +51,7 @@ const unreadCount = computed(() => props.chat.unread_count);
|
||||
const slaCardLabel = useTemplateRef('slaCardLabel');
|
||||
|
||||
const hasSlaPolicyId = computed(
|
||||
() =>
|
||||
!props.currentContact?.blocked &&
|
||||
(props.chat?.applied_sla?.id || slaCardLabel.value?.hasSlaThreshold)
|
||||
() => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
|
||||
);
|
||||
|
||||
const selectedModel = computed({
|
||||
|
||||
+11
-4
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
|
||||
import { evaluateSLAStatus } from '@chatwoot/utils';
|
||||
|
||||
const props = defineProps({
|
||||
conversation: {
|
||||
@@ -19,8 +19,16 @@ const slaStatus = ref({
|
||||
icon: null,
|
||||
});
|
||||
|
||||
// TODO: Remove this once we update the helper from utils
|
||||
// https://github.com/chatwoot/utils/blob/main/src/sla.ts#L73
|
||||
const convertObjectCamelCaseToSnakeCase = object => {
|
||||
return Object.keys(object).reduce((acc, key) => {
|
||||
acc[key.replace(/([A-Z])/g, '_$1').toLowerCase()] = object[key];
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
|
||||
const appliedSLA = computed(() => props.conversation?.appliedSla);
|
||||
const slaEvents = computed(() => props.conversation?.slaEvents);
|
||||
const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
|
||||
|
||||
const hasSlaThreshold = computed(() => {
|
||||
@@ -33,9 +41,8 @@ const slaStatusText = computed(() => {
|
||||
|
||||
const updateSlaStatus = () => {
|
||||
slaStatus.value = evaluateSLAStatus({
|
||||
appliedSla: appliedSLA.value || {},
|
||||
appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value || {}),
|
||||
chat: props.conversation,
|
||||
slaEvents: slaEvents.value || [],
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
|
||||
import { evaluateSLAStatus } from '@chatwoot/utils';
|
||||
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import Label from 'dashboard/components-next/label/Label.vue';
|
||||
@@ -27,7 +27,6 @@ defineOptions({
|
||||
});
|
||||
|
||||
const appliedSLA = computed(() => props.chat?.applied_sla);
|
||||
const slaEvents = computed(() => props.chat?.sla_events);
|
||||
const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
|
||||
const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
|
||||
|
||||
@@ -35,7 +34,6 @@ const updateSlaStatus = () => {
|
||||
slaStatus.value = evaluateSLAStatus({
|
||||
appliedSla: appliedSLA.value || {},
|
||||
chat: props.chat,
|
||||
slaEvents: slaEvents.value || [],
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
-378
@@ -1,378 +0,0 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch, nextTick, onBeforeUnmount } from 'vue';
|
||||
import { useEventListener, onKeyStroke, useRafFn } from '@vueuse/core';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
// Reorderable list with cross-page drag. It must stay mounted during a page
|
||||
// fetch — hide the list spinner while `dragging`, or the held item is lost.
|
||||
const props = defineProps({
|
||||
items: { type: Array, required: true },
|
||||
itemKey: { type: String, default: 'id' },
|
||||
disabled: { type: Boolean, default: false },
|
||||
currentPage: { type: Number, default: 1 },
|
||||
totalPages: { type: Number, default: 1 },
|
||||
});
|
||||
const emit = defineEmits(['reorder', 'navigatePage', 'dragging']);
|
||||
|
||||
const DRAG_THRESHOLD = 5;
|
||||
const EDGE_BAND = 72; // px from a side that arms a page turn
|
||||
const AUTO_PAGE_DELAY = 600; // ms hovering an edge before it flips
|
||||
const SCROLL_BAND = 60; // px from top/bottom that autoscrolls the list
|
||||
const SCROLL_STEP = 10; // px scrolled per frame while parked at an edge
|
||||
const PILL = 36; // px, the page-turn arrow button on each edge
|
||||
|
||||
const root = ref(null);
|
||||
const isDragging = ref(false);
|
||||
const dragged = ref(null);
|
||||
const pointer = ref({ x: 0, y: 0 });
|
||||
const insertBefore = ref(null); // key the gap sits before, null = end of list
|
||||
const activeEdge = ref(null);
|
||||
const bounds = ref({ left: 0, right: 0, top: 0, bottom: 0 }); // visible list rect
|
||||
const grab = ref({ dx: 0, dy: 0 }); // cursor offset inside the grabbed card
|
||||
const dragHeight = ref(0);
|
||||
|
||||
let press = null; // pending press, before it becomes a drag
|
||||
let dwell = null; // timer that flips the page after hovering an edge
|
||||
let paging = false; // waiting for a flipped page to load
|
||||
let scroller = null; // scrollable ancestor, found when a drag begins
|
||||
let scrollDir = 0; // -1 up, +1 down, 0 idle
|
||||
let sourcePage = 1; // page the drag started on, to resolve cross-page end-drops
|
||||
|
||||
const keyOf = item => String(item?.[props.itemKey]);
|
||||
const others = item => props.items.filter(o => keyOf(o) !== keyOf(item));
|
||||
const isRTL = () =>
|
||||
document.querySelector('#app[dir]')?.getAttribute('dir') === 'rtl';
|
||||
const canPage = dir =>
|
||||
dir === 'next' ? props.currentPage < props.totalPages : props.currentPage > 1;
|
||||
|
||||
// Key of the item after `key` in `list`, or null when it is the last one.
|
||||
const keyAfter = (list, key) => {
|
||||
const next = list[list.findIndex(o => keyOf(o) === key) + 1];
|
||||
return next ? keyOf(next) : null;
|
||||
};
|
||||
|
||||
const edges = computed(() =>
|
||||
['prev', 'next'].filter(canPage).map(dir => {
|
||||
const onLeft = isRTL() ? dir === 'next' : dir === 'prev';
|
||||
return {
|
||||
dir,
|
||||
onLeft,
|
||||
icon: onLeft ? 'i-lucide-chevrons-left' : 'i-lucide-chevrons-right',
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
// Cursor overlay: an edge glow band, a page-turn arrow per edge, and a ghost of
|
||||
// the dragged row that follows the cursor and shrinks when aimed at an edge.
|
||||
const EDGE_BAND_W = 80; // px width of the glow band on each pageable edge
|
||||
const bandStyle = onLeft => {
|
||||
const x = onLeft ? bounds.value.left : bounds.value.right - EDGE_BAND_W;
|
||||
return {
|
||||
width: `${EDGE_BAND_W}px`,
|
||||
height: `${bounds.value.bottom - bounds.value.top}px`,
|
||||
transform: `translate(${x}px, ${bounds.value.top}px)`,
|
||||
};
|
||||
};
|
||||
const pillStyle = onLeft => {
|
||||
const x = onLeft ? bounds.value.left + 12 : bounds.value.right - PILL - 12;
|
||||
return { transform: `translate(${x}px, ${pointer.value.y - PILL / 2}px)` };
|
||||
};
|
||||
const ghostStyle = computed(() => ({
|
||||
width: `${bounds.value.right - bounds.value.left}px`,
|
||||
transform: `translate(${pointer.value.x - grab.value.dx}px, ${pointer.value.y - grab.value.dy}px)`,
|
||||
}));
|
||||
const scaleStyle = computed(() => ({
|
||||
transformOrigin: `${grab.value.dx}px ${grab.value.dy}px`,
|
||||
}));
|
||||
|
||||
// The list as shown mid-drag: the dragged row slotted into the gap at `insertBefore`.
|
||||
const displayItems = computed(() => {
|
||||
if (!isDragging.value || !dragged.value) return props.items;
|
||||
const rest = others(dragged.value);
|
||||
const at = rest.findIndex(o => keyOf(o) === insertBefore.value);
|
||||
rest.splice(at === -1 ? rest.length : at, 0, dragged.value);
|
||||
return rest;
|
||||
});
|
||||
|
||||
// Move the gap when the cursor crosses the midpoint of the card it is over.
|
||||
const aim = () => {
|
||||
const card = document
|
||||
.elementFromPoint(pointer.value.x, pointer.value.y)
|
||||
?.closest('[data-drag-id]');
|
||||
const key = card?.dataset.dragId;
|
||||
if (!key || key === keyOf(dragged.value)) return;
|
||||
|
||||
const { top, height } = card.getBoundingClientRect();
|
||||
const above = pointer.value.y < top + height / 2;
|
||||
insertBefore.value = above ? key : keyAfter(others(dragged.value), key);
|
||||
};
|
||||
|
||||
const flip = dir => {
|
||||
if (paging || !isDragging.value) return;
|
||||
paging = true;
|
||||
emit('navigatePage', props.currentPage + (dir === 'next' ? 1 : -1));
|
||||
};
|
||||
|
||||
const aimEdge = x => {
|
||||
const rect = root.value?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
// Clip the list rect to the scroll viewport so the glow band and its top/bottom
|
||||
// fade always sit on the visible edges, not the far ends of the full content.
|
||||
const view = scroller?.getBoundingClientRect();
|
||||
const viewTop = Math.max(view?.top ?? 0, 0);
|
||||
const viewBottom = Math.min(
|
||||
view?.bottom ?? window.innerHeight,
|
||||
window.innerHeight
|
||||
);
|
||||
bounds.value = {
|
||||
left: rect.left,
|
||||
right: rect.right,
|
||||
top: Math.max(rect.top, viewTop),
|
||||
bottom: Math.min(rect.bottom, viewBottom),
|
||||
};
|
||||
|
||||
let dir = null;
|
||||
if (x <= rect.left + EDGE_BAND) dir = isRTL() ? 'next' : 'prev';
|
||||
else if (x >= rect.right - EDGE_BAND) dir = isRTL() ? 'prev' : 'next';
|
||||
if (dir && !canPage(dir)) dir = null;
|
||||
if (dir === activeEdge.value) return;
|
||||
|
||||
activeEdge.value = dir;
|
||||
clearTimeout(dwell);
|
||||
if (dir) dwell = setTimeout(() => flip(dir), AUTO_PAGE_DELAY);
|
||||
};
|
||||
|
||||
// Nearest scrollable ancestor, so a drag can reach rows that are off-screen.
|
||||
const scrollParent = () => {
|
||||
let el = root.value?.parentElement;
|
||||
while (el) {
|
||||
const { overflowY } = getComputedStyle(el);
|
||||
if (overflowY === 'auto' || overflowY === 'scroll') return el;
|
||||
el = el.parentElement;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// While parked at the top/bottom edge, keep scrolling and re-aim as rows slide by.
|
||||
const { pause: pauseScroll, resume: resumeScroll } = useRafFn(
|
||||
() => {
|
||||
if (!scroller || !scrollDir) return;
|
||||
scroller.scrollTop += scrollDir * SCROLL_STEP;
|
||||
aim();
|
||||
aimEdge(pointer.value.x);
|
||||
},
|
||||
{ immediate: false }
|
||||
);
|
||||
|
||||
const updateAutoScroll = y => {
|
||||
if (!scroller) return;
|
||||
const rect = scroller.getBoundingClientRect();
|
||||
const atTop = scroller.scrollTop <= 0;
|
||||
const atBottom =
|
||||
scroller.scrollTop >= scroller.scrollHeight - scroller.clientHeight;
|
||||
if (y < rect.top + SCROLL_BAND && !atTop) scrollDir = -1;
|
||||
else if (y > rect.bottom - SCROLL_BAND && !atBottom) scrollDir = 1;
|
||||
else scrollDir = 0;
|
||||
if (scrollDir) resumeScroll();
|
||||
else pauseScroll();
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
isDragging.value = false;
|
||||
dragged.value = null;
|
||||
insertBefore.value = null;
|
||||
activeEdge.value = null;
|
||||
clearTimeout(dwell);
|
||||
paging = false;
|
||||
scrollDir = 0;
|
||||
scroller = null;
|
||||
pauseScroll();
|
||||
document.body.classList.remove('select-none');
|
||||
emit('dragging', false);
|
||||
};
|
||||
|
||||
// Positions sit on a gap-of-10 grid; a midpoint (±5 at the ends) slots between two rows.
|
||||
// Cross-page end-drops are the tricky case: moving an item off its source page pulls the
|
||||
// target page's boundary row into the vacated slot. So at the leading edge after moving
|
||||
// DOWN (or the trailing edge after moving UP) we land between the two boundary rows, or
|
||||
// the item sorts onto the adjacent page and vanishes from view.
|
||||
const drop = (item, rawBefore) => {
|
||||
const pos = o => o?.position || 0;
|
||||
const mid = (a, b) => Math.floor((pos(a) + pos(b)) / 2);
|
||||
const rest = others(item);
|
||||
// No other rows to position against — e.g. the lone article on a page dropped
|
||||
// without crossing to another page. Leave the order untouched.
|
||||
if (!rest.length) return;
|
||||
// A page flip can leave the aimed key pointing at a row that is no longer on
|
||||
// this page. Like displayItems, resolve an unknown key to null (end of list),
|
||||
// so what the user sees and what we save agree.
|
||||
const before = rest.some(o => keyOf(o) === rawBefore) ? rawBefore : null;
|
||||
const movedDown = props.currentPage > sourcePage;
|
||||
const movedUp = props.currentPage < sourcePage;
|
||||
|
||||
let position;
|
||||
if (before === null) {
|
||||
position =
|
||||
movedUp && rest.length >= 2
|
||||
? mid(rest.at(-2), rest.at(-1))
|
||||
: pos(rest.at(-1)) + 5;
|
||||
} else {
|
||||
const i = rest.findIndex(o => keyOf(o) === before);
|
||||
if (i > 0) {
|
||||
position = mid(rest[i - 1], rest[i]);
|
||||
} else if (movedDown) {
|
||||
// Top-of-page after moving down: the old first row slid up into the source
|
||||
// page's gap, so land just after it to stay this page's first.
|
||||
position = rest.length >= 2 ? mid(rest[0], rest[1]) : pos(rest[0]) + 5;
|
||||
} else {
|
||||
position = pos(rest[0]) - 5;
|
||||
}
|
||||
}
|
||||
emit('reorder', { [item[props.itemKey]]: position });
|
||||
};
|
||||
|
||||
const startDrag = () => {
|
||||
isDragging.value = true;
|
||||
dragged.value = press.item;
|
||||
grab.value = { dx: press.dx, dy: press.dy };
|
||||
dragHeight.value = press.h;
|
||||
insertBefore.value = keyAfter(props.items, keyOf(press.item));
|
||||
sourcePage = props.currentPage;
|
||||
scroller = scrollParent();
|
||||
document.body.classList.add('select-none');
|
||||
emit('dragging', true);
|
||||
};
|
||||
|
||||
const onPointerDown = (item, e) => {
|
||||
if (e.button !== 0 || props.disabled) return;
|
||||
if (e.target.closest('button, a, input, [role="button"]')) return;
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
press = {
|
||||
item,
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
dx: e.clientX - rect.left,
|
||||
dy: e.clientY - rect.top,
|
||||
h: rect.height,
|
||||
};
|
||||
};
|
||||
|
||||
useEventListener(window, 'pointermove', e => {
|
||||
if (!press) return;
|
||||
if (!isDragging.value) {
|
||||
const moved = Math.hypot(e.clientX - press.x, e.clientY - press.y);
|
||||
if (moved < DRAG_THRESHOLD) return;
|
||||
startDrag();
|
||||
}
|
||||
e.preventDefault();
|
||||
pointer.value = { x: e.clientX, y: e.clientY };
|
||||
aim();
|
||||
aimEdge(e.clientX);
|
||||
updateAutoScroll(e.clientY);
|
||||
});
|
||||
|
||||
useEventListener(window, 'pointerup', () => {
|
||||
if (!press) return;
|
||||
press = null;
|
||||
if (!isDragging.value) return; // a press without movement is a click
|
||||
const item = dragged.value;
|
||||
const before = insertBefore.value;
|
||||
const flipping = paging;
|
||||
reset();
|
||||
if (!flipping) drop(item, before);
|
||||
});
|
||||
|
||||
// When the flipped page loads, re-aim under the held cursor so a parked edge keeps flipping.
|
||||
watch(
|
||||
() => props.items,
|
||||
() => {
|
||||
if (!isDragging.value || !paging) return;
|
||||
paging = false;
|
||||
nextTick(() => {
|
||||
if (!isDragging.value) return;
|
||||
aim();
|
||||
activeEdge.value = null;
|
||||
aimEdge(pointer.value.x);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
onKeyStroke('Escape', () => {
|
||||
if (!isDragging.value) return;
|
||||
press = null;
|
||||
reset();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
clearTimeout(dwell);
|
||||
document.body.classList.remove('select-none');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="root" class="relative w-full h-full">
|
||||
<ul class="w-full h-full space-y-4">
|
||||
<li
|
||||
v-for="(item, index) in displayItems"
|
||||
:key="keyOf(item)"
|
||||
:data-drag-id="keyOf(item)"
|
||||
class="relative list-none"
|
||||
:class="{ 'cursor-grab': !disabled && !isDragging }"
|
||||
@pointerdown="onPointerDown(item, $event)"
|
||||
@dragstart.prevent
|
||||
>
|
||||
<div
|
||||
v-if="isDragging && keyOf(item) === keyOf(dragged)"
|
||||
:style="{ height: `${dragHeight}px` }"
|
||||
class="border-2 border-dashed rounded-2xl border-n-brand/50 bg-n-brand/5"
|
||||
/>
|
||||
<slot v-else name="item" :item="item" :index="index" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Teleport v-if="isDragging" to="body">
|
||||
<div
|
||||
v-for="edge in edges"
|
||||
:key="`band-${edge.dir}`"
|
||||
:style="bandStyle(edge.onLeft)"
|
||||
class="fixed top-0 left-0 z-40 pointer-events-none from-n-brand/15 to-transparent transition-opacity duration-200 [mask-image:linear-gradient(to_bottom,transparent,#000_56px,#000_calc(100%_-_56px),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,#000_56px,#000_calc(100%_-_56px),transparent)]"
|
||||
:class="[
|
||||
edge.onLeft ? 'bg-gradient-to-r' : 'bg-gradient-to-l',
|
||||
activeEdge === edge.dir ? 'opacity-100' : 'opacity-0',
|
||||
]"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-for="edge in edges"
|
||||
:key="edge.dir"
|
||||
:style="pillStyle(edge.onLeft)"
|
||||
class="fixed top-0 left-0 z-50 flex items-center justify-center transition-all duration-150 border rounded-full pointer-events-none size-9 backdrop-blur-sm"
|
||||
:class="
|
||||
activeEdge === edge.dir
|
||||
? 'scale-110 border-n-brand bg-n-brand/20 text-n-brand shadow-md'
|
||||
: 'opacity-70 border-n-weak/60 bg-n-solid-1/70 text-n-slate-10'
|
||||
"
|
||||
>
|
||||
<Icon
|
||||
:icon="edge.icon"
|
||||
class="size-4"
|
||||
:class="activeEdge === edge.dir && 'animate-pulse'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="dragged"
|
||||
:style="ghostStyle"
|
||||
class="fixed top-0 left-0 z-50 pointer-events-none select-none"
|
||||
>
|
||||
<div
|
||||
:style="scaleStyle"
|
||||
class="transition-transform duration-150 shadow-2xl rounded-2xl"
|
||||
:class="{ 'scale-50': activeEdge }"
|
||||
>
|
||||
<slot name="ghost" :item="dragged" />
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
-222
@@ -1,222 +0,0 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { h, nextTick } from 'vue';
|
||||
import DraggableReorderList from '../DraggableReorderList.vue';
|
||||
|
||||
// The component is pointer-driven, so we drive it through real pointer events on
|
||||
// window while mocking the layout APIs jsdom does not implement: elementFromPoint
|
||||
// (which card is under the cursor) and getBoundingClientRect (its geometry).
|
||||
const elementAtPoint = { current: null };
|
||||
|
||||
const move = (clientX, clientY) =>
|
||||
window.dispatchEvent(new MouseEvent('pointermove', { clientX, clientY }));
|
||||
const release = () => window.dispatchEvent(new MouseEvent('pointerup'));
|
||||
|
||||
// Stack the rows 50px apart, each 40px tall, inside a 500px-wide list.
|
||||
const stubGeometry = wrapper => {
|
||||
wrapper.element.getBoundingClientRect = () => ({
|
||||
left: 0,
|
||||
right: 500,
|
||||
top: 0,
|
||||
bottom: 600,
|
||||
});
|
||||
wrapper.findAll('[data-drag-id]').forEach((li, index) => {
|
||||
const top = index * 50;
|
||||
li.element.getBoundingClientRect = () => ({
|
||||
top,
|
||||
height: 40,
|
||||
bottom: top + 40,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const mountList = (props = {}) =>
|
||||
mount(DraggableReorderList, {
|
||||
props: { items: [], ...props },
|
||||
slots: {
|
||||
item: scope => h('div', { class: 'card' }, scope.item.title),
|
||||
ghost: scope => h('div', { class: 'ghost' }, scope.item.title),
|
||||
},
|
||||
global: { stubs: { Icon: true, teleport: true } },
|
||||
});
|
||||
|
||||
describe('DraggableReorderList', () => {
|
||||
let wrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
elementAtPoint.current = null;
|
||||
document.elementFromPoint = vi.fn(() => elementAtPoint.current);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
wrapper?.unmount();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
const startDragging = async id => {
|
||||
stubGeometry(wrapper);
|
||||
wrapper.find(`[data-drag-id="${id}"]`).element.dispatchEvent(
|
||||
new MouseEvent('pointerdown', {
|
||||
button: 0,
|
||||
clientX: 250,
|
||||
clientY: 20,
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
await nextTick();
|
||||
};
|
||||
|
||||
it('renders each item through the item slot', () => {
|
||||
wrapper = mountList({
|
||||
items: [
|
||||
{ id: 1, title: 'Alpha' },
|
||||
{ id: 2, title: 'Beta' },
|
||||
],
|
||||
});
|
||||
|
||||
const cards = wrapper.findAll('.card');
|
||||
expect(cards).toHaveLength(2);
|
||||
expect(cards[0].text()).toBe('Alpha');
|
||||
expect(wrapper.find('[data-drag-id="1"]').exists()).toBe(true);
|
||||
expect(wrapper.find('[data-drag-id="2"]').exists()).toBe(true);
|
||||
});
|
||||
|
||||
it('shows a grab affordance only when enabled', () => {
|
||||
wrapper = mountList({ items: [{ id: 1, title: 'Alpha' }] });
|
||||
expect(wrapper.find('[data-drag-id="1"]').classes()).toContain(
|
||||
'cursor-grab'
|
||||
);
|
||||
|
||||
wrapper.unmount();
|
||||
wrapper = mountList({ items: [{ id: 1, title: 'Alpha' }], disabled: true });
|
||||
expect(wrapper.find('[data-drag-id="1"]').classes()).not.toContain(
|
||||
'cursor-grab'
|
||||
);
|
||||
});
|
||||
|
||||
it('does not start a drag when disabled', async () => {
|
||||
wrapper = mountList({
|
||||
items: [
|
||||
{ id: 1, title: 'Alpha' },
|
||||
{ id: 2, title: 'Beta' },
|
||||
],
|
||||
disabled: true,
|
||||
});
|
||||
await startDragging(1);
|
||||
move(250, 200);
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.emitted('dragging')).toBeUndefined();
|
||||
});
|
||||
|
||||
it('emits dragging true then false across a drag', async () => {
|
||||
wrapper = mountList({
|
||||
items: [
|
||||
{ id: 1, title: 'Alpha' },
|
||||
{ id: 2, title: 'Beta' },
|
||||
],
|
||||
});
|
||||
await startDragging(1);
|
||||
elementAtPoint.current = wrapper.find('[data-drag-id="2"]').element;
|
||||
move(250, 60);
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.emitted('dragging')[0]).toEqual([true]);
|
||||
|
||||
release();
|
||||
await nextTick();
|
||||
expect(wrapper.emitted('dragging')[1]).toEqual([false]);
|
||||
});
|
||||
|
||||
it('emits the midpoint position when dropped between two rows', async () => {
|
||||
wrapper = mountList({
|
||||
items: [
|
||||
{ id: 1, title: 'Alpha', position: 10 },
|
||||
{ id: 2, title: 'Beta', position: 20 },
|
||||
{ id: 3, title: 'Gamma', position: 30 },
|
||||
],
|
||||
});
|
||||
await startDragging(1);
|
||||
|
||||
// Hover the lower half of Beta (top 50, height 40 → midpoint 70) so the gap
|
||||
// sits before Gamma; dropping there lands halfway between Beta and Gamma.
|
||||
elementAtPoint.current = wrapper.find('[data-drag-id="2"]').element;
|
||||
move(250, 85);
|
||||
await nextTick();
|
||||
release();
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.emitted('reorder')[0][0]).toEqual({ 1: 25 });
|
||||
});
|
||||
|
||||
it('does not reorder when the only row on a page is dropped in place', async () => {
|
||||
// P1: dragging the lone article on a later page and releasing without
|
||||
// crossing to another page must be a no-op, not move it to the top.
|
||||
wrapper = mountList({
|
||||
items: [{ id: 5, title: 'Solo', position: 260 }],
|
||||
currentPage: 2,
|
||||
totalPages: 2,
|
||||
});
|
||||
await startDragging(5);
|
||||
move(250, 300);
|
||||
await nextTick();
|
||||
release();
|
||||
await nextTick();
|
||||
|
||||
expect(wrapper.emitted('dragging')).toEqual([[true], [false]]);
|
||||
expect(wrapper.emitted('reorder')).toBeUndefined();
|
||||
});
|
||||
|
||||
it('turns the page after dwelling on a pageable edge', async () => {
|
||||
vi.useFakeTimers();
|
||||
wrapper = mountList({
|
||||
items: [
|
||||
{ id: 1, title: 'Alpha', position: 10 },
|
||||
{ id: 2, title: 'Beta', position: 20 },
|
||||
],
|
||||
currentPage: 1,
|
||||
totalPages: 2,
|
||||
});
|
||||
await startDragging(1);
|
||||
|
||||
// Drag to the right edge over blank space (no card) and hold.
|
||||
elementAtPoint.current = null;
|
||||
move(490, 20);
|
||||
await nextTick();
|
||||
vi.advanceTimersByTime(600);
|
||||
|
||||
expect(wrapper.emitted('navigatePage')[0]).toEqual([2]);
|
||||
});
|
||||
|
||||
it('can still turn pages after releasing during a pending flip', async () => {
|
||||
// Releasing while a flip fetch is in flight must clear paging state, or every
|
||||
// later drag would be stuck unable to navigate.
|
||||
vi.useFakeTimers();
|
||||
wrapper = mountList({
|
||||
items: [
|
||||
{ id: 1, title: 'Alpha', position: 10 },
|
||||
{ id: 2, title: 'Beta', position: 20 },
|
||||
],
|
||||
currentPage: 1,
|
||||
totalPages: 2,
|
||||
});
|
||||
|
||||
// First drag: park at the edge to start a flip, then release before the new
|
||||
// page arrives (items never change here).
|
||||
await startDragging(1);
|
||||
elementAtPoint.current = null;
|
||||
move(490, 20);
|
||||
await nextTick();
|
||||
vi.advanceTimersByTime(600);
|
||||
release();
|
||||
await nextTick();
|
||||
|
||||
// Second drag must be able to flip again.
|
||||
await startDragging(1);
|
||||
elementAtPoint.current = null;
|
||||
move(490, 20);
|
||||
await nextTick();
|
||||
vi.advanceTimersByTime(600);
|
||||
|
||||
expect(wrapper.emitted('navigatePage')).toEqual([[2], [2]]);
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, useTemplateRef } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
@@ -7,9 +7,7 @@ import {
|
||||
ARTICLE_MENU_ITEMS,
|
||||
ARTICLE_MENU_OPTIONS,
|
||||
ARTICLE_STATUSES,
|
||||
getArticleStatus,
|
||||
} from 'dashboard/helper/portalHelper';
|
||||
import ArticlePendingChangesPopover from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticlePendingChangesPopover.vue';
|
||||
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
import { useConfig } from 'dashboard/composables/useConfig';
|
||||
@@ -55,10 +53,6 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
hasPendingChanges: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
selectable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -74,16 +68,12 @@ const emit = defineEmits([
|
||||
'articleAction',
|
||||
'toggleSelect',
|
||||
'hover',
|
||||
'draftResolved',
|
||||
'draftFailed',
|
||||
]);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const [showActionsDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const pendingChangesPopoverRef = useTemplateRef('pendingChangesPopoverRef');
|
||||
|
||||
const currentAccountId = useMapGetter('getCurrentAccountId');
|
||||
const isFeatureEnabledonAccount = useMapGetter(
|
||||
'accounts/isFeatureEnabledonAccount'
|
||||
@@ -115,18 +105,7 @@ const articleMenuItems = computed(() => {
|
||||
.filter(key => key !== 'translate' || isTranslationAvailable.value)
|
||||
.map(key => commonItems[key]);
|
||||
|
||||
const draftItems = props.hasPendingChanges
|
||||
? [
|
||||
{
|
||||
label: t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES'),
|
||||
value: 'discard-draft',
|
||||
action: 'discard-draft',
|
||||
icon: 'i-lucide-undo-2',
|
||||
},
|
||||
]
|
||||
: [];
|
||||
|
||||
return [...statusItems, ...draftItems, commonItems.delete];
|
||||
return [...statusItems, commonItems.delete];
|
||||
});
|
||||
|
||||
const statusTextColor = computed(() => {
|
||||
@@ -174,12 +153,6 @@ const lastUpdatedAt = computed(() => {
|
||||
|
||||
const handleArticleAction = ({ action, value }) => {
|
||||
toggleDropdown(false);
|
||||
// Un-publishing an article with staged edits — confirm apply/discard first;
|
||||
// the popover applies the chosen status itself.
|
||||
if (props.hasPendingChanges && (action === 'draft' || action === 'archive')) {
|
||||
pendingChangesPopoverRef.value?.open(getArticleStatus(value));
|
||||
return;
|
||||
}
|
||||
emit('articleAction', { action, value, id: props.id });
|
||||
};
|
||||
|
||||
@@ -211,18 +184,6 @@ const handleClick = id => {
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
v-if="hasPendingChanges"
|
||||
:title="
|
||||
t(
|
||||
'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.PENDING_EDITS_TOOLTIP'
|
||||
)
|
||||
"
|
||||
class="text-xs font-medium inline-flex items-center gap-1 h-6 px-2 py-0.5 rounded-md text-n-slate-11 bg-n-alpha-2 whitespace-nowrap shrink-0"
|
||||
>
|
||||
<span class="rounded-full size-1.5 bg-n-amber-9 shrink-0" />
|
||||
{{ t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.PENDING_EDITS') }}
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
|
||||
:class="statusTextColor"
|
||||
@@ -243,15 +204,9 @@ const handleClick = id => {
|
||||
<DropdownMenu
|
||||
v-if="showActionsDropdown"
|
||||
:menu-items="articleMenuItems"
|
||||
class="mt-1 end-0 top-full w-40"
|
||||
class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
|
||||
@action="handleArticleAction($event)"
|
||||
/>
|
||||
<ArticlePendingChangesPopover
|
||||
ref="pendingChangesPopoverRef"
|
||||
:article-id="id"
|
||||
@resolved="emit('draftResolved', $event)"
|
||||
@failed="emit('draftFailed', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -56,9 +56,6 @@ const localeMenuLabels = computed(() => ({
|
||||
'customize-content': t(
|
||||
'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT'
|
||||
),
|
||||
'select-popular-content': t(
|
||||
'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.SELECT_POPULAR_CONTENT'
|
||||
),
|
||||
delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
|
||||
}));
|
||||
|
||||
|
||||
-173
@@ -1,173 +0,0 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
|
||||
import MessageFormatter from 'shared/helpers/MessageFormatter';
|
||||
import {
|
||||
renderInlineDiff,
|
||||
buildDiffBlocks,
|
||||
} from 'dashboard/helper/articleDiffHelper';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
|
||||
|
||||
const props = defineProps({
|
||||
article: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const isOpen = defineModel({ type: Boolean, default: false });
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const liveTitle = computed(() => props.article?.title ?? '');
|
||||
const liveContent = computed(() => props.article?.content ?? '');
|
||||
const draftTitle = computed(() => props.article?.draftTitle ?? liveTitle.value);
|
||||
const draftContent = computed(
|
||||
() => props.article?.draftContent ?? liveContent.value
|
||||
);
|
||||
|
||||
const titleChanged = computed(() => liveTitle.value !== draftTitle.value);
|
||||
const titleDiff = computed(() =>
|
||||
renderInlineDiff(liveTitle.value, draftTitle.value)
|
||||
);
|
||||
|
||||
const contentBlocks = computed(() =>
|
||||
buildDiffBlocks(liveContent.value, draftContent.value)
|
||||
);
|
||||
const contentChanged = computed(() =>
|
||||
contentBlocks.value.some(block => block.type !== 'equal')
|
||||
);
|
||||
|
||||
// HC tables store per-column widths (px, 0 = unset) in this marker, which the
|
||||
// formatter strips. Re-apply them as a fixed-layout <colgroup>, defaulting
|
||||
// unsized columns so they don't collapse.
|
||||
const COLWIDTHS_RE = /<!--cw-colwidths:([\d,]+)-->/;
|
||||
const DEFAULT_COL_WIDTH = 50;
|
||||
|
||||
const applyColumnWidths = (html, widths) => {
|
||||
const doc = new DOMParser().parseFromString(html, 'text/html');
|
||||
const table = doc.body.querySelector('table');
|
||||
if (!table) return html;
|
||||
|
||||
const sized = widths.map(width => (width > 0 ? width : DEFAULT_COL_WIDTH));
|
||||
const colgroup = doc.createElement('colgroup');
|
||||
sized.forEach(width => {
|
||||
const col = doc.createElement('col');
|
||||
col.style.width = `${width}px`;
|
||||
colgroup.appendChild(col);
|
||||
});
|
||||
table.insertBefore(colgroup, table.firstChild);
|
||||
|
||||
table.style.tableLayout = 'fixed';
|
||||
table.style.width = `${sized.reduce((sum, width) => sum + width, 0)}px`;
|
||||
return doc.body.innerHTML;
|
||||
};
|
||||
|
||||
const renderMarkdown = markdown => {
|
||||
if (!markdown) return '';
|
||||
const html = new MessageFormatter(markdown).formattedMessage;
|
||||
const match = markdown.match(COLWIDTHS_RE);
|
||||
return match
|
||||
? applyColumnWidths(html, match[1].split(',').map(Number))
|
||||
: html;
|
||||
};
|
||||
|
||||
const blockClass = type => {
|
||||
if (type === 'added') {
|
||||
return 'border-n-teal-9 bg-n-teal-2';
|
||||
}
|
||||
if (type === 'removed') {
|
||||
return 'border-n-ruby-9 bg-n-ruby-2 line-through decoration-n-ruby-9/50';
|
||||
}
|
||||
return 'border-transparent';
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
isOpen.value = false;
|
||||
};
|
||||
|
||||
const dismissOnClickOutside = [close, { ignore: ['[data-diff-toggle]'] }];
|
||||
|
||||
useKeyboardEvents({ Escape: { action: close, allowOnFocusedInput: true } });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TeleportWithDirection to="body">
|
||||
<Transition
|
||||
enter-active-class="transition-transform duration-200 ease-in-out"
|
||||
leave-active-class="transition-transform duration-200 ease-in-out"
|
||||
enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
|
||||
enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
|
||||
leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
|
||||
leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
|
||||
>
|
||||
<aside
|
||||
v-if="isOpen"
|
||||
v-on-click-outside="dismissOnClickOutside"
|
||||
class="fixed inset-y-0 z-40 flex flex-col w-full shadow-2xl end-0 max-w-lg bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak"
|
||||
>
|
||||
<header
|
||||
class="flex items-start justify-between gap-3 px-6 py-4 border-b shrink-0 border-n-weak bg-n-solid-1"
|
||||
>
|
||||
<div class="flex flex-col gap-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2 rounded-full bg-n-amber-9 shrink-0" />
|
||||
<h3 class="text-base font-medium leading-6 text-n-slate-12">
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE') }}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-sm text-n-slate-11">
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.DESCRIPTION') }}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
icon="i-lucide-x"
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="sm"
|
||||
class="shrink-0 hover:text-n-slate-11"
|
||||
@click="close"
|
||||
/>
|
||||
</header>
|
||||
|
||||
<div
|
||||
class="flex flex-col flex-1 min-h-0 gap-4 px-6 pt-4 pb-6 overflow-y-auto"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
v-if="titleChanged"
|
||||
class="flex flex-col gap-1.5 border-s-[3px] border-transparent ps-3"
|
||||
>
|
||||
<span
|
||||
class="text-[11px] font-medium tracking-wide uppercase text-n-slate-10"
|
||||
>
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE_LABEL') }}
|
||||
</span>
|
||||
<h1
|
||||
class="text-lg font-semibold leading-snug text-n-slate-12"
|
||||
v-html="titleDiff"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="contentChanged"
|
||||
class="flex flex-col gap-1 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-n-weak [&_td]:border-n-weak [&_th]:p-2 [&_td]:p-2 [&_th]:bg-n-alpha-1 [&_th]:text-start [&_td]:align-top"
|
||||
>
|
||||
<div
|
||||
v-for="(block, index) in contentBlocks"
|
||||
:key="index"
|
||||
class="px-3 py-1.5 overflow-x-auto text-sm leading-relaxed break-words border-s-[3px] rounded-e-md text-n-slate-12 prose-sm prose dark:prose-invert max-w-none [&_p]:my-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0"
|
||||
:class="blockClass(block.type)"
|
||||
v-html="renderMarkdown(block.md)"
|
||||
/>
|
||||
</div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
</div>
|
||||
</aside>
|
||||
</Transition>
|
||||
</TeleportWithDirection>
|
||||
</template>
|
||||
+18
-66
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch, onBeforeUnmount } from 'vue';
|
||||
import { useTimeoutFn } from '@vueuse/core';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
|
||||
|
||||
@@ -9,7 +9,6 @@ import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
|
||||
import FullEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
|
||||
import ArticleEditorHeader from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue';
|
||||
import ArticleEditorControls from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue';
|
||||
import ArticleDiffPanel from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue';
|
||||
|
||||
const props = defineProps({
|
||||
article: {
|
||||
@@ -39,75 +38,32 @@ const { t } = useI18n();
|
||||
|
||||
const isNewArticle = computed(() => !props.article?.id);
|
||||
|
||||
// Prefer the draft; `??` keeps a deliberately-cleared empty string instead of
|
||||
// falling back to the live value.
|
||||
const effectiveTitle = () =>
|
||||
props.article?.draftTitle ?? props.article?.title ?? '';
|
||||
const effectiveContent = () =>
|
||||
props.article?.draftContent ?? props.article?.content ?? '';
|
||||
const localTitle = ref(props.article?.title ?? '');
|
||||
const localContent = ref(props.article?.content ?? '');
|
||||
|
||||
const hasPendingChanges = computed(
|
||||
() => props.article?.draftTitle != null || props.article?.draftContent != null
|
||||
);
|
||||
|
||||
const localTitle = ref(effectiveTitle());
|
||||
const localContent = ref(effectiveContent());
|
||||
|
||||
const isDiffPanelOpen = ref(false);
|
||||
|
||||
// Autosave 500ms after the last edit. It sends both title and content so an
|
||||
// edit to one never drops a recent edit to the other. `stop` cancels a queued
|
||||
// save; `isPending` tells the header to wait before allowing a publish.
|
||||
const {
|
||||
isPending: isSaving,
|
||||
start: debouncedSave,
|
||||
stop: cancelSave,
|
||||
} = useTimeoutFn(
|
||||
() =>
|
||||
emit('saveArticle', {
|
||||
title: localTitle.value,
|
||||
content: localContent.value,
|
||||
}),
|
||||
500,
|
||||
{ immediate: false }
|
||||
);
|
||||
|
||||
const syncLocalState = () => {
|
||||
cancelSave();
|
||||
localTitle.value = effectiveTitle();
|
||||
localContent.value = effectiveContent();
|
||||
};
|
||||
|
||||
// Reseed on article switch or once a draft is published/discarded; close the
|
||||
// diff panel in the latter case since there's nothing left to compare.
|
||||
// Sync local state when navigating to a different article or on initial fetch
|
||||
watch(
|
||||
[() => props.article?.id, hasPendingChanges],
|
||||
([id, pending], [prevId, prevPending]) => {
|
||||
if ((id && id !== prevId) || (prevPending && !pending)) syncLocalState();
|
||||
if (prevPending && !pending) isDiffPanelOpen.value = false;
|
||||
() => props.article?.id,
|
||||
newId => {
|
||||
if (newId) {
|
||||
localTitle.value = props.article?.title ?? '';
|
||||
localContent.value = props.article?.content ?? '';
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const scheduleSave = () => {
|
||||
if (isNewArticle.value) return;
|
||||
debouncedSave();
|
||||
};
|
||||
const debouncedSave = debounce(value => emit('saveArticle', value), 500, false);
|
||||
|
||||
// Flush a queued save on unmount so leaving the editor doesn't drop the last edit.
|
||||
onBeforeUnmount(() => {
|
||||
if (isNewArticle.value || !isSaving.value) return;
|
||||
cancelSave();
|
||||
emit('saveArticle', {
|
||||
title: localTitle.value,
|
||||
content: localContent.value,
|
||||
});
|
||||
});
|
||||
const handleSave = value => {
|
||||
if (isNewArticle.value) return;
|
||||
debouncedSave(value);
|
||||
};
|
||||
|
||||
const articleTitle = computed({
|
||||
get: () => localTitle.value,
|
||||
set: value => {
|
||||
localTitle.value = value;
|
||||
scheduleSave();
|
||||
handleSave({ title: value });
|
||||
},
|
||||
});
|
||||
|
||||
@@ -115,7 +71,7 @@ const articleContent = computed({
|
||||
get: () => localContent.value,
|
||||
set: content => {
|
||||
localContent.value = content;
|
||||
scheduleSave();
|
||||
handleSave({ content });
|
||||
},
|
||||
});
|
||||
|
||||
@@ -152,13 +108,9 @@ const handleCreateArticle = event => {
|
||||
:is-saved="isSaved"
|
||||
:status="article.status"
|
||||
:article-id="article.id"
|
||||
:pending-changes="hasPendingChanges"
|
||||
:is-saving="isSaving"
|
||||
@go-back="onClickGoBack"
|
||||
@preview-article="previewArticle"
|
||||
@show-diff="isDiffPanelOpen = !isDiffPanelOpen"
|
||||
/>
|
||||
<ArticleDiffPanel v-model="isDiffPanelOpen" :article="article" />
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">
|
||||
|
||||
+14
-165
@@ -1,8 +1,8 @@
|
||||
<script setup>
|
||||
import { computed, ref, useTemplateRef } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore, useMapGetter } from 'dashboard/composables/store.js';
|
||||
import { useStore } from 'dashboard/composables/store.js';
|
||||
import { useAlert, useTrack } from 'dashboard/composables';
|
||||
import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
|
||||
import { OnClickOutside } from '@vueuse/components';
|
||||
@@ -17,7 +17,6 @@ import wootConstants from 'dashboard/constants/globals';
|
||||
import ButtonGroup from 'dashboard/components-next/buttonGroup/ButtonGroup.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import ArticlePendingChangesPopover from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticlePendingChangesPopover.vue';
|
||||
|
||||
const props = defineProps({
|
||||
isUpdating: {
|
||||
@@ -36,17 +35,9 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
pendingChanges: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isSaving: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['goBack', 'previewArticle', 'showDiff']);
|
||||
const emit = defineEmits(['goBack', 'previewArticle']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
@@ -58,30 +49,9 @@ const { ARTICLE_STATUS_TYPES } = wootConstants;
|
||||
|
||||
const showArticleActionMenu = ref(false);
|
||||
|
||||
const pendingChangesPopoverRef = useTemplateRef('pendingChangesPopoverRef');
|
||||
|
||||
// Per-article update flag the store already maintains.
|
||||
const articleUiFlags = useMapGetter('articles/uiFlags');
|
||||
const isUpdatingArticle = computed(
|
||||
() => articleUiFlags.value(props.articleId).isUpdating
|
||||
);
|
||||
|
||||
// Publishing while a save is still in flight would promote a stale draft, so we show an alert
|
||||
const blockedWhileSaving = () => {
|
||||
if (!props.isSaving && !isUpdatingArticle.value) return false;
|
||||
useAlert(t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.SAVE_IN_PROGRESS'));
|
||||
return true;
|
||||
};
|
||||
|
||||
const isPublished = computed(() => props.status === ARTICLE_STATUSES.PUBLISHED);
|
||||
|
||||
const hasPendingChanges = computed(
|
||||
() => isPublished.value && props.pendingChanges
|
||||
);
|
||||
|
||||
const articleMenuItems = computed(() => {
|
||||
const statusOptions = ARTICLE_EDITOR_STATUS_OPTIONS[props.status] ?? [];
|
||||
const items = statusOptions.map(option => {
|
||||
return statusOptions.map(option => {
|
||||
const { label, value, icon } = ARTICLE_MENU_ITEMS[option];
|
||||
return {
|
||||
label: t(label),
|
||||
@@ -90,17 +60,6 @@ const articleMenuItems = computed(() => {
|
||||
icon,
|
||||
};
|
||||
});
|
||||
|
||||
if (hasPendingChanges.value) {
|
||||
items.push({
|
||||
label: t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES'),
|
||||
value: 'discard-draft',
|
||||
action: 'discard-draft',
|
||||
icon: 'i-lucide-undo-2',
|
||||
});
|
||||
}
|
||||
|
||||
return items;
|
||||
});
|
||||
|
||||
const statusText = computed(() =>
|
||||
@@ -126,9 +85,8 @@ const getStatusMessage = (status, isSuccess) => {
|
||||
: '';
|
||||
};
|
||||
|
||||
// Pass draftAction (publishDraft/discardDraft) to resolve a draft in the same
|
||||
// update; omit it for a plain status change.
|
||||
const performStatusUpdate = async (value, draftAction) => {
|
||||
const updateArticleStatus = async ({ value }) => {
|
||||
showArticleActionMenu.value = false;
|
||||
const status = getArticleStatus(value);
|
||||
if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
|
||||
isArticlePublishing.value = true;
|
||||
@@ -136,7 +94,7 @@ const performStatusUpdate = async (value, draftAction) => {
|
||||
const { portalSlug } = route.params;
|
||||
|
||||
try {
|
||||
await store.dispatch(`articles/${draftAction ?? 'update'}`, {
|
||||
await store.dispatch('articles/update', {
|
||||
portalSlug,
|
||||
articleId: props.articleId,
|
||||
status,
|
||||
@@ -149,100 +107,12 @@ const performStatusUpdate = async (value, draftAction) => {
|
||||
} else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
|
||||
useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
|
||||
}
|
||||
isArticlePublishing.value = false;
|
||||
} catch (error) {
|
||||
useAlert(error?.message ?? getStatusMessage(status, false));
|
||||
} finally {
|
||||
isArticlePublishing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const updateArticleStatus = ({ value }) => {
|
||||
showArticleActionMenu.value = false;
|
||||
// Leaving published with unsaved draft edits — ask whether to apply or discard
|
||||
// first; the popover applies the status itself once resolved.
|
||||
if (hasPendingChanges.value) {
|
||||
pendingChangesPopoverRef.value?.open(getArticleStatus(value));
|
||||
return;
|
||||
}
|
||||
performStatusUpdate(value);
|
||||
};
|
||||
|
||||
const publishDraftChanges = async () => {
|
||||
isArticlePublishing.value = true;
|
||||
const { portalSlug } = route.params;
|
||||
try {
|
||||
await store.dispatch('articles/publishDraft', {
|
||||
portalSlug,
|
||||
articleId: props.articleId,
|
||||
});
|
||||
useAlert(t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_SUCCESS'));
|
||||
useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
|
||||
} catch (error) {
|
||||
useAlert(
|
||||
error?.message ??
|
||||
t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_ERROR')
|
||||
);
|
||||
} finally {
|
||||
isArticlePublishing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const discardDraftChanges = async () => {
|
||||
const { portalSlug } = route.params;
|
||||
try {
|
||||
await store.dispatch('articles/discardDraft', {
|
||||
portalSlug,
|
||||
articleId: props.articleId,
|
||||
});
|
||||
useAlert(t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_SUCCESS'));
|
||||
} catch (error) {
|
||||
useAlert(
|
||||
error?.message ??
|
||||
t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_ERROR')
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const onPrimaryAction = () => {
|
||||
if (blockedWhileSaving()) return;
|
||||
if (hasPendingChanges.value) {
|
||||
publishDraftChanges();
|
||||
} else if (props.pendingChanges) {
|
||||
// Promote leftover draft edits on publish instead of republishing stale content.
|
||||
performStatusUpdate(ARTICLE_STATUSES.PUBLISHED, 'publishDraft');
|
||||
} else {
|
||||
updateArticleStatus({ value: ARTICLE_STATUSES.PUBLISHED });
|
||||
}
|
||||
};
|
||||
|
||||
const onMenuAction = event => {
|
||||
showArticleActionMenu.value = false;
|
||||
// Don't resolve a draft while an autosave is still in flight — it could land
|
||||
// after and recreate the draft we just discarded/applied.
|
||||
if (blockedWhileSaving()) return;
|
||||
if (event.action === 'discard-draft') {
|
||||
discardDraftChanges();
|
||||
} else {
|
||||
updateArticleStatus(event);
|
||||
}
|
||||
};
|
||||
|
||||
// The popover applies the draft + status itself; we just surface the outcome.
|
||||
const onDraftResolved = status => {
|
||||
useAlert(getStatusMessage(status, true));
|
||||
if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
|
||||
useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
|
||||
} else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
|
||||
useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
|
||||
}
|
||||
};
|
||||
|
||||
const onDraftFailed = error => {
|
||||
useAlert(
|
||||
error?.message ??
|
||||
t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_ERROR')
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -257,24 +127,13 @@ const onDraftFailed = error => {
|
||||
@click="onClickGoBack"
|
||||
/>
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
v-if="hasPendingChanges"
|
||||
type="button"
|
||||
data-diff-toggle
|
||||
:title="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.VIEW_CHANGES')"
|
||||
class="flex items-center gap-1.5 px-2 py-1 text-xs font-medium transition-colors rounded-lg cursor-pointer text-n-amber-11 bg-n-amber-3 outline outline-1 outline-n-amber-5 hover:bg-n-amber-4"
|
||||
@click="emit('showDiff')"
|
||||
>
|
||||
<span class="rounded-full size-1.5 bg-n-amber-9 shrink-0" />
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PENDING_CHANGES') }}
|
||||
</button>
|
||||
<span
|
||||
v-if="isUpdating || isSaved"
|
||||
class="text-xs font-medium transition-all duration-300 text-n-slate-11"
|
||||
>
|
||||
{{ statusText }}
|
||||
</span>
|
||||
<div class="relative flex items-center gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
:label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PREVIEW')"
|
||||
color="slate"
|
||||
@@ -284,21 +143,17 @@ const onDraftFailed = error => {
|
||||
/>
|
||||
<ButtonGroup class="flex items-center">
|
||||
<Button
|
||||
:label="
|
||||
hasPendingChanges
|
||||
? t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES')
|
||||
: t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')
|
||||
"
|
||||
:label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')"
|
||||
size="sm"
|
||||
class="ltr:rounded-r-none rtl:rounded-l-none"
|
||||
no-animation
|
||||
:is-loading="isArticlePublishing"
|
||||
:disabled="
|
||||
status === ARTICLE_STATUSES.PUBLISHED ||
|
||||
!articleId ||
|
||||
isArticlePublishing ||
|
||||
(isPublished && !hasPendingChanges)
|
||||
isArticlePublishing
|
||||
"
|
||||
@click="onPrimaryAction"
|
||||
@click="updateArticleStatus({ value: ARTICLE_STATUSES.PUBLISHED })"
|
||||
/>
|
||||
<div class="relative">
|
||||
<OnClickOutside @trigger="showArticleActionMenu = false">
|
||||
@@ -314,17 +169,11 @@ const onDraftFailed = error => {
|
||||
v-if="showArticleActionMenu"
|
||||
:menu-items="articleMenuItems"
|
||||
class="mt-2 ltr:right-0 rtl:left-0 top-full"
|
||||
@action="onMenuAction($event)"
|
||||
@action="updateArticleStatus($event)"
|
||||
/>
|
||||
</OnClickOutside>
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
<ArticlePendingChangesPopover
|
||||
ref="pendingChangesPopoverRef"
|
||||
:article-id="articleId"
|
||||
@resolved="onDraftResolved"
|
||||
@failed="onDraftFailed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-132
@@ -1,132 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useStore, useMapGetter } from 'dashboard/composables/store';
|
||||
import { onKeyStroke } from '@vueuse/core';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
articleId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['resolved', 'failed']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
|
||||
const isOpen = ref(false);
|
||||
const requestedStatus = ref(null);
|
||||
// Which button is in flight, so only that one shows the spinner.
|
||||
const activeAction = ref(null);
|
||||
|
||||
const articleUiFlags = useMapGetter('articles/uiFlags');
|
||||
const isLoading = computed(
|
||||
() => articleUiFlags.value(props.articleId).isUpdating
|
||||
);
|
||||
|
||||
// Open the confirmation for a target status; resolving it also applies that status.
|
||||
const open = status => {
|
||||
requestedStatus.value = status;
|
||||
activeAction.value = null;
|
||||
isOpen.value = true;
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
isOpen.value = false;
|
||||
};
|
||||
|
||||
// Don't let a click-outside or Escape dismiss the popover mid-action.
|
||||
const dismiss = () => {
|
||||
if (!isLoading.value) close();
|
||||
};
|
||||
|
||||
const resolve = async draftAction => {
|
||||
activeAction.value = draftAction === 'publishDraft' ? 'apply' : 'discard';
|
||||
try {
|
||||
await store.dispatch(`articles/${draftAction}`, {
|
||||
portalSlug: route.params.portalSlug,
|
||||
articleId: props.articleId,
|
||||
status: requestedStatus.value,
|
||||
});
|
||||
emit('resolved', requestedStatus.value);
|
||||
close();
|
||||
} catch (error) {
|
||||
emit('failed', error);
|
||||
}
|
||||
};
|
||||
|
||||
const onApply = () => resolve('publishDraft');
|
||||
const onDiscard = () => resolve('discardDraft');
|
||||
|
||||
onKeyStroke('Escape', () => {
|
||||
if (isOpen.value) dismiss();
|
||||
});
|
||||
|
||||
defineExpose({ open, close });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-show="isOpen"
|
||||
v-on-click-outside="dismiss"
|
||||
class="absolute z-50 flex flex-col gap-4 p-4 mt-2 outline outline-1 shadow-lg w-96 end-0 top-full rounded-xl bg-n-alpha-3 backdrop-blur-[100px] outline-n-container"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex flex-col gap-1">
|
||||
<h3 class="text-base font-medium text-n-slate-12">
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.TITLE') }}
|
||||
</h3>
|
||||
<p class="mb-0 text-sm text-n-slate-11">
|
||||
{{
|
||||
t(
|
||||
'HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.DESCRIPTION'
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
icon="i-lucide-x"
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="shrink-0 -me-1 -mt-1"
|
||||
:disabled="isLoading"
|
||||
@click="close"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="faded"
|
||||
color="ruby"
|
||||
size="sm"
|
||||
class="flex-1"
|
||||
:is-loading="isLoading && activeAction === 'discard'"
|
||||
:disabled="isLoading"
|
||||
:label="
|
||||
t('HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.DISCARD')
|
||||
"
|
||||
@click="onDiscard"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
color="blue"
|
||||
size="sm"
|
||||
class="flex-1"
|
||||
:is-loading="isLoading && activeAction === 'apply'"
|
||||
:disabled="isLoading"
|
||||
:label="
|
||||
t('HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.APPLY')
|
||||
"
|
||||
@click="onApply"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
+81
-113
@@ -1,19 +1,15 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import Draggable from 'vuedraggable';
|
||||
import { useMapGetter, useStore } from 'dashboard/composables/store.js';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAlert, useTrack } from 'dashboard/composables';
|
||||
import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
|
||||
import {
|
||||
getArticleStatus,
|
||||
ARTICLE_STATUSES,
|
||||
} from 'dashboard/helper/portalHelper.js';
|
||||
import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
|
||||
import wootConstants from 'dashboard/constants/globals';
|
||||
import { hasPendingChanges } from 'dashboard/helper/articleDiffHelper';
|
||||
|
||||
import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
|
||||
import DraggableReorderList from 'dashboard/components-next/DraggableReorderList/DraggableReorderList.vue';
|
||||
|
||||
const props = defineProps({
|
||||
articles: {
|
||||
@@ -32,22 +28,9 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
totalPages: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
'translateArticle',
|
||||
'toggleSelect',
|
||||
'navigatePage',
|
||||
'dragging',
|
||||
]);
|
||||
const emit = defineEmits(['translateArticle', 'toggleSelect']);
|
||||
|
||||
const { ARTICLE_STATUS_TYPES } = wootConstants;
|
||||
|
||||
@@ -56,14 +39,14 @@ const route = useRoute();
|
||||
const store = useStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const localArticles = ref(props.articles);
|
||||
const hoveredArticleId = ref(null);
|
||||
|
||||
const dragEnabled = computed(() => {
|
||||
const canReorder = props.articles?.length > 1 || props.totalPages > 1;
|
||||
return (
|
||||
props.isCategoryArticles &&
|
||||
!props.isSearching &&
|
||||
canReorder &&
|
||||
localArticles.value?.length > 1 &&
|
||||
props.selectedArticleIds.size === 0
|
||||
);
|
||||
});
|
||||
@@ -80,10 +63,6 @@ const handleCardHover = (isHovered, id) => {
|
||||
|
||||
const getCategoryById = useMapGetter('categories/categoryById');
|
||||
|
||||
const getCategory = categoryId => {
|
||||
return getCategoryById.value(categoryId) || { name: '', icon: '' };
|
||||
};
|
||||
|
||||
const openArticle = id => {
|
||||
const { tab, categorySlug, locale } = route.params;
|
||||
if (props.isCategoryArticles) {
|
||||
@@ -104,25 +83,38 @@ const openArticle = id => {
|
||||
}
|
||||
};
|
||||
|
||||
const onReorder = async positionsHash => {
|
||||
const [movedId] = Object.keys(positionsHash);
|
||||
// A same-page reorder updates optimistically in the store, so it needs no
|
||||
// refetch. Only a cross-page drop must refresh, to pull the moved article
|
||||
// onto this page in its new spot.
|
||||
const isCrossPage = !props.articles.some(
|
||||
article => String(article.id) === movedId
|
||||
);
|
||||
const onReorder = async reorderedGroup => {
|
||||
try {
|
||||
await store.dispatch('articles/reorder', {
|
||||
reorderedGroup: positionsHash,
|
||||
reorderedGroup,
|
||||
portalSlug: route.params.portalSlug,
|
||||
});
|
||||
if (isCrossPage) emit('navigatePage', props.currentPage);
|
||||
} catch {
|
||||
useAlert(t('HELP_CENTER.REORDER_ARTICLE.API.ERROR_MESSAGE'));
|
||||
}
|
||||
};
|
||||
|
||||
const onDragEnd = () => {
|
||||
// Collect and sort existing positions, falling back to index+1 for null/0 values
|
||||
const sortedArticlePositions = localArticles.value
|
||||
.map((article, index) => article.position || index + 1)
|
||||
.sort((a, b) => a - b);
|
||||
|
||||
const orderedArticles = localArticles.value.map(article => article.id);
|
||||
|
||||
// Create a map of article IDs to their new positions
|
||||
const reorderedGroup = orderedArticles.reduce((obj, key, index) => {
|
||||
obj[key] = sortedArticlePositions[index];
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
onReorder(reorderedGroup);
|
||||
};
|
||||
|
||||
const getCategory = categoryId => {
|
||||
return getCategoryById.value(categoryId) || { name: '', icon: '' };
|
||||
};
|
||||
|
||||
const getStatusMessage = (status, isSuccess) => {
|
||||
const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
|
||||
const statusMap = {
|
||||
@@ -149,24 +141,6 @@ const updateArticlesMeta = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const refreshArticleMeta = async () => {
|
||||
await updateArticlesMeta();
|
||||
await updatePortalMeta();
|
||||
};
|
||||
|
||||
// The card's pending-changes popover applies the status itself; surface the result.
|
||||
const onDraftResolved = status => {
|
||||
useAlert(getStatusMessage(status, true));
|
||||
refreshArticleMeta();
|
||||
};
|
||||
|
||||
const onDraftFailed = error => {
|
||||
useAlert(
|
||||
error?.message ||
|
||||
t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_ERROR')
|
||||
);
|
||||
};
|
||||
|
||||
const handleArticleAction = async (action, { status, id }) => {
|
||||
const { portalSlug } = route.params;
|
||||
try {
|
||||
@@ -176,14 +150,6 @@ const handleArticleAction = async (action, { status, id }) => {
|
||||
articleId: id,
|
||||
});
|
||||
useAlert(t('HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'));
|
||||
} else if (action === 'discard-draft') {
|
||||
await store.dispatch('articles/discardDraft', {
|
||||
portalSlug,
|
||||
articleId: id,
|
||||
});
|
||||
useAlert(
|
||||
t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_SUCCESS')
|
||||
);
|
||||
} else {
|
||||
await store.dispatch('articles/update', {
|
||||
portalSlug,
|
||||
@@ -198,16 +164,15 @@ const handleArticleAction = async (action, { status, id }) => {
|
||||
useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
|
||||
}
|
||||
}
|
||||
await refreshArticleMeta();
|
||||
await updateArticlesMeta();
|
||||
await updatePortalMeta();
|
||||
} catch (error) {
|
||||
const fallbackMessage =
|
||||
{
|
||||
delete: t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE'),
|
||||
'discard-draft': t(
|
||||
'HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_ERROR'
|
||||
),
|
||||
}[action] ?? getStatusMessage(status, false);
|
||||
useAlert(error?.message || fallbackMessage);
|
||||
const errorMessage =
|
||||
error?.message ||
|
||||
(action === 'delete'
|
||||
? t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE')
|
||||
: getStatusMessage(status, false));
|
||||
useAlert(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -219,51 +184,54 @@ const updateArticle = ({ action, value, id }) => {
|
||||
const status = action !== 'delete' ? getArticleStatus(value) : null;
|
||||
handleArticleAction(action, { status, id });
|
||||
};
|
||||
|
||||
// Watch for changes in the articles prop and update the localArticles ref
|
||||
watch(
|
||||
() => props.articles,
|
||||
newArticles => {
|
||||
localArticles.value = newArticles;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DraggableReorderList
|
||||
:items="articles"
|
||||
<Draggable
|
||||
v-model="localArticles"
|
||||
:disabled="!dragEnabled"
|
||||
:current-page="currentPage"
|
||||
:total-pages="totalPages"
|
||||
@reorder="onReorder"
|
||||
@navigate-page="page => emit('navigatePage', page)"
|
||||
@dragging="value => emit('dragging', value)"
|
||||
item-key="id"
|
||||
tag="ul"
|
||||
ghost-class="article-ghost-class"
|
||||
class="w-full h-full space-y-4"
|
||||
@end="onDragEnd"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<ArticleCard
|
||||
:id="item.id"
|
||||
:title="item.title"
|
||||
:status="item.status"
|
||||
:author="item.author"
|
||||
:category="getCategory(item.category.id)"
|
||||
:views="item.views || 0"
|
||||
:updated-at="item.updatedAt"
|
||||
:is-selected="selectedArticleIds.has(item.id)"
|
||||
:has-pending-changes="
|
||||
item.status === ARTICLE_STATUSES.PUBLISHED && hasPendingChanges(item)
|
||||
"
|
||||
selectable
|
||||
:show-selection-control="shouldShowSelectionControl(item.id)"
|
||||
@open-article="openArticle"
|
||||
@article-action="updateArticle"
|
||||
@draft-resolved="onDraftResolved"
|
||||
@draft-failed="onDraftFailed"
|
||||
@toggle-select="emit('toggleSelect', $event)"
|
||||
@hover="isHovered => handleCardHover(isHovered, item.id)"
|
||||
/>
|
||||
<template #item="{ element }">
|
||||
<li class="list-none rounded-2xl">
|
||||
<ArticleCard
|
||||
:id="element.id"
|
||||
:key="element.id"
|
||||
:title="element.title"
|
||||
:status="element.status"
|
||||
:author="element.author"
|
||||
:category="getCategory(element.category.id)"
|
||||
:views="element.views || 0"
|
||||
:updated-at="element.updatedAt"
|
||||
:is-selected="selectedArticleIds.has(element.id)"
|
||||
selectable
|
||||
:show-selection-control="shouldShowSelectionControl(element.id)"
|
||||
:class="{ 'cursor-grab': dragEnabled }"
|
||||
@open-article="openArticle"
|
||||
@article-action="updateArticle"
|
||||
@toggle-select="emit('toggleSelect', $event)"
|
||||
@hover="isHovered => handleCardHover(isHovered, element.id)"
|
||||
/>
|
||||
</li>
|
||||
</template>
|
||||
<template #ghost="{ item }">
|
||||
<ArticleCard
|
||||
:id="item.id"
|
||||
:title="item.title"
|
||||
:status="item.status"
|
||||
:author="item.author"
|
||||
:category="getCategory(item.category.id)"
|
||||
:views="item.views || 0"
|
||||
:updated-at="item.updatedAt"
|
||||
/>
|
||||
</template>
|
||||
</DraggableReorderList>
|
||||
</Draggable>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-ghost-class {
|
||||
@apply opacity-50 bg-n-solid-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
+8
-52
@@ -3,15 +3,10 @@ import { ref, computed, watch } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { OnClickOutside } from '@vueuse/components';
|
||||
import { useStore, useMapGetter } from 'dashboard/composables/store.js';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
import { useConfig } from 'dashboard/composables/useConfig';
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
import {
|
||||
ARTICLE_TABS,
|
||||
CATEGORY_ALL,
|
||||
ARTICLE_STATUSES,
|
||||
} from 'dashboard/helper/portalHelper';
|
||||
import { hasPendingChanges } from 'dashboard/helper/articleDiffHelper';
|
||||
import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
|
||||
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import articlesAPI from 'dashboard/api/helpCenter/articles';
|
||||
@@ -65,7 +60,6 @@ const emit = defineEmits([
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const store = useStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
|
||||
@@ -76,7 +70,6 @@ const isFeatureEnabledonAccount = useMapGetter(
|
||||
);
|
||||
|
||||
const selectedArticleIds = ref(new Set());
|
||||
const isArticleDragging = ref(false);
|
||||
const deleteConfirmDialogRef = ref(null);
|
||||
const isCategoryMenuOpen = ref(false);
|
||||
const searchQuery = ref(route.query.search || '');
|
||||
@@ -155,8 +148,6 @@ const articlesCount = computed(() => {
|
||||
return Number(countMap[tab] || countMap['']);
|
||||
});
|
||||
|
||||
const totalPages = computed(() => Math.ceil(articlesCount.value / 25) || 1);
|
||||
|
||||
const showArticleHeaderControls = computed(
|
||||
() => !props.isCategoryArticles && !isSwitchingPortal.value
|
||||
);
|
||||
@@ -233,46 +224,15 @@ const onBulkActionSuccess = message => {
|
||||
};
|
||||
|
||||
const bulkUpdateStatus = async status => {
|
||||
const selectedIds = [...selectedArticleIds.value];
|
||||
const { portalSlug } = route.params;
|
||||
|
||||
const pendingIds = props.articles
|
||||
.filter(
|
||||
article =>
|
||||
selectedIds.includes(article.id) &&
|
||||
article.status === ARTICLE_STATUSES.PUBLISHED &&
|
||||
hasPendingChanges(article)
|
||||
)
|
||||
.map(article => article.id);
|
||||
|
||||
// Publish promotes each pending draft; other status changes skip them.
|
||||
const isPublishing = status === ARTICLE_STATUSES.PUBLISHED;
|
||||
const draftIds = isPublishing ? pendingIds : [];
|
||||
const skippedCount = isPublishing ? 0 : pendingIds.length;
|
||||
const articleIds = selectedIds.filter(id => !pendingIds.includes(id));
|
||||
|
||||
if (!articleIds.length && !draftIds.length) {
|
||||
useAlert(t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SKIPPED_ALL'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (articleIds.length) {
|
||||
await articlesAPI.bulkUpdateStatus({ portalSlug, articleIds, status });
|
||||
}
|
||||
await Promise.all(
|
||||
draftIds.map(articleId =>
|
||||
store.dispatch('articles/publishDraft', { portalSlug, articleId })
|
||||
)
|
||||
);
|
||||
await articlesAPI.bulkUpdateStatus({
|
||||
portalSlug: route.params.portalSlug,
|
||||
articleIds: [...selectedArticleIds.value],
|
||||
status,
|
||||
});
|
||||
onBulkActionSuccess(
|
||||
t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SUCCESS')
|
||||
);
|
||||
if (skippedCount) {
|
||||
useAlert(
|
||||
t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SKIPPED', skippedCount)
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
useAlert(
|
||||
error?.message || t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_ERROR')
|
||||
@@ -383,7 +343,7 @@ watch(
|
||||
</template>
|
||||
<template #content>
|
||||
<div
|
||||
v-if="isLoading && !isArticleDragging"
|
||||
v-if="isLoading"
|
||||
class="flex items-center justify-center py-10 text-n-slate-11"
|
||||
>
|
||||
<Spinner />
|
||||
@@ -493,13 +453,9 @@ watch(
|
||||
:is-category-articles="isCategoryArticles"
|
||||
:is-searching="isSearching"
|
||||
:selected-article-ids="selectedArticleIds"
|
||||
:current-page="Number(meta.currentPage)"
|
||||
:total-pages="totalPages"
|
||||
class="relative z-0"
|
||||
@translate-article="handleTranslateArticle"
|
||||
@toggle-select="handleToggleSelect"
|
||||
@navigate-page="handlePageChange"
|
||||
@dragging="isArticleDragging = $event"
|
||||
/>
|
||||
</template>
|
||||
<ArticleEmptyState
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import { ref } from 'vue';
|
||||
import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
|
||||
import LocaleContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleContentDialog.vue';
|
||||
import PopularContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/PopularContentDialog.vue';
|
||||
import { useStore } from 'dashboard/composables/store';
|
||||
import { useAlert, useTrack } from 'dashboard/composables';
|
||||
import { useUISettings } from 'dashboard/composables/useUISettings';
|
||||
@@ -27,7 +26,6 @@ const route = useRoute();
|
||||
const { uiSettings, updateUISettings } = useUISettings();
|
||||
|
||||
const contentDialogRef = ref(null);
|
||||
const popularContentDialogRef = ref(null);
|
||||
|
||||
const isLocaleDefault = code => {
|
||||
return props.portal?.meta?.default_locale === code;
|
||||
@@ -156,8 +154,6 @@ const handleAction = ({ action }, localeCode) => {
|
||||
publishLocale({ localeCode: localeCode });
|
||||
} else if (action === 'customize-content') {
|
||||
contentDialogRef.value.openForLocale(localeCode);
|
||||
} else if (action === 'select-popular-content') {
|
||||
popularContentDialogRef.value.openForLocale(localeCode);
|
||||
} else if (action === 'delete') {
|
||||
deletePortalLocale({ localeCode: localeCode });
|
||||
}
|
||||
@@ -178,6 +174,5 @@ const handleAction = ({ action }, localeCode) => {
|
||||
@action="handleAction($event, locale.code)"
|
||||
/>
|
||||
<LocaleContentDialog ref="contentDialogRef" :portal="portal" />
|
||||
<PopularContentDialog ref="popularContentDialogRef" :portal="portal" />
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
-235
@@ -1,235 +0,0 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import { useStore } from 'dashboard/composables/store';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useAbortableRequest } from 'dashboard/composables/useAbortableRequest';
|
||||
import categoriesAPI from 'dashboard/api/helpCenter/categories';
|
||||
import articlesAPI from 'dashboard/api/helpCenter/articles';
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
import ReorderableMultiSelect from 'dashboard/components-next/combobox/ReorderableMultiSelect.vue';
|
||||
|
||||
const props = defineProps({
|
||||
portal: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const MAX_CATEGORIES = 3;
|
||||
const MAX_ARTICLES = 6;
|
||||
const KEY = 'HELP_CENTER.LOCALES_PAGE.POPULAR_CONTENT_DIALOG';
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
|
||||
const dialogRef = ref(null);
|
||||
const activeLocale = ref('');
|
||||
// One flag per picker so each shows its skeleton until its own data loads.
|
||||
const categoriesLoading = ref(false);
|
||||
const { run: runArticleRequest, isPending: articlesLoading } =
|
||||
useAbortableRequest();
|
||||
|
||||
const categoryOptions = ref([]);
|
||||
const selectedCategoryIds = ref([]);
|
||||
|
||||
// Articles are searched server-side, so cache options for selected items that
|
||||
// fall outside the current results.
|
||||
const articleResults = ref([]);
|
||||
const articleOptionById = ref({});
|
||||
const selectedArticleIds = ref([]);
|
||||
|
||||
const popularContent = computed(
|
||||
() => props.portal?.config?.popular_content || {}
|
||||
);
|
||||
|
||||
const articleOptions = computed(() => {
|
||||
const options = new Map();
|
||||
selectedArticleIds.value.forEach(id => {
|
||||
if (articleOptionById.value[id])
|
||||
options.set(id, articleOptionById.value[id]);
|
||||
});
|
||||
articleResults.value.forEach(option => options.set(option.value, option));
|
||||
return [...options.values()];
|
||||
});
|
||||
|
||||
const toArticleOption = article => ({
|
||||
value: article.id,
|
||||
label: article.title,
|
||||
subtitle: t(`${KEY}.ARTICLES.IN_CATEGORY`, {
|
||||
category: article.category?.name || t(`${KEY}.ARTICLES.UNCATEGORIZED`),
|
||||
}),
|
||||
});
|
||||
|
||||
const fetchCategories = async localeCode => {
|
||||
const {
|
||||
data: { payload },
|
||||
} = await categoriesAPI.get({
|
||||
portalSlug: props.portal?.slug,
|
||||
locale: localeCode,
|
||||
});
|
||||
return payload.map(category => ({
|
||||
value: category.id,
|
||||
label: category.name,
|
||||
subtitle: t(`${KEY}.CATEGORIES.ARTICLES_COUNT`, {
|
||||
count: category.meta?.articles_count || 0,
|
||||
}),
|
||||
icon: category.icon,
|
||||
iconColor: category.icon_color,
|
||||
}));
|
||||
};
|
||||
|
||||
const requestArticles = async (query, signal) => {
|
||||
const { data } = await articlesAPI.getArticles({
|
||||
pageNumber: 1,
|
||||
portalSlug: props.portal?.slug,
|
||||
locale: activeLocale.value,
|
||||
status: 'published',
|
||||
query,
|
||||
signal,
|
||||
});
|
||||
articleResults.value = data.payload.map(article => {
|
||||
const option = toArticleOption(article);
|
||||
articleOptionById.value[article.id] = option;
|
||||
return option;
|
||||
});
|
||||
};
|
||||
|
||||
const searchArticles = (query = '') =>
|
||||
runArticleRequest(signal => requestArticles(query, signal));
|
||||
|
||||
const onArticleSearch = useDebounceFn(searchArticles, 300);
|
||||
|
||||
// Resolve options for pre-selected articles that aren't in the current results.
|
||||
const cacheSelectedArticleOptions = async () => {
|
||||
const unknownIds = selectedArticleIds.value.filter(
|
||||
id => !articleOptionById.value[id]
|
||||
);
|
||||
await Promise.all(
|
||||
unknownIds.map(async id => {
|
||||
try {
|
||||
const { data } = await articlesAPI.getArticle({
|
||||
id,
|
||||
portalSlug: props.portal?.slug,
|
||||
});
|
||||
articleOptionById.value[id] = toArticleOption(data.payload);
|
||||
} catch {
|
||||
// Deleted since it was picked; leave it for the id fallback.
|
||||
}
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const loadCategories = async localeCode => {
|
||||
categoriesLoading.value = true;
|
||||
try {
|
||||
const options = await fetchCategories(localeCode);
|
||||
// Reopened for another locale mid-flight; drop the stale response.
|
||||
if (localeCode !== activeLocale.value) return;
|
||||
categoryOptions.value = options;
|
||||
} catch (error) {
|
||||
useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
|
||||
} finally {
|
||||
if (localeCode === activeLocale.value) categoriesLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadArticles = async () => {
|
||||
try {
|
||||
await runArticleRequest(signal =>
|
||||
Promise.all([cacheSelectedArticleOptions(), requestArticles('', signal)])
|
||||
);
|
||||
} catch (error) {
|
||||
useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
|
||||
}
|
||||
};
|
||||
|
||||
const openForLocale = localeCode => {
|
||||
const existing = popularContent.value[localeCode] || {};
|
||||
activeLocale.value = localeCode;
|
||||
selectedCategoryIds.value = [...(existing.category_ids || [])];
|
||||
selectedArticleIds.value = [...(existing.article_ids || [])];
|
||||
categoryOptions.value = [];
|
||||
articleResults.value = [];
|
||||
articleOptionById.value = {};
|
||||
dialogRef.value?.open();
|
||||
|
||||
loadCategories(localeCode);
|
||||
loadArticles();
|
||||
};
|
||||
|
||||
const onConfirm = async () => {
|
||||
const updated = { ...popularContent.value };
|
||||
const entry = {
|
||||
category_ids: selectedCategoryIds.value,
|
||||
article_ids: selectedArticleIds.value,
|
||||
};
|
||||
|
||||
if (entry.category_ids.length || entry.article_ids.length) {
|
||||
updated[activeLocale.value] = entry;
|
||||
} else {
|
||||
delete updated[activeLocale.value];
|
||||
}
|
||||
|
||||
try {
|
||||
await store.dispatch('portals/update', {
|
||||
portalSlug: props.portal?.slug,
|
||||
config: { popular_content: updated },
|
||||
});
|
||||
dialogRef.value?.close();
|
||||
useAlert(t(`${KEY}.API.SUCCESS_MESSAGE`));
|
||||
} catch (error) {
|
||||
useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ openForLocale });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
ref="dialogRef"
|
||||
type="edit"
|
||||
:title="t(`${KEY}.TITLE`)"
|
||||
:description="t(`${KEY}.DESCRIPTION`)"
|
||||
:confirm-button-label="t(`${KEY}.CONFIRM`)"
|
||||
@confirm="onConfirm"
|
||||
>
|
||||
<div class="flex flex-col gap-5">
|
||||
<ReorderableMultiSelect
|
||||
v-model="selectedCategoryIds"
|
||||
:options="categoryOptions"
|
||||
:max="MAX_CATEGORIES"
|
||||
:label="t(`${KEY}.CATEGORIES.LABEL`)"
|
||||
:add-label="t(`${KEY}.ADD_ANOTHER`)"
|
||||
:search-placeholder="t(`${KEY}.SEARCH`)"
|
||||
:empty-state="t(`${KEY}.EMPTY`)"
|
||||
fallback-icon="i-lucide-folder"
|
||||
:loading="categoriesLoading"
|
||||
>
|
||||
<template #counter="{ remaining }">
|
||||
{{ t(`${KEY}.SLOTS_LEFT`, { count: remaining }) }}
|
||||
</template>
|
||||
<template #note>{{ t(`${KEY}.OVERRIDING_DEFAULTS`) }}</template>
|
||||
</ReorderableMultiSelect>
|
||||
<ReorderableMultiSelect
|
||||
v-model="selectedArticleIds"
|
||||
server-search
|
||||
:options="articleOptions"
|
||||
:max="MAX_ARTICLES"
|
||||
:label="t(`${KEY}.ARTICLES.LABEL`)"
|
||||
:add-label="t(`${KEY}.ADD_ANOTHER`)"
|
||||
:search-placeholder="t(`${KEY}.SEARCH`)"
|
||||
:empty-state="t(`${KEY}.EMPTY`)"
|
||||
:loading="articlesLoading"
|
||||
@search="onArticleSearch"
|
||||
>
|
||||
<template #counter="{ remaining }">
|
||||
{{ t(`${KEY}.SLOTS_LEFT`, { count: remaining }) }}
|
||||
</template>
|
||||
<template #note>{{ t(`${KEY}.OVERRIDING_DEFAULTS`) }}</template>
|
||||
</ReorderableMultiSelect>
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -49,8 +49,8 @@ const isUnread = computed(() => !props.inboxItem?.readAt);
|
||||
const inbox = computed(() => props.stateInbox);
|
||||
|
||||
const inboxIcon = computed(() => {
|
||||
const { channelType, medium, voiceEnabled } = inbox.value;
|
||||
return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
|
||||
const { channelType, medium } = inbox.value;
|
||||
return getInboxIconByType(channelType, medium);
|
||||
});
|
||||
|
||||
const hasSlaThreshold = computed(() => {
|
||||
|
||||
@@ -234,7 +234,6 @@ onMounted(() => resetContacts());
|
||||
ref="popoverRef"
|
||||
:align="align"
|
||||
:show-content-border="false"
|
||||
:close-on-scroll="false"
|
||||
@show="onPopoverShow"
|
||||
@hide="onPopoverHide"
|
||||
>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user