Merge branch 'develop' into feat/captain-audience-schedule
This commit is contained in:
Pranav
@@ -14,6 +14,10 @@ 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`);
|
||||
}
|
||||
@@ -27,6 +31,11 @@ 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();
|
||||
|
||||
@@ -31,6 +31,42 @@ 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`, {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
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);
|
||||
@@ -11,6 +13,7 @@ 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');
|
||||
@@ -42,11 +45,14 @@ 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: -0,
|
||||
timezone_offset: timezoneOffset(),
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -59,13 +65,70 @@ describe('#Reports API', () => {
|
||||
group_by: undefined,
|
||||
id: undefined,
|
||||
since: 1621103400,
|
||||
timezone_offset: -0,
|
||||
timezone_offset: timezoneOffset(),
|
||||
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,
|
||||
|
||||
+7
-1
@@ -16,6 +16,10 @@ const props = defineProps({
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
contact: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
@@ -49,7 +53,9 @@ const unreadMessagesCount = computed(() => {
|
||||
|
||||
const hasSlaThreshold = computed(() => {
|
||||
return (
|
||||
slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
|
||||
!props.contact?.blocked &&
|
||||
slaCardLabelRef.value?.hasSlaThreshold &&
|
||||
props.conversation?.appliedSla?.id
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
+1
@@ -126,6 +126,7 @@ const onCardClick = e => {
|
||||
v-show="!showMessagePreviewWithoutMeta"
|
||||
ref="cardMessagePreviewWithMetaRef"
|
||||
:conversation="conversation"
|
||||
:contact="contact"
|
||||
:account-labels="accountLabels"
|
||||
/>
|
||||
</div>
|
||||
|
||||
+3
-1
@@ -51,7 +51,9 @@ const unreadCount = computed(() => props.chat.unread_count);
|
||||
const slaCardLabel = useTemplateRef('slaCardLabel');
|
||||
|
||||
const hasSlaPolicyId = computed(
|
||||
() => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
|
||||
() =>
|
||||
!props.currentContact?.blocked &&
|
||||
(props.chat?.applied_sla?.id || slaCardLabel.value?.hasSlaThreshold)
|
||||
);
|
||||
|
||||
const selectedModel = computed({
|
||||
|
||||
+4
-11
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { evaluateSLAStatus } from '@chatwoot/utils';
|
||||
import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
|
||||
|
||||
const props = defineProps({
|
||||
conversation: {
|
||||
@@ -19,16 +19,8 @@ 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(() => {
|
||||
@@ -41,8 +33,9 @@ const slaStatusText = computed(() => {
|
||||
|
||||
const updateSlaStatus = () => {
|
||||
slaStatus.value = evaluateSLAStatus({
|
||||
appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value || {}),
|
||||
appliedSla: 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 '@chatwoot/utils';
|
||||
import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
|
||||
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import Label from 'dashboard/components-next/label/Label.vue';
|
||||
@@ -27,6 +27,7 @@ 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);
|
||||
|
||||
@@ -34,6 +35,7 @@ const updateSlaStatus = () => {
|
||||
slaStatus.value = evaluateSLAStatus({
|
||||
appliedSla: appliedSLA.value || {},
|
||||
chat: props.chat,
|
||||
slaEvents: slaEvents.value || [],
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
+378
@@ -0,0 +1,378 @@
|
||||
<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
@@ -0,0 +1,222 @@
|
||||
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]]);
|
||||
});
|
||||
});
|
||||
+68
-72
@@ -1,6 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import Draggable from 'vuedraggable';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useMapGetter, useStore } from 'dashboard/composables/store.js';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
@@ -10,6 +9,7 @@ import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
|
||||
import wootConstants from 'dashboard/constants/globals';
|
||||
|
||||
import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
|
||||
import DraggableReorderList from 'dashboard/components-next/DraggableReorderList/DraggableReorderList.vue';
|
||||
|
||||
const props = defineProps({
|
||||
articles: {
|
||||
@@ -28,9 +28,22 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
totalPages: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['translateArticle', 'toggleSelect']);
|
||||
const emit = defineEmits([
|
||||
'translateArticle',
|
||||
'toggleSelect',
|
||||
'navigatePage',
|
||||
'dragging',
|
||||
]);
|
||||
|
||||
const { ARTICLE_STATUS_TYPES } = wootConstants;
|
||||
|
||||
@@ -39,14 +52,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 &&
|
||||
localArticles.value?.length > 1 &&
|
||||
canReorder &&
|
||||
props.selectedArticleIds.size === 0
|
||||
);
|
||||
});
|
||||
@@ -63,6 +76,10 @@ 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) {
|
||||
@@ -83,38 +100,25 @@ const openArticle = id => {
|
||||
}
|
||||
};
|
||||
|
||||
const onReorder = async reorderedGroup => {
|
||||
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
|
||||
);
|
||||
try {
|
||||
await store.dispatch('articles/reorder', {
|
||||
reorderedGroup,
|
||||
reorderedGroup: positionsHash,
|
||||
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 = {
|
||||
@@ -184,54 +188,46 @@ 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>
|
||||
<Draggable
|
||||
v-model="localArticles"
|
||||
<DraggableReorderList
|
||||
:items="articles"
|
||||
:disabled="!dragEnabled"
|
||||
item-key="id"
|
||||
tag="ul"
|
||||
ghost-class="article-ghost-class"
|
||||
class="w-full h-full space-y-4"
|
||||
@end="onDragEnd"
|
||||
:current-page="currentPage"
|
||||
:total-pages="totalPages"
|
||||
@reorder="onReorder"
|
||||
@navigate-page="page => emit('navigatePage', page)"
|
||||
@dragging="value => emit('dragging', value)"
|
||||
>
|
||||
<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 #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)"
|
||||
selectable
|
||||
:show-selection-control="shouldShowSelectionControl(item.id)"
|
||||
@open-article="openArticle"
|
||||
@article-action="updateArticle"
|
||||
@toggle-select="emit('toggleSelect', $event)"
|
||||
@hover="isHovered => handleCardHover(isHovered, item.id)"
|
||||
/>
|
||||
</template>
|
||||
</Draggable>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-ghost-class {
|
||||
@apply opacity-50 bg-n-solid-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
+8
-1
@@ -70,6 +70,7 @@ 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 || '');
|
||||
@@ -148,6 +149,8 @@ const articlesCount = computed(() => {
|
||||
return Number(countMap[tab] || countMap['']);
|
||||
});
|
||||
|
||||
const totalPages = computed(() => Math.ceil(articlesCount.value / 25) || 1);
|
||||
|
||||
const showArticleHeaderControls = computed(
|
||||
() => !props.isCategoryArticles && !isSwitchingPortal.value
|
||||
);
|
||||
@@ -343,7 +346,7 @@ watch(
|
||||
</template>
|
||||
<template #content>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
v-if="isLoading && !isArticleDragging"
|
||||
class="flex items-center justify-center py-10 text-n-slate-11"
|
||||
>
|
||||
<Spinner />
|
||||
@@ -453,9 +456,13 @@ 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
|
||||
|
||||
@@ -123,6 +123,10 @@ onMounted(() => {
|
||||
a {
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
.ProseMirror a {
|
||||
@apply p-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,7 +57,9 @@ const showMetaSection = computed(() => {
|
||||
);
|
||||
});
|
||||
|
||||
const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
|
||||
const hasSlaPolicyId = computed(
|
||||
() => props.chat?.applied_sla?.id && !props.currentContact?.blocked
|
||||
);
|
||||
|
||||
const showLabelsSection = computed(() => {
|
||||
return props.chat.labels?.length > 0 || hasSlaPolicyId.value;
|
||||
|
||||
@@ -93,7 +93,9 @@ const hasMultipleInboxes = computed(
|
||||
() => store.getters['inboxes/getInboxes'].length > 1
|
||||
);
|
||||
|
||||
const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
|
||||
const hasSlaPolicyId = computed(
|
||||
() => props.chat?.applied_sla?.id && !currentContact.value?.blocked
|
||||
);
|
||||
|
||||
const copyConversationId = async () => {
|
||||
try {
|
||||
|
||||
+2
-1
@@ -1,7 +1,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { evaluateSLAStatus } from '@chatwoot/utils';
|
||||
import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
|
||||
import SLAPopoverCard from './SLAPopoverCard.vue';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -61,6 +61,7 @@ const updateSlaStatus = () => {
|
||||
slaStatus.value = evaluateSLAStatus({
|
||||
appliedSla: appliedSLA.value,
|
||||
chat: props.chat,
|
||||
slaEvents: slaEvents.value || [],
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import ConversationCard from '../ConversationCard.vue';
|
||||
|
||||
const defaultChat = {
|
||||
id: 1,
|
||||
labels: [],
|
||||
messages: [],
|
||||
priority: null,
|
||||
unread_count: 0,
|
||||
timestamp: 1700000000,
|
||||
created_at: 1700000000,
|
||||
};
|
||||
|
||||
const mountComponent = (chat, currentContact = {}) =>
|
||||
shallowMount(ConversationCard, {
|
||||
props: {
|
||||
chat: { ...defaultChat, ...chat },
|
||||
currentContact: {
|
||||
name: 'Jane Doe',
|
||||
thumbnail: '',
|
||||
availability_status: 'offline',
|
||||
...currentContact,
|
||||
},
|
||||
inbox: { id: 1 },
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
'fluent-icon': true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
describe('ConversationCard', () => {
|
||||
it('does not reserve the labels row when only a persisted SLA policy id is present', () => {
|
||||
const wrapper = mountComponent({ sla_policy_id: 1, applied_sla: null });
|
||||
|
||||
expect(wrapper.findComponent({ name: 'CardLabels' }).exists()).toBe(false);
|
||||
});
|
||||
|
||||
it('shows the labels row when an active applied SLA is present', () => {
|
||||
const wrapper = mountComponent({
|
||||
sla_policy_id: 1,
|
||||
applied_sla: { id: 1 },
|
||||
});
|
||||
|
||||
expect(wrapper.findComponent({ name: 'CardLabels' }).exists()).toBe(true);
|
||||
});
|
||||
|
||||
it('does not reserve the labels row when the contact is blocked', () => {
|
||||
const wrapper = mountComponent(
|
||||
{
|
||||
sla_policy_id: 1,
|
||||
applied_sla: { id: 1 },
|
||||
},
|
||||
{ blocked: true }
|
||||
);
|
||||
|
||||
expect(wrapper.findComponent({ name: 'CardLabels' }).exists()).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -161,6 +161,7 @@ const buildCallActions = ({ callsStore, whatsappSession, t }) => {
|
||||
return { conferenceSid: joinResponse?.conference_sid };
|
||||
} catch (error) {
|
||||
useAlert(error?.response?.data?.error || t('CONTACT_PANEL.CALL_FAILED'));
|
||||
// 409 = the call already ended before accept landed (e.g. caller hung up mid-ring).
|
||||
if (error?.response?.status === 409) {
|
||||
TwilioVoiceClient.endClientCall();
|
||||
markDismissed(callSid);
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
// Single source of truth for billing currencies on the frontend.
|
||||
// Adding a currency = one entry in BILLING_CURRENCY_CONFIG, add the code to
|
||||
// SUPPORTED_BILLING_CURRENCIES, and add its label key under
|
||||
// BILLING_SETTINGS.CURRENCY.OPTIONS in the locale files.
|
||||
|
||||
export const DEFAULT_BILLING_CURRENCY = 'usd';
|
||||
|
||||
// Order here drives the order of the currency toggle in the UI.
|
||||
export const SUPPORTED_BILLING_CURRENCIES = ['usd', 'brl'];
|
||||
|
||||
export const BILLING_CURRENCY_CONFIG = {
|
||||
usd: {
|
||||
code: 'usd',
|
||||
intlLocale: 'en-US',
|
||||
i18nLabelKey: 'BILLING_SETTINGS.CURRENCY.OPTIONS.USD',
|
||||
},
|
||||
brl: {
|
||||
code: 'brl',
|
||||
intlLocale: 'pt-BR',
|
||||
i18nLabelKey: 'BILLING_SETTINGS.CURRENCY.OPTIONS.BRL',
|
||||
},
|
||||
};
|
||||
|
||||
export const getCurrencyConfig = code =>
|
||||
BILLING_CURRENCY_CONFIG[(code || DEFAULT_BILLING_CURRENCY).toLowerCase()] ||
|
||||
BILLING_CURRENCY_CONFIG[DEFAULT_BILLING_CURRENCY];
|
||||
|
||||
export const formatCurrencyAmount = (amount, code, options = {}) => {
|
||||
const { intlLocale, code: currencyCode } = getCurrencyConfig(code);
|
||||
return new Intl.NumberFormat(intlLocale, {
|
||||
style: 'currency',
|
||||
currency: currencyCode.toUpperCase(),
|
||||
...options,
|
||||
}).format(amount);
|
||||
};
|
||||
@@ -188,6 +188,16 @@ export const ARTICLE_EDITOR_MENU_OPTIONS = [
|
||||
'insertTable',
|
||||
];
|
||||
|
||||
// [text](url) -> "text: url" (drop label if it equals the URL). Keep serializer
|
||||
// escapes; the re-parse renders them literally, unescaping would crash it.
|
||||
const flattenLink = (_match, text, url) => {
|
||||
const cleanUrl = url
|
||||
.trim()
|
||||
.replace(/\s+["'(].*$/, '')
|
||||
.replace(/^<|>$/g, '');
|
||||
return text === cleanUrl ? cleanUrl : `${text}: ${cleanUrl}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Markdown formatting patterns for stripping unsupported formatting.
|
||||
*
|
||||
@@ -264,7 +274,12 @@ export const MARKDOWN_PATTERNS = [
|
||||
{
|
||||
type: 'link', // PM: link
|
||||
patterns: [
|
||||
{ pattern: /\[([^\]]+)\]\([^)]+\)/g, replacement: '$1' }, // [text](url) -> text
|
||||
// Escape-aware label + URL captures so a \] or \) can't cut the match
|
||||
// short and leave link markup that crashes the re-parse.
|
||||
{
|
||||
pattern: /\[((?:\\.|[^\]\\])*)\]\(((?:\\.|[^)\\])*)\)/g,
|
||||
replacement: flattenLink,
|
||||
},
|
||||
{ pattern: /<([a-zA-Z][a-zA-Z0-9+.-]*:[^\s>]+)>/g, replacement: '$1' }, // <https://...>, <mailto:...>, <tel:...>, <ftp://...>, etc
|
||||
{ pattern: /<([^\s@]+@[^\s@>]+)>/g, replacement: '$1' }, // <user@example.com> -> user@example.com
|
||||
],
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
import { useCamelCase } from 'dashboard/composables/useTransformKeys';
|
||||
|
||||
/**
|
||||
* Formats seconds into a human-readable time string
|
||||
* @param {number} seconds - The time in seconds (can be negative for overdue)
|
||||
* @returns {string} Formatted time string like "2h 30m" or "1d 4h"
|
||||
*/
|
||||
const formatSLATime = seconds => {
|
||||
const absSeconds = Math.abs(seconds);
|
||||
|
||||
const units = {
|
||||
y: 31536000,
|
||||
mo: 2592000,
|
||||
d: 86400,
|
||||
h: 3600,
|
||||
m: 60,
|
||||
};
|
||||
|
||||
if (absSeconds < 60) {
|
||||
return '1m';
|
||||
}
|
||||
|
||||
const parts = [];
|
||||
let remaining = absSeconds;
|
||||
|
||||
Object.entries(units).forEach(([unit, value]) => {
|
||||
if (parts.length >= 2) return;
|
||||
const count = Math.floor(remaining / value);
|
||||
if (count > 0) {
|
||||
parts.push(`${count}${unit}`);
|
||||
remaining -= count * value;
|
||||
}
|
||||
});
|
||||
|
||||
return parts.join(' ');
|
||||
};
|
||||
|
||||
const toUnixTimestamp = value => {
|
||||
if (!value || typeof value === 'number') return value;
|
||||
|
||||
const numericValue = Number(value);
|
||||
if (!Number.isNaN(numericValue)) return numericValue;
|
||||
|
||||
const parsedTimestamp = Date.parse(value);
|
||||
return Number.isNaN(parsedTimestamp)
|
||||
? value
|
||||
: Math.floor(parsedTimestamp / 1000);
|
||||
};
|
||||
|
||||
/**
|
||||
* Evaluates SLA status using backend-computed due times
|
||||
* @param {Object} params - Parameters object
|
||||
* @param {Object} params.appliedSla - The applied SLA with due_at timestamps
|
||||
* @param {Object} params.chat - The conversation object
|
||||
* @param {Array} params.slaEvents - Recorded SLA miss events for this conversation
|
||||
* @returns {Object} SLA status with type, threshold, icon, and isSlaMissed
|
||||
*/
|
||||
export const evaluateSLAStatus = ({ appliedSla, chat, slaEvents = [] }) => {
|
||||
const emptyStatus = { type: '', threshold: '', icon: '', isSlaMissed: false };
|
||||
|
||||
if (!appliedSla || !chat) {
|
||||
return emptyStatus;
|
||||
}
|
||||
|
||||
const sla = useCamelCase(appliedSla);
|
||||
const conversation = useCamelCase(chat);
|
||||
const events = useCamelCase(slaEvents || []);
|
||||
const currentTime = Math.floor(Date.now() / 1000);
|
||||
const slaStatuses = [];
|
||||
|
||||
const dueAtByType = {
|
||||
FRT: sla.slaFrtDueAt,
|
||||
RT: sla.slaRtDueAt,
|
||||
};
|
||||
const slaTypes = ['FRT', 'NRT', 'RT'];
|
||||
|
||||
events.forEach(event => {
|
||||
const type = event.eventType?.toUpperCase();
|
||||
if (!slaTypes.includes(type)) return;
|
||||
|
||||
const missedAt =
|
||||
type === 'NRT' ? event.createdAt : dueAtByType[type] || event.createdAt;
|
||||
if (!missedAt) return;
|
||||
|
||||
slaStatuses.push({
|
||||
type,
|
||||
threshold: missedAt - currentTime,
|
||||
icon: 'flame',
|
||||
isSlaMissed: true,
|
||||
});
|
||||
});
|
||||
|
||||
const firstReplyCreatedAt = toUnixTimestamp(conversation.firstReplyCreatedAt);
|
||||
const shouldCheckFirstResponse =
|
||||
!firstReplyCreatedAt || firstReplyCreatedAt > sla.slaFrtDueAt;
|
||||
|
||||
// Check FRT - until first reply is made on time
|
||||
if (sla.slaFrtDueAt && shouldCheckFirstResponse) {
|
||||
const threshold = sla.slaFrtDueAt - currentTime;
|
||||
slaStatuses.push({
|
||||
type: 'FRT',
|
||||
threshold,
|
||||
icon: threshold <= 0 ? 'flame' : 'alarm',
|
||||
isSlaMissed: threshold <= 0,
|
||||
});
|
||||
}
|
||||
|
||||
// Check NRT - only if first reply made and waiting for response
|
||||
if (sla.slaNrtDueAt && firstReplyCreatedAt && conversation.waitingSince) {
|
||||
const threshold = sla.slaNrtDueAt - currentTime;
|
||||
slaStatuses.push({
|
||||
type: 'NRT',
|
||||
threshold,
|
||||
icon: threshold <= 0 ? 'flame' : 'alarm',
|
||||
isSlaMissed: threshold <= 0,
|
||||
});
|
||||
}
|
||||
|
||||
// Check RT - only if conversation is unresolved
|
||||
if (sla.slaRtDueAt && conversation.status !== 'resolved') {
|
||||
const threshold = sla.slaRtDueAt - currentTime;
|
||||
slaStatuses.push({
|
||||
type: 'RT',
|
||||
threshold,
|
||||
icon: threshold <= 0 ? 'flame' : 'alarm',
|
||||
isSlaMissed: threshold <= 0,
|
||||
});
|
||||
}
|
||||
|
||||
if (slaStatuses.length === 0) {
|
||||
return emptyStatus;
|
||||
}
|
||||
|
||||
// Show existing breaches before upcoming deadlines, then pick the closest timer.
|
||||
slaStatuses.sort((a, b) => {
|
||||
if (a.isSlaMissed !== b.isSlaMissed) {
|
||||
return a.isSlaMissed ? -1 : 1;
|
||||
}
|
||||
|
||||
return Math.abs(a.threshold) - Math.abs(b.threshold);
|
||||
});
|
||||
const mostUrgent = slaStatuses[0];
|
||||
|
||||
return {
|
||||
type: mostUrgent.type,
|
||||
threshold: formatSLATime(mostUrgent.threshold),
|
||||
icon: mostUrgent.icon,
|
||||
isSlaMissed: mostUrgent.isSlaMissed,
|
||||
};
|
||||
};
|
||||
@@ -1,4 +1,9 @@
|
||||
import { EditorState, EditorView } from '@chatwoot/prosemirror-schema';
|
||||
import {
|
||||
EditorState,
|
||||
EditorView,
|
||||
buildMessageSchema,
|
||||
MessageMarkdownTransformer,
|
||||
} from '@chatwoot/prosemirror-schema';
|
||||
import { FORMATTING } from 'dashboard/constants/editor';
|
||||
import { Schema } from 'prosemirror-model';
|
||||
import {
|
||||
@@ -978,13 +983,77 @@ describe('stripUnsupportedFormatting', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('strips links but keeps text', () => {
|
||||
it('keeps link text and URL when schema does not support links', () => {
|
||||
expect(
|
||||
stripUnsupportedFormatting(
|
||||
'Check [this link](https://example.com)',
|
||||
emptySchema
|
||||
)
|
||||
).toBe('Check this link');
|
||||
).toBe('Check this link: https://example.com');
|
||||
});
|
||||
|
||||
it('drops the hidden link title when preserving the URL', () => {
|
||||
expect(
|
||||
stripUnsupportedFormatting(
|
||||
'Check [docs](https://example.com "Docs")',
|
||||
emptySchema
|
||||
)
|
||||
).toBe('Check docs: https://example.com');
|
||||
|
||||
expect(
|
||||
stripUnsupportedFormatting(
|
||||
'Check [docs](<https://example.com> "Docs")',
|
||||
emptySchema
|
||||
)
|
||||
).toBe('Check docs: https://example.com');
|
||||
});
|
||||
|
||||
// Output is re-parsed before sending, so assert the final text
|
||||
// (strip + re-parse); the re-parse turns serializer escapes into literals.
|
||||
describe('links round-trip through re-parse without crashing', () => {
|
||||
const smsSchema = buildMessageSchema([], []); // no marks, no nodes
|
||||
const sendAs = md =>
|
||||
new MessageMarkdownTransformer(smsSchema).parse(
|
||||
stripUnsupportedFormatting(md, smsSchema)
|
||||
).textContent;
|
||||
|
||||
it('keeps escaped parens/underscores anywhere in the URL', () => {
|
||||
expect(
|
||||
sendAs('See [wiki](https://en.wikipedia.org/wiki/Foo\\_\\(bar\\))')
|
||||
).toBe('See wiki: https://en.wikipedia.org/wiki/Foo_(bar)');
|
||||
expect(sendAs('See [wiki](https://host/a\\_\\(b\\)c)')).toBe(
|
||||
'See wiki: https://host/a_(b)c'
|
||||
);
|
||||
});
|
||||
|
||||
it('drops the label when it equals the URL even when escaped', () => {
|
||||
expect(
|
||||
sendAs(
|
||||
'[www.example.com/Foo\\_\\(bar\\)](www.example.com/Foo\\_\\(bar\\))'
|
||||
)
|
||||
).toBe('www.example.com/Foo_(bar)');
|
||||
});
|
||||
|
||||
it('does not reintroduce emphasis from an escaped label', () => {
|
||||
expect(sendAs('[Use \\_id\\_](https://example.com)')).toBe(
|
||||
'Use _id_: https://example.com'
|
||||
);
|
||||
});
|
||||
|
||||
it('flattens a label containing an escaped closing bracket', () => {
|
||||
expect(sendAs('[FAQ \\[v2\\]](https://example.com)')).toBe(
|
||||
'FAQ [v2]: https://example.com'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('leaves bare URLs untouched so channels can auto-link them', () => {
|
||||
expect(
|
||||
stripUnsupportedFormatting('Visit www.example.com now', emptySchema)
|
||||
).toBe('Visit www.example.com now');
|
||||
expect(
|
||||
stripUnsupportedFormatting('Visit <https://example.com>', emptySchema)
|
||||
).toBe('Visit https://example.com');
|
||||
});
|
||||
|
||||
it('converts autolinks to plain URLs when schema does not support links', () => {
|
||||
@@ -1049,7 +1118,7 @@ describe('stripUnsupportedFormatting', () => {
|
||||
it('handles complex content with multiple formatting types', () => {
|
||||
const content =
|
||||
'**Bold** and *italic* with `code` and [link](url)\n- list item';
|
||||
const expected = 'Bold and italic with code and link\nlist item';
|
||||
const expected = 'Bold and italic with code and link: url\nlist item';
|
||||
expect(stripUnsupportedFormatting(content, emptySchema)).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,450 @@
|
||||
import { evaluateSLAStatus } from '../slaHelper';
|
||||
|
||||
describe('#SLA Helpers', () => {
|
||||
const currentTimestamp = 1700000000; // Fixed timestamp for testing
|
||||
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
vi.setSystemTime(currentTimestamp * 1000);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
describe('evaluateSLAStatus', () => {
|
||||
describe('when inputs are invalid', () => {
|
||||
it('returns empty status when appliedSla is null', () => {
|
||||
const result = evaluateSLAStatus({ appliedSla: null, chat: {} });
|
||||
expect(result).toEqual({
|
||||
type: '',
|
||||
threshold: '',
|
||||
icon: '',
|
||||
isSlaMissed: false,
|
||||
});
|
||||
});
|
||||
|
||||
it('returns empty status when chat is null', () => {
|
||||
const result = evaluateSLAStatus({ appliedSla: {}, chat: null });
|
||||
expect(result).toEqual({
|
||||
type: '',
|
||||
threshold: '',
|
||||
icon: '',
|
||||
isSlaMissed: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('FRT (First Response Time)', () => {
|
||||
it('returns FRT status when first reply not made and within threshold', () => {
|
||||
const appliedSla = { sla_frt_due_at: currentTimestamp + 3600 }; // 1 hour from now
|
||||
const chat = { first_reply_created_at: null, status: 'open' };
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('FRT');
|
||||
expect(result.threshold).toBe('1h');
|
||||
expect(result.icon).toBe('alarm');
|
||||
expect(result.isSlaMissed).toBe(false);
|
||||
});
|
||||
|
||||
it('returns missed FRT status when threshold is exceeded', () => {
|
||||
const appliedSla = { sla_frt_due_at: currentTimestamp - 1800 }; // 30 min ago
|
||||
const chat = { first_reply_created_at: null, status: 'open' };
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('FRT');
|
||||
expect(result.threshold).toBe('30m');
|
||||
expect(result.icon).toBe('flame');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
|
||||
it('does not return FRT when first reply was made before due time', () => {
|
||||
const appliedSla = { sla_frt_due_at: currentTimestamp + 3600 };
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 1000,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).not.toBe('FRT');
|
||||
});
|
||||
|
||||
it('does not return FRT when first reply was made at due time', () => {
|
||||
const appliedSla = {
|
||||
sla_frt_due_at: currentTimestamp - 600,
|
||||
sla_rt_due_at: currentTimestamp + 1800,
|
||||
};
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 600,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('RT');
|
||||
});
|
||||
|
||||
it('returns missed FRT when first reply was made after due time', () => {
|
||||
const appliedSla = {
|
||||
sla_frt_due_at: currentTimestamp - 600,
|
||||
sla_rt_due_at: currentTimestamp + 1800,
|
||||
};
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 300,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('FRT');
|
||||
expect(result.threshold).toBe('10m');
|
||||
expect(result.icon).toBe('flame');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
|
||||
it('returns missed FRT when live first reply timestamp is an ISO string after due time', () => {
|
||||
const appliedSla = {
|
||||
sla_frt_due_at: currentTimestamp - 600,
|
||||
sla_rt_due_at: currentTimestamp + 1800,
|
||||
};
|
||||
const chat = {
|
||||
first_reply_created_at: new Date(
|
||||
(currentTimestamp - 300) * 1000
|
||||
).toISOString(),
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('FRT');
|
||||
expect(result.threshold).toBe('10m');
|
||||
expect(result.icon).toBe('flame');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
|
||||
it('uses the due time for a missed FRT event created after the deadline', () => {
|
||||
const appliedSla = { sla_frt_due_at: currentTimestamp - 3600 };
|
||||
const chat = { first_reply_created_at: null, status: 'open' };
|
||||
const slaEvents = [
|
||||
{ event_type: 'frt', created_at: currentTimestamp - 1800 },
|
||||
];
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat, slaEvents });
|
||||
|
||||
expect(result.type).toBe('FRT');
|
||||
expect(result.threshold).toBe('1h');
|
||||
expect(result.icon).toBe('flame');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('NRT (Next Response Time)', () => {
|
||||
it('returns NRT status when waiting for response and within threshold', () => {
|
||||
const appliedSla = { sla_nrt_due_at: currentTimestamp + 1800 }; // 30 min from now
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 7200,
|
||||
waiting_since: currentTimestamp - 600,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('NRT');
|
||||
expect(result.threshold).toBe('30m');
|
||||
expect(result.icon).toBe('alarm');
|
||||
expect(result.isSlaMissed).toBe(false);
|
||||
});
|
||||
|
||||
it('returns missed NRT status when threshold is exceeded', () => {
|
||||
const appliedSla = { sla_nrt_due_at: currentTimestamp - 900 }; // 15 min ago
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 7200,
|
||||
waiting_since: currentTimestamp - 2700,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('NRT');
|
||||
expect(result.threshold).toBe('15m');
|
||||
expect(result.icon).toBe('flame');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
|
||||
it('does not return NRT when not waiting for response', () => {
|
||||
const appliedSla = { sla_nrt_due_at: currentTimestamp + 1800 };
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 7200,
|
||||
waiting_since: null,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).not.toBe('NRT');
|
||||
});
|
||||
|
||||
it('returns missed NRT when a recorded NRT miss exists after response', () => {
|
||||
const appliedSla = { sla_rt_due_at: currentTimestamp + 1800 };
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 7200,
|
||||
waiting_since: null,
|
||||
status: 'open',
|
||||
};
|
||||
const slaEvents = [
|
||||
{ event_type: 'nrt', created_at: currentTimestamp - 900 },
|
||||
];
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat, slaEvents });
|
||||
|
||||
expect(result.type).toBe('NRT');
|
||||
expect(result.threshold).toBe('15m');
|
||||
expect(result.icon).toBe('flame');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
|
||||
it('uses the recorded event time for a missed NRT with a new active NRT timer', () => {
|
||||
const appliedSla = {
|
||||
sla_nrt_due_at: currentTimestamp + 300,
|
||||
sla_rt_due_at: currentTimestamp + 1800,
|
||||
};
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 7200,
|
||||
waiting_since: currentTimestamp - 60,
|
||||
status: 'open',
|
||||
};
|
||||
const slaEvents = [
|
||||
{ event_type: 'nrt', created_at: currentTimestamp - 1800 },
|
||||
];
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat, slaEvents });
|
||||
|
||||
expect(result.type).toBe('NRT');
|
||||
expect(result.threshold).toBe('30m');
|
||||
expect(result.icon).toBe('flame');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
|
||||
it('does not return NRT when first reply not made', () => {
|
||||
const appliedSla = { sla_nrt_due_at: currentTimestamp + 1800 };
|
||||
const chat = {
|
||||
first_reply_created_at: null,
|
||||
waiting_since: currentTimestamp - 600,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).not.toBe('NRT');
|
||||
});
|
||||
});
|
||||
|
||||
describe('RT (Resolution Time)', () => {
|
||||
it('returns RT status when conversation is open and within threshold', () => {
|
||||
const appliedSla = { sla_rt_due_at: currentTimestamp + 7200 }; // 2 hours from now
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 3600,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('RT');
|
||||
expect(result.threshold).toBe('2h');
|
||||
expect(result.icon).toBe('alarm');
|
||||
expect(result.isSlaMissed).toBe(false);
|
||||
});
|
||||
|
||||
it.each(['pending', 'snoozed'])(
|
||||
'returns RT status when conversation is %s and within threshold',
|
||||
status => {
|
||||
const appliedSla = { sla_rt_due_at: currentTimestamp + 7200 };
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 3600,
|
||||
status,
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('RT');
|
||||
expect(result.threshold).toBe('2h');
|
||||
expect(result.icon).toBe('alarm');
|
||||
expect(result.isSlaMissed).toBe(false);
|
||||
}
|
||||
);
|
||||
|
||||
it('returns missed RT status when threshold is exceeded', () => {
|
||||
const appliedSla = { sla_rt_due_at: currentTimestamp - 3600 }; // 1 hour ago
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 7200,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('RT');
|
||||
expect(result.threshold).toBe('1h');
|
||||
expect(result.icon).toBe('flame');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
|
||||
it('uses the due time for a missed RT event created after the deadline', () => {
|
||||
const appliedSla = { sla_rt_due_at: currentTimestamp - 3600 };
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 7200,
|
||||
status: 'open',
|
||||
};
|
||||
const slaEvents = [
|
||||
{ event_type: 'rt', created_at: currentTimestamp - 1800 },
|
||||
];
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat, slaEvents });
|
||||
|
||||
expect(result.type).toBe('RT');
|
||||
expect(result.threshold).toBe('1h');
|
||||
expect(result.icon).toBe('flame');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
|
||||
it('does not return RT when conversation is resolved', () => {
|
||||
const appliedSla = { sla_rt_due_at: currentTimestamp + 7200 };
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 3600,
|
||||
status: 'resolved',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
describe('priority selection', () => {
|
||||
it('returns most urgent SLA when multiple are active', () => {
|
||||
const appliedSla = {
|
||||
sla_frt_due_at: currentTimestamp + 7200, // 2h - less urgent
|
||||
sla_nrt_due_at: currentTimestamp + 1800, // 30m - most urgent
|
||||
sla_rt_due_at: currentTimestamp + 3600, // 1h
|
||||
};
|
||||
const chat = {
|
||||
first_reply_created_at: null,
|
||||
waiting_since: currentTimestamp - 600,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
// FRT is selected because first_reply_created_at is null
|
||||
// NRT is not checked when first_reply_created_at is null
|
||||
expect(result.type).toBe('RT');
|
||||
expect(result.threshold).toBe('1h');
|
||||
});
|
||||
|
||||
it('returns most urgent missed SLA over upcoming SLA', () => {
|
||||
const appliedSla = {
|
||||
sla_nrt_due_at: currentTimestamp - 300, // 5m overdue - most urgent by absolute value
|
||||
sla_rt_due_at: currentTimestamp + 3600, // 1h remaining
|
||||
};
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 7200,
|
||||
waiting_since: currentTimestamp - 2100,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('NRT');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
|
||||
it('returns an existing missed SLA over a closer upcoming SLA', () => {
|
||||
const appliedSla = {
|
||||
sla_frt_due_at: currentTimestamp - 7200, // 2h overdue
|
||||
sla_rt_due_at: currentTimestamp + 300, // 5m remaining
|
||||
};
|
||||
const chat = {
|
||||
first_reply_created_at: null,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.type).toBe('FRT');
|
||||
expect(result.threshold).toBe('2h');
|
||||
expect(result.isSlaMissed).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('time formatting', () => {
|
||||
it('formats time in days and hours', () => {
|
||||
const appliedSla = { sla_rt_due_at: currentTimestamp + 90000 }; // 25 hours
|
||||
const chat = { status: 'open' };
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.threshold).toBe('1d 1h');
|
||||
});
|
||||
|
||||
it('formats time less than a minute as 1m', () => {
|
||||
const appliedSla = { sla_frt_due_at: currentTimestamp + 30 }; // 30 seconds
|
||||
const chat = { first_reply_created_at: null, status: 'open' };
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.threshold).toBe('1m');
|
||||
});
|
||||
|
||||
it('formats months correctly', () => {
|
||||
const appliedSla = {
|
||||
sla_rt_due_at: currentTimestamp + 2592000 + 86400,
|
||||
}; // 1 month + 1 day
|
||||
const chat = { status: 'open' };
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result.threshold).toBe('1mo 1d');
|
||||
});
|
||||
});
|
||||
|
||||
describe('empty status scenarios', () => {
|
||||
it('returns empty when no SLA thresholds are set', () => {
|
||||
const appliedSla = {};
|
||||
const chat = { status: 'open' };
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result).toEqual({
|
||||
type: '',
|
||||
threshold: '',
|
||||
icon: '',
|
||||
isSlaMissed: false,
|
||||
});
|
||||
});
|
||||
|
||||
it('returns empty when all conditions are met', () => {
|
||||
const appliedSla = {
|
||||
sla_frt_due_at: currentTimestamp + 3600,
|
||||
sla_nrt_due_at: currentTimestamp + 1800,
|
||||
sla_rt_due_at: currentTimestamp + 7200,
|
||||
};
|
||||
const chat = {
|
||||
first_reply_created_at: currentTimestamp - 3600, // FRT already hit
|
||||
waiting_since: null, // Not waiting, so NRT not applicable
|
||||
status: 'resolved', // RT not applicable
|
||||
};
|
||||
|
||||
const result = evaluateSLAStatus({ appliedSla, chat });
|
||||
|
||||
expect(result).toEqual({
|
||||
type: '',
|
||||
threshold: '',
|
||||
icon: '',
|
||||
isSlaMissed: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,4 +1,7 @@
|
||||
import { CONTENT_TYPES } from 'dashboard/components-next/message/constants';
|
||||
import {
|
||||
CONTENT_TYPES,
|
||||
VOICE_CALL_STATUS,
|
||||
} from 'dashboard/components-next/message/constants';
|
||||
import { MESSAGE_TYPE } from 'shared/constants/messages';
|
||||
import { useCallsStore } from 'dashboard/stores/calls';
|
||||
import types from 'dashboard/store/mutation-types';
|
||||
@@ -101,6 +104,7 @@ export function handleVoiceCallCreated(
|
||||
callSid,
|
||||
callId,
|
||||
provider,
|
||||
status,
|
||||
callDirection,
|
||||
conversationId,
|
||||
inboxId,
|
||||
@@ -108,6 +112,11 @@ export function handleVoiceCallCreated(
|
||||
senderId,
|
||||
} = extractCallData(message);
|
||||
|
||||
// A voice_call message can be created already terminal when the caller hangs
|
||||
// up before connect. Only ring while the call is actually ringing; mirrors the
|
||||
// guard in seedCallsFromHydratedMessages.
|
||||
if (status !== VOICE_CALL_STATUS.RINGING) return;
|
||||
|
||||
if (
|
||||
!shouldShowCall({
|
||||
callDirection,
|
||||
|
||||
@@ -121,6 +121,26 @@
|
||||
"CLEAR_FILTER": "Clear filter",
|
||||
"EMPTY_LIST": "No results found"
|
||||
},
|
||||
"DRILLDOWN": {
|
||||
"TITLE": "{metric} details",
|
||||
"RESULT_COUNT_CONVERSATION": "{count} conversation | {count} conversations",
|
||||
"RESULT_COUNT_MESSAGE": "{count} message | {count} messages",
|
||||
"EMPTY": "No records found for this bar.",
|
||||
"ERROR": "Could not load records. Please try again.",
|
||||
"ADMIN_ONLY": "Only administrators can drill down into report records.",
|
||||
"LOAD_MORE": "Load more",
|
||||
"CLOSE": "Close details",
|
||||
"PREVIOUS_BUCKET": "Previous bar",
|
||||
"NEXT_BUCKET": "Next bar",
|
||||
"UNKNOWN_CONTACT": "Unknown contact",
|
||||
"UNKNOWN_INBOX": "Unknown inbox",
|
||||
"UNASSIGNED_AGENT": "Unassigned",
|
||||
"NO_MESSAGE_CONTENT": "No message content",
|
||||
"MESSAGE_CREATED_AT": "Message created at {time}",
|
||||
"EVENT_OCCURRED_AT": "Event occurred at {time}",
|
||||
"INCOMING_MESSAGE": "Incoming message",
|
||||
"OUTGOING_MESSAGE": "Outgoing message"
|
||||
},
|
||||
"PAGINATION": {
|
||||
"RESULTS": "Showing {start} to {end} of {total} results",
|
||||
"PER_PAGE_TEMPLATE": "{size} / page"
|
||||
|
||||
@@ -467,7 +467,18 @@
|
||||
"TITLE": "Current Plan",
|
||||
"PLAN_NOTE": "You are currently subscribed to the **{plan}** plan with **{quantity}** licenses",
|
||||
"SEAT_COUNT": "Number of seats",
|
||||
"RENEWS_ON": "Renews on"
|
||||
"RENEWS_ON": "Renews on",
|
||||
"CURRENCY": "Currency"
|
||||
},
|
||||
"CURRENCY": {
|
||||
"SELECT": {
|
||||
"TITLE": "Choose your billing currency",
|
||||
"DESCRIPTION": "Select the currency you'd like to be billed in. This can't be changed once your subscription is created."
|
||||
},
|
||||
"OPTIONS": {
|
||||
"USD": "US Dollar (USD)",
|
||||
"BRL": "Brazilian Real (BRL)"
|
||||
}
|
||||
},
|
||||
"VIEW_PRICING": "View Pricing",
|
||||
"MANAGE_SUBSCRIPTION": {
|
||||
@@ -503,6 +514,7 @@
|
||||
"PURCHASE": "Purchase Credits",
|
||||
"LOADING": "Loading options...",
|
||||
"FETCH_ERROR": "Failed to load credit options. Please try again.",
|
||||
"RETRY": "Retry",
|
||||
"PURCHASE_ERROR": "Failed to process purchase. Please try again.",
|
||||
"PURCHASE_SUCCESS": "Successfully added {credits} credits to your account",
|
||||
"CONFIRM": {
|
||||
|
||||
@@ -15,6 +15,8 @@ import PurchaseCreditsModal from './components/PurchaseCreditsModal.vue';
|
||||
import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
|
||||
import SettingsLayout from '../SettingsLayout.vue';
|
||||
import ButtonV4 from 'next/button/Button.vue';
|
||||
import { getCurrencyConfig } from 'dashboard/constants/billing';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const router = useRouter();
|
||||
const { currentAccount, isOnChatwootCloud } = useAccount();
|
||||
@@ -29,6 +31,7 @@ const {
|
||||
|
||||
const uiFlags = useMapGetter('accounts/getUIFlags');
|
||||
const store = useStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const BILLING_REFRESH_ATTEMPTED = 'billing_refresh_attempted';
|
||||
|
||||
@@ -36,6 +39,10 @@ const BILLING_REFRESH_ATTEMPTED = 'billing_refresh_attempted';
|
||||
const isWaitingForBilling = ref(false);
|
||||
const purchaseCreditsModalRef = ref(null);
|
||||
|
||||
// Currency selection shown to new accounts whose locale supports a non-USD currency.
|
||||
const currencySelectionRequired = ref(false);
|
||||
const currencyOptions = ref([]);
|
||||
|
||||
const customAttributes = computed(() => {
|
||||
return currentAccount.value.custom_attributes || {};
|
||||
});
|
||||
@@ -61,6 +68,13 @@ const subscribedQuantity = computed(() => {
|
||||
return customAttributes.value.subscribed_quantity;
|
||||
});
|
||||
|
||||
const billingCurrency = computed(() => {
|
||||
if (!customAttributes.value.billing_currency) return '';
|
||||
return t(
|
||||
getCurrencyConfig(customAttributes.value.billing_currency).i18nLabelKey
|
||||
);
|
||||
});
|
||||
|
||||
const subscriptionRenewsOn = computed(() => {
|
||||
if (!customAttributes.value.subscription_ends_on) return '';
|
||||
const endDate = new Date(customAttributes.value.subscription_ends_on);
|
||||
@@ -78,7 +92,9 @@ const hasABillingPlan = computed(() => {
|
||||
|
||||
const fetchAccountDetails = async () => {
|
||||
if (!hasABillingPlan.value) {
|
||||
await store.dispatch('accounts/subscription');
|
||||
const data = await store.dispatch('accounts/subscription');
|
||||
currencySelectionRequired.value = !!data?.currency_selection_required;
|
||||
currencyOptions.value = data?.currency_options || [];
|
||||
}
|
||||
// Always fetch limits for billing page to show credit usage
|
||||
fetchLimits();
|
||||
@@ -97,6 +113,9 @@ const handleBillingPageLogic = async () => {
|
||||
// If cloud user, fetch account details first
|
||||
await fetchAccountDetails();
|
||||
|
||||
// Waiting on the user to pick a billing currency — don't auto-refresh.
|
||||
if (currencySelectionRequired.value) return;
|
||||
|
||||
// If still no billing plan after fetch
|
||||
if (!hasABillingPlan.value) {
|
||||
// If we haven't attempted refresh yet, do it once
|
||||
@@ -118,6 +137,13 @@ const handleBillingPageLogic = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const onSelectCurrency = async code => {
|
||||
await store.dispatch('accounts/selectBillingCurrency', code);
|
||||
currencySelectionRequired.value = false;
|
||||
// Currency stored and customer creation kicked off — resume the standard wait flow.
|
||||
await handleBillingPageLogic();
|
||||
};
|
||||
|
||||
const onClickBillingPortal = () => {
|
||||
store.dispatch('accounts/checkout');
|
||||
};
|
||||
@@ -148,7 +174,9 @@ onMounted(handleBillingPageLogic);
|
||||
? $t('BILLING_SETTINGS.NO_BILLING_USER')
|
||||
: $t('ATTRIBUTES_MGMT.LOADING')
|
||||
"
|
||||
:no-records-found="!hasABillingPlan && !isWaitingForBilling"
|
||||
:no-records-found="
|
||||
!hasABillingPlan && !isWaitingForBilling && !currencySelectionRequired
|
||||
"
|
||||
:no-records-message="$t('BILLING_SETTINGS.NO_BILLING_USER')"
|
||||
>
|
||||
<template #header>
|
||||
@@ -160,7 +188,30 @@ onMounted(handleBillingPageLogic);
|
||||
/>
|
||||
</template>
|
||||
<template #body>
|
||||
<section class="grid gap-4">
|
||||
<section v-if="currencySelectionRequired" class="grid gap-4">
|
||||
<BillingCard
|
||||
:title="$t('BILLING_SETTINGS.CURRENCY.SELECT.TITLE')"
|
||||
:description="$t('BILLING_SETTINGS.CURRENCY.SELECT.DESCRIPTION')"
|
||||
>
|
||||
<template #action>
|
||||
<div class="flex gap-2">
|
||||
<ButtonV4
|
||||
v-for="code in currencyOptions"
|
||||
:key="code"
|
||||
sm
|
||||
solid
|
||||
blue
|
||||
:is-loading="uiFlags.isCheckoutInProcess"
|
||||
:disabled="uiFlags.isCheckoutInProcess"
|
||||
@click="onSelectCurrency(code)"
|
||||
>
|
||||
{{ $t(getCurrencyConfig(code).i18nLabelKey) }}
|
||||
</ButtonV4>
|
||||
</div>
|
||||
</template>
|
||||
</BillingCard>
|
||||
</section>
|
||||
<section v-else class="grid gap-4">
|
||||
<BillingCard
|
||||
:title="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.TITLE')"
|
||||
:description="$t('BILLING_SETTINGS.MANAGE_SUBSCRIPTION.DESCRIPTION')"
|
||||
@@ -188,6 +239,11 @@ onMounted(handleBillingPageLogic);
|
||||
:label="$t('BILLING_SETTINGS.CURRENT_PLAN.RENEWS_ON')"
|
||||
:value="subscriptionRenewsOn"
|
||||
/>
|
||||
<DetailItem
|
||||
v-if="billingCurrency"
|
||||
:label="$t('BILLING_SETTINGS.CURRENT_PLAN.CURRENCY')"
|
||||
:value="billingCurrency"
|
||||
/>
|
||||
</div>
|
||||
</BillingCard>
|
||||
<BillingCard
|
||||
|
||||
+3
-5
@@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import { formatCurrencyAmount } from 'dashboard/constants/billing';
|
||||
|
||||
defineProps({
|
||||
credits: {
|
||||
type: Number,
|
||||
@@ -33,11 +35,7 @@ const formatCredits = credits => {
|
||||
};
|
||||
|
||||
const formatAmount = (amount, currency) => {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: currency.toUpperCase(),
|
||||
minimumFractionDigits: 0,
|
||||
}).format(amount);
|
||||
return formatCurrencyAmount(amount, currency, { minimumFractionDigits: 0 });
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
+91
-43
@@ -4,20 +4,18 @@ import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
|
||||
import CreditPackageCard from './CreditPackageCard.vue';
|
||||
import EnterpriseAccountAPI from 'dashboard/api/enterprise/account';
|
||||
import {
|
||||
formatCurrencyAmount,
|
||||
DEFAULT_BILLING_CURRENCY,
|
||||
} from 'dashboard/constants/billing';
|
||||
|
||||
const emit = defineEmits(['close', 'success']);
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const TOPUP_OPTIONS = [
|
||||
{ credits: 1000, amount: 20.0, currency: 'usd' },
|
||||
{ credits: 2500, amount: 50.0, currency: 'usd' },
|
||||
{ credits: 6000, amount: 100.0, currency: 'usd' },
|
||||
{ credits: 12000, amount: 200.0, currency: 'usd' },
|
||||
];
|
||||
|
||||
const POPULAR_CREDITS_AMOUNT = 6000;
|
||||
const STEP_SELECT = 'select';
|
||||
const STEP_CONFIRM = 'confirm';
|
||||
@@ -27,16 +25,20 @@ const selectedCredits = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const currentStep = ref(STEP_SELECT);
|
||||
|
||||
// Topup packages come from the backend for the account's billing currency.
|
||||
const topupOptions = ref([]);
|
||||
const optionsCurrency = ref(DEFAULT_BILLING_CURRENCY);
|
||||
const isFetchingOptions = ref(false);
|
||||
const fetchError = ref(false);
|
||||
|
||||
const selectedOption = computed(() => {
|
||||
return TOPUP_OPTIONS.find(o => o.credits === selectedCredits.value);
|
||||
return topupOptions.value.find(o => o.credits === selectedCredits.value);
|
||||
});
|
||||
|
||||
const formattedAmount = computed(() => {
|
||||
if (!selectedOption.value) return '';
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: selectedOption.value.currency.toUpperCase(),
|
||||
}).format(selectedOption.value.amount);
|
||||
const { amount, currency } = selectedOption.value;
|
||||
return formatCurrencyAmount(amount, currency || optionsCurrency.value);
|
||||
});
|
||||
|
||||
const formattedCredits = computed(() => {
|
||||
@@ -64,24 +66,44 @@ const handlePackageSelect = credits => {
|
||||
selectedCredits.value = credits;
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
const popularOption = TOPUP_OPTIONS.find(
|
||||
const selectDefaultOption = () => {
|
||||
const popularOption = topupOptions.value.find(
|
||||
o => o.credits === POPULAR_CREDITS_AMOUNT
|
||||
);
|
||||
selectedCredits.value = popularOption?.credits || TOPUP_OPTIONS[0]?.credits;
|
||||
selectedCredits.value =
|
||||
popularOption?.credits || topupOptions.value[0]?.credits || null;
|
||||
};
|
||||
|
||||
const fetchOptions = async () => {
|
||||
isFetchingOptions.value = true;
|
||||
fetchError.value = false;
|
||||
try {
|
||||
const { data } = await EnterpriseAccountAPI.getTopupOptions();
|
||||
topupOptions.value = data.options ?? [];
|
||||
optionsCurrency.value = (
|
||||
data.currency || DEFAULT_BILLING_CURRENCY
|
||||
).toLowerCase();
|
||||
selectDefaultOption();
|
||||
} catch {
|
||||
fetchError.value = true;
|
||||
topupOptions.value = [];
|
||||
} finally {
|
||||
isFetchingOptions.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
currentStep.value = STEP_SELECT;
|
||||
isLoading.value = false;
|
||||
selectedCredits.value = null;
|
||||
dialogRef.value?.open();
|
||||
fetchOptions();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
dialogRef.value?.close();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const goToConfirmStep = () => {
|
||||
if (!selectedOption.value) return;
|
||||
currentStep.value = STEP_CONFIRM;
|
||||
@@ -127,32 +149,58 @@ defineExpose({ open, close });
|
||||
:width="dialogWidth"
|
||||
:show-confirm-button="false"
|
||||
:show-cancel-button="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<!-- Step 1: Select Credits Package -->
|
||||
<template v-if="currentStep === 'select'">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<CreditPackageCard
|
||||
v-for="option in TOPUP_OPTIONS"
|
||||
:key="option.credits"
|
||||
name="credit-package"
|
||||
:credits="option.credits"
|
||||
:amount="option.amount"
|
||||
:currency="option.currency"
|
||||
:is-popular="option.credits === POPULAR_CREDITS_AMOUNT"
|
||||
:is-selected="selectedCredits === option.credits"
|
||||
@select="handlePackageSelect(option.credits)"
|
||||
<template v-if="currentStep === STEP_SELECT">
|
||||
<div
|
||||
v-if="isFetchingOptions"
|
||||
class="flex items-center justify-center gap-2 py-10"
|
||||
>
|
||||
<Spinner />
|
||||
<span class="text-sm text-n-slate-11">{{
|
||||
$t('BILLING_SETTINGS.TOPUP.LOADING')
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="fetchError"
|
||||
class="flex flex-col items-center justify-center gap-3 py-10"
|
||||
>
|
||||
<p class="text-sm text-n-slate-11">
|
||||
{{ $t('BILLING_SETTINGS.TOPUP.FETCH_ERROR') }}
|
||||
</p>
|
||||
<Button
|
||||
variant="faded"
|
||||
color="slate"
|
||||
:label="$t('BILLING_SETTINGS.TOPUP.RETRY')"
|
||||
@click="fetchOptions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="p-4 mt-6 rounded-lg bg-n-solid-2 border border-n-weak">
|
||||
<p class="text-sm text-n-slate-11">
|
||||
<span class="font-semibold text-n-slate-12">{{
|
||||
$t('BILLING_SETTINGS.TOPUP.NOTE_TITLE')
|
||||
}}</span>
|
||||
{{ $t('BILLING_SETTINGS.TOPUP.NOTE_DESCRIPTION') }}
|
||||
</p>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<CreditPackageCard
|
||||
v-for="option in topupOptions"
|
||||
:key="option.credits"
|
||||
name="credit-package"
|
||||
:credits="option.credits"
|
||||
:amount="option.amount"
|
||||
:currency="option.currency"
|
||||
:is-popular="option.credits === POPULAR_CREDITS_AMOUNT"
|
||||
:is-selected="selectedCredits === option.credits"
|
||||
@select="handlePackageSelect(option.credits)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="p-4 mt-6 rounded-lg bg-n-solid-2 border border-n-weak">
|
||||
<p class="text-sm text-n-slate-11">
|
||||
<span class="font-semibold text-n-slate-12">{{
|
||||
$t('BILLING_SETTINGS.TOPUP.NOTE_TITLE')
|
||||
}}</span>
|
||||
{{ $t('BILLING_SETTINGS.TOPUP.NOTE_DESCRIPTION') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- Step 2: Confirm Purchase -->
|
||||
@@ -178,7 +226,7 @@ defineExpose({ open, close });
|
||||
<template #footer>
|
||||
<!-- Step 1 Footer -->
|
||||
<div
|
||||
v-if="currentStep === 'select'"
|
||||
v-if="currentStep === STEP_SELECT"
|
||||
class="flex items-center justify-between w-full gap-3"
|
||||
>
|
||||
<Button
|
||||
@@ -192,7 +240,7 @@ defineExpose({ open, close });
|
||||
color="blue"
|
||||
:label="$t('BILLING_SETTINGS.TOPUP.PURCHASE')"
|
||||
class="w-full"
|
||||
:disabled="!selectedCredits"
|
||||
:disabled="!selectedCredits || isFetchingOptions || fetchError"
|
||||
@click="goToConfirmStep"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -149,9 +149,5 @@ export default {
|
||||
|
||||
:deep(.ProseMirror-woot-style) {
|
||||
@apply min-h-[12.5rem];
|
||||
|
||||
p {
|
||||
@apply text-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -153,9 +153,5 @@ export default {
|
||||
|
||||
:deep(.ProseMirror-woot-style) {
|
||||
@apply min-h-[12.5rem];
|
||||
|
||||
p {
|
||||
@apply text-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -101,6 +101,9 @@ export default {
|
||||
summary-fetching-key="getBotSummaryFetchingStatus"
|
||||
:group-by="groupBy"
|
||||
:report-keys="reportKeys"
|
||||
:from="from"
|
||||
:to="to"
|
||||
:business-hours="businessHours"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -121,6 +121,11 @@ export default {
|
||||
show-group-by
|
||||
@filter-change="onFilterChange"
|
||||
/>
|
||||
<ReportContainer :group-by="groupBy" />
|
||||
<ReportContainer
|
||||
:group-by="groupBy"
|
||||
:from="from"
|
||||
:to="to"
|
||||
:business-hours="businessHours"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -5,16 +5,38 @@ import { GROUP_BY_FILTER, METRIC_CHART } from './constants';
|
||||
import fromUnixTime from 'date-fns/fromUnixTime';
|
||||
import format from 'date-fns/format';
|
||||
import { formatTime } from '@chatwoot/utils';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import ChartStats from './components/ChartElements/ChartStats.vue';
|
||||
import BarChart from 'shared/components/charts/BarChart.vue';
|
||||
import ReportDrilldownDrawer from './components/ReportDrilldownDrawer.vue';
|
||||
|
||||
export default {
|
||||
components: { ChartStats, BarChart },
|
||||
components: { ChartStats, BarChart, ReportDrilldownDrawer },
|
||||
props: {
|
||||
groupBy: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
from: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
to: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
reportType: {
|
||||
type: String,
|
||||
default: 'account',
|
||||
},
|
||||
selectedItemId: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
},
|
||||
businessHours: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
accountSummaryKey: {
|
||||
type: String,
|
||||
default: 'getAccountSummary',
|
||||
@@ -42,10 +64,27 @@ export default {
|
||||
);
|
||||
return { calculateTrend, isAverageMetricType };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
drilldownRequest: null,
|
||||
drilldownMetric: null,
|
||||
drilldownIndex: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
accountReport: 'getAccountReports',
|
||||
currentRole: 'getCurrentRole',
|
||||
}),
|
||||
isAdmin() {
|
||||
return this.currentRole === 'administrator';
|
||||
},
|
||||
canDrilldownPrev() {
|
||||
return this.findDrillableIndex(this.drilldownIndex - 1, -1) !== null;
|
||||
},
|
||||
canDrilldownNext() {
|
||||
return this.findDrillableIndex(this.drilldownIndex + 1, 1) !== null;
|
||||
},
|
||||
metrics() {
|
||||
const reportKeys = Object.keys(this.reportKeys);
|
||||
const infoText = {
|
||||
@@ -139,6 +178,82 @@ export default {
|
||||
|
||||
return options;
|
||||
},
|
||||
isDrilldownEnabled() {
|
||||
return !!(this.from && this.to);
|
||||
},
|
||||
onChartElementClick(metric, event) {
|
||||
if (!this.isDrilldownEnabled()) return;
|
||||
|
||||
const dataPoint = this.accountReport.data[metric.KEY]?.[event.dataIndex];
|
||||
if (!this.canOpenDrilldown(metric, dataPoint)) return;
|
||||
if (!this.isAdmin) {
|
||||
useAlert(this.$t('REPORT.DRILLDOWN.ADMIN_ONLY'));
|
||||
return;
|
||||
}
|
||||
|
||||
this.openDrilldownAt(metric, event.dataIndex);
|
||||
},
|
||||
openDrilldownAt(metric, dataIndex) {
|
||||
const dataPoint = this.accountReport.data[metric.KEY]?.[dataIndex];
|
||||
if (!this.canOpenDrilldown(metric, dataPoint)) return;
|
||||
|
||||
const labels = this.getCollection(metric).labels || [];
|
||||
|
||||
this.drilldownMetric = metric;
|
||||
this.drilldownIndex = dataIndex;
|
||||
this.drilldownRequest = {
|
||||
metric: metric.KEY,
|
||||
metricName: metric.NAME,
|
||||
bucketLabel: labels[dataIndex],
|
||||
bucketTimestamp: dataPoint.timestamp,
|
||||
bucketValue: dataPoint.value,
|
||||
isAverageMetric: this.isAverageMetricType(metric.KEY),
|
||||
from: this.from,
|
||||
to: this.to,
|
||||
type: this.reportType,
|
||||
id: this.selectedItemId,
|
||||
groupBy: this.groupBy?.period,
|
||||
businessHours: this.businessHours,
|
||||
};
|
||||
},
|
||||
navigateDrilldown(direction) {
|
||||
const nextIndex = this.findDrillableIndex(
|
||||
this.drilldownIndex + direction,
|
||||
direction
|
||||
);
|
||||
if (nextIndex === null) return;
|
||||
|
||||
this.openDrilldownAt(this.drilldownMetric, nextIndex);
|
||||
},
|
||||
findDrillableIndex(startIndex, step) {
|
||||
if (!this.drilldownMetric) return null;
|
||||
|
||||
const data = this.accountReport.data[this.drilldownMetric.KEY] || [];
|
||||
for (
|
||||
let index = startIndex;
|
||||
index >= 0 && index < data.length;
|
||||
index += step
|
||||
) {
|
||||
if (this.canOpenDrilldown(this.drilldownMetric, data[index]))
|
||||
return index;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
canOpenDrilldown(metric, dataPoint) {
|
||||
if (!dataPoint) return false;
|
||||
|
||||
if (this.isAverageMetricType(metric.KEY)) {
|
||||
return dataPoint.count > 0;
|
||||
}
|
||||
|
||||
return dataPoint.value > 0;
|
||||
},
|
||||
closeDrilldown() {
|
||||
this.drilldownRequest = null;
|
||||
this.drilldownMetric = null;
|
||||
this.drilldownIndex = null;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -168,6 +283,8 @@ export default {
|
||||
v-if="accountReport.data[metric.KEY].length"
|
||||
:collection="getCollection(metric)"
|
||||
:chart-options="getChartOptions(metric)"
|
||||
:clickable="isDrilldownEnabled()"
|
||||
@element-click="onChartElementClick(metric, $event)"
|
||||
/>
|
||||
<span v-else class="text-sm text-n-slate-10">
|
||||
{{ $t('REPORT.NO_ENOUGH_DATA') }}
|
||||
@@ -176,4 +293,23 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ReportDrilldownDrawer
|
||||
:id="drilldownRequest?.id"
|
||||
:open="!!drilldownRequest"
|
||||
:metric="drilldownRequest?.metric"
|
||||
:metric-name="drilldownRequest?.metricName"
|
||||
:bucket-label="drilldownRequest?.bucketLabel"
|
||||
:bucket-timestamp="drilldownRequest?.bucketTimestamp"
|
||||
:bucket-value="drilldownRequest?.bucketValue"
|
||||
:is-average-metric="drilldownRequest?.isAverageMetric"
|
||||
:from="drilldownRequest?.from"
|
||||
:to="drilldownRequest?.to"
|
||||
:type="drilldownRequest?.type"
|
||||
:group-by="drilldownRequest?.groupBy"
|
||||
:business-hours="drilldownRequest?.businessHours"
|
||||
:can-prev="canDrilldownPrev"
|
||||
:can-next="canDrilldownNext"
|
||||
@navigate="navigateDrilldown"
|
||||
@close="closeDrilldown"
|
||||
/>
|
||||
</template>
|
||||
|
||||
+279
@@ -0,0 +1,279 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { formatTime } from '@chatwoot/utils';
|
||||
import format from 'date-fns/format';
|
||||
import fromUnixTime from 'date-fns/fromUnixTime';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
|
||||
import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
|
||||
import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
|
||||
|
||||
const props = defineProps({
|
||||
record: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const conversation = computed(() => props.record.conversation || {});
|
||||
const message = computed(() => props.record.message || {});
|
||||
const isMessageRecord = computed(() => props.record.record_type === 'message');
|
||||
const isEventBackedConversationRecord = computed(
|
||||
() => !isMessageRecord.value && !!props.record.event_name
|
||||
);
|
||||
const conversationDisplayId = computed(() => conversation.value.display_id);
|
||||
const conversationNumber = computed(() => `#${conversationDisplayId.value}`);
|
||||
const messageDirection = computed(() => message.value.message_type);
|
||||
|
||||
const formatTimestamp = timestamp => {
|
||||
if (!timestamp) return '';
|
||||
|
||||
return format(fromUnixTime(timestamp), 'dd MMM yyyy, h:mm a');
|
||||
};
|
||||
|
||||
const compactTimestamp = timestamp => {
|
||||
if (!timestamp) return '';
|
||||
|
||||
return shortTimestamp(dynamicTime(timestamp)).trim();
|
||||
};
|
||||
|
||||
const metricValue = computed(() => {
|
||||
const value = props.record.metric_value;
|
||||
if (value === null || value === undefined) return '';
|
||||
|
||||
return formatTime(value) || `${value}`;
|
||||
});
|
||||
|
||||
const previewText = computed(() => {
|
||||
if (message.value.content) return message.value.content;
|
||||
if (conversation.value.last_message?.content) {
|
||||
return conversation.value.last_message.content;
|
||||
}
|
||||
|
||||
return t('REPORT.DRILLDOWN.NO_MESSAGE_CONTENT');
|
||||
});
|
||||
|
||||
const showPreview = computed(() => {
|
||||
return isMessageRecord.value || conversation.value.last_message;
|
||||
});
|
||||
|
||||
const messageCreatedTooltip = computed(() =>
|
||||
t('REPORT.DRILLDOWN.MESSAGE_CREATED_AT', {
|
||||
time: formatTimestamp(message.value.created_at),
|
||||
})
|
||||
);
|
||||
|
||||
const eventOccurredTooltip = computed(() =>
|
||||
t('REPORT.DRILLDOWN.EVENT_OCCURRED_AT', {
|
||||
time: formatTimestamp(props.record.occurred_at),
|
||||
})
|
||||
);
|
||||
|
||||
const directionDetails = computed(() => {
|
||||
const direction = messageDirection.value;
|
||||
if (!direction) return null;
|
||||
|
||||
const isIncoming = direction === 'incoming';
|
||||
return {
|
||||
icon: isIncoming ? 'i-lucide-arrow-down-left' : 'i-lucide-arrow-up-right',
|
||||
tooltip: isIncoming
|
||||
? t('REPORT.DRILLDOWN.INCOMING_MESSAGE')
|
||||
: t('REPORT.DRILLDOWN.OUTGOING_MESSAGE'),
|
||||
};
|
||||
});
|
||||
|
||||
const conversationPath = computed(() => {
|
||||
if (!conversationDisplayId.value) return '';
|
||||
|
||||
const path = conversationUrl({
|
||||
accountId: route.params.accountId,
|
||||
id: conversationDisplayId.value,
|
||||
});
|
||||
const params =
|
||||
isMessageRecord.value && message.value.id
|
||||
? { messageId: message.value.id }
|
||||
: null;
|
||||
|
||||
return frontendURL(path, params);
|
||||
});
|
||||
|
||||
const contactPath = computed(() => {
|
||||
if (!conversation.value.contact_id) return '';
|
||||
|
||||
return frontendURL(
|
||||
`accounts/${route.params.accountId}/contacts/${conversation.value.contact_id}`
|
||||
);
|
||||
});
|
||||
|
||||
const inboxPath = computed(() => {
|
||||
if (!conversation.value.inbox_id) return '';
|
||||
|
||||
return frontendURL(
|
||||
`accounts/${route.params.accountId}/inbox/${conversation.value.inbox_id}`
|
||||
);
|
||||
});
|
||||
|
||||
const agentPath = computed(() => {
|
||||
if (!conversation.value.assignee_id) return '';
|
||||
|
||||
return frontendURL(
|
||||
`accounts/${route.params.accountId}/reports/agents/${conversation.value.assignee_id}`
|
||||
);
|
||||
});
|
||||
|
||||
const metadataItems = computed(() => [
|
||||
{
|
||||
key: 'contact',
|
||||
icon: 'i-lucide-contact',
|
||||
label:
|
||||
conversation.value.contact_name || t('REPORT.DRILLDOWN.UNKNOWN_CONTACT'),
|
||||
path: contactPath.value,
|
||||
},
|
||||
{
|
||||
key: 'inbox',
|
||||
icon: 'i-lucide-inbox',
|
||||
label: conversation.value.inbox_name || t('REPORT.DRILLDOWN.UNKNOWN_INBOX'),
|
||||
path: inboxPath.value,
|
||||
},
|
||||
{
|
||||
key: 'agent',
|
||||
icon: 'i-lucide-user-round',
|
||||
label:
|
||||
conversation.value.assignee_name ||
|
||||
t('REPORT.DRILLDOWN.UNASSIGNED_AGENT'),
|
||||
path: agentPath.value,
|
||||
},
|
||||
]);
|
||||
|
||||
const metadataAttributes = item => {
|
||||
if (!item.path) return {};
|
||||
|
||||
return {
|
||||
href: item.path,
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer',
|
||||
};
|
||||
};
|
||||
|
||||
const metadataItemClass = item => [
|
||||
'flex min-w-0 items-center gap-1 text-n-slate-10',
|
||||
item.path ? 'group hover:text-n-blue-11 hover:underline' : '',
|
||||
];
|
||||
|
||||
const metadataIconClass = item => [
|
||||
'size-3 shrink-0 text-n-slate-9',
|
||||
item.path ? 'group-hover:text-n-blue-11' : '',
|
||||
];
|
||||
|
||||
const stopMetadataLinkClick = (event, item) => {
|
||||
if (item.path) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
const openInNewTab = url => {
|
||||
if (!url) return;
|
||||
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
};
|
||||
|
||||
const openRecord = () => {
|
||||
openInNewTab(conversationPath.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article
|
||||
role="link"
|
||||
tabindex="0"
|
||||
class="cursor-pointer rounded-md border border-n-weak bg-n-solid-2 p-3 hover:bg-n-alpha-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-n-brand"
|
||||
@click="openRecord"
|
||||
@keydown.enter.self.prevent="openRecord"
|
||||
@keydown.space.self.prevent="openRecord"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="min-w-0">
|
||||
<div
|
||||
class="flex items-center gap-2 text-sm font-medium leading-5 text-n-slate-12"
|
||||
>
|
||||
<span>{{ conversationNumber }}</span>
|
||||
<span
|
||||
v-if="conversation.status"
|
||||
class="rounded bg-n-alpha-2 px-1.5 py-0.5 text-xs capitalize text-n-slate-11"
|
||||
>
|
||||
{{ conversation.status }}
|
||||
</span>
|
||||
<span
|
||||
v-if="directionDetails"
|
||||
v-tooltip.top="directionDetails.tooltip"
|
||||
:aria-label="directionDetails.tooltip"
|
||||
class="flex size-5 items-center justify-center rounded bg-n-alpha-2 text-n-slate-11"
|
||||
>
|
||||
<Icon :icon="directionDetails.icon" class="size-3" />
|
||||
</span>
|
||||
<span
|
||||
v-if="metricValue"
|
||||
class="rounded bg-n-alpha-2 px-1.5 py-0.5 text-xs text-n-slate-11"
|
||||
>
|
||||
{{ metricValue }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ms-2 flex shrink-0 items-center justify-end gap-1 text-end text-xs leading-4 text-n-slate-10"
|
||||
>
|
||||
<span
|
||||
v-if="isMessageRecord"
|
||||
v-tooltip.left="messageCreatedTooltip"
|
||||
:aria-label="messageCreatedTooltip"
|
||||
class="whitespace-nowrap"
|
||||
>
|
||||
{{ compactTimestamp(message.created_at) }}
|
||||
</span>
|
||||
<TimeAgo
|
||||
v-else
|
||||
:is-auto-refresh-enabled="false"
|
||||
:conversation-id="conversation.id"
|
||||
:last-activity-timestamp="conversation.last_activity_at"
|
||||
:created-at-timestamp="conversation.created_at"
|
||||
class="font-440 !text-xs !text-n-slate-10"
|
||||
/>
|
||||
<span
|
||||
v-if="isEventBackedConversationRecord"
|
||||
v-tooltip.left="eventOccurredTooltip"
|
||||
:aria-label="eventOccurredTooltip"
|
||||
class="whitespace-nowrap rounded bg-n-alpha-2 px-1 py-0.5 text-[11px] leading-4 text-n-slate-10"
|
||||
>
|
||||
{{ compactTimestamp(record.occurred_at) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="showPreview"
|
||||
class="mt-2 line-clamp-1 text-sm leading-5 text-n-slate-12"
|
||||
>
|
||||
{{ previewText }}
|
||||
</p>
|
||||
|
||||
<div class="mt-2 grid grid-cols-3 gap-2">
|
||||
<component
|
||||
:is="item.path ? 'a' : 'span'"
|
||||
v-for="item in metadataItems"
|
||||
:key="item.key"
|
||||
class="text-body-main"
|
||||
v-bind="metadataAttributes(item)"
|
||||
:class="metadataItemClass(item)"
|
||||
@click="stopMetadataLinkClick($event, item)"
|
||||
>
|
||||
<Icon :icon="item.icon" :class="metadataIconClass(item)" />
|
||||
<span class="truncate">{{ item.label }}</span>
|
||||
</component>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
+315
@@ -0,0 +1,315 @@
|
||||
<script setup>
|
||||
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
|
||||
import { useEventListener } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { formatTime } from '@chatwoot/utils';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
|
||||
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
|
||||
import { useReportDrilldown } from '../composables/useReportDrilldown';
|
||||
import ReportDrilldownCard from './ReportDrilldownCard.vue';
|
||||
|
||||
const props = defineProps({
|
||||
open: { type: Boolean, default: false },
|
||||
metric: { type: String, default: '' },
|
||||
metricName: { type: String, default: '' },
|
||||
bucketLabel: { type: String, default: '' },
|
||||
bucketTimestamp: { type: Number, default: null },
|
||||
from: { type: Number, default: null },
|
||||
to: { type: Number, default: null },
|
||||
type: { type: String, default: 'account' },
|
||||
id: { type: [String, Number], default: null },
|
||||
groupBy: { type: String, default: '' },
|
||||
businessHours: { type: Boolean, default: false },
|
||||
bucketValue: { type: Number, default: null },
|
||||
isAverageMetric: { type: Boolean, default: false },
|
||||
canPrev: { type: Boolean, default: false },
|
||||
canNext: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'navigate']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const drawerRef = ref(null);
|
||||
const {
|
||||
records,
|
||||
meta,
|
||||
isFetching,
|
||||
isFetchingMore,
|
||||
hasError,
|
||||
hasRecords,
|
||||
hasMore,
|
||||
open: openDrilldown,
|
||||
close,
|
||||
loadMore,
|
||||
} = useReportDrilldown();
|
||||
|
||||
let previousActiveElement = null;
|
||||
|
||||
const isOpen = computed(() => props.open);
|
||||
|
||||
const title = computed(() => props.metricName || '');
|
||||
|
||||
const bucketValue = computed(() => {
|
||||
if (props.bucketValue === null) return '';
|
||||
|
||||
return props.isAverageMetric
|
||||
? formatTime(props.bucketValue)
|
||||
: `${props.bucketValue}`;
|
||||
});
|
||||
|
||||
// The headline stat already shows the conversation count for conversation-count
|
||||
// metrics (e.g. conversations_count), so the subtitle count would be redundant.
|
||||
const isStatConversationCount = computed(
|
||||
() =>
|
||||
!props.isAverageMetric &&
|
||||
meta.value.record_type === 'conversation' &&
|
||||
props.bucketValue === meta.value.conversation_count
|
||||
);
|
||||
|
||||
const conversationCount = computed(() => {
|
||||
if (!meta.value.conversation_count || isStatConversationCount.value)
|
||||
return '';
|
||||
|
||||
return t('REPORT.DRILLDOWN.RESULT_COUNT_CONVERSATION', {
|
||||
count: meta.value.conversation_count,
|
||||
});
|
||||
});
|
||||
|
||||
// Timing metrics (e.g. reply time) show a duration as the stat, so the underlying
|
||||
// message count adds context. Skip it when it just mirrors the conversation count
|
||||
// (e.g. first response time has one response message per conversation).
|
||||
const messageCount = computed(() => {
|
||||
if (
|
||||
!props.isAverageMetric ||
|
||||
meta.value.record_type !== 'message' ||
|
||||
!meta.value.total_count ||
|
||||
meta.value.total_count === meta.value.conversation_count
|
||||
) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return t('REPORT.DRILLDOWN.RESULT_COUNT_MESSAGE', {
|
||||
count: meta.value.total_count,
|
||||
});
|
||||
});
|
||||
|
||||
const subtitle = computed(() =>
|
||||
[props.bucketLabel, conversationCount.value, messageCount.value]
|
||||
.filter(Boolean)
|
||||
.join(' ⋅ ')
|
||||
);
|
||||
|
||||
const restoreFocus = () => {
|
||||
if (previousActiveElement?.isConnected) {
|
||||
previousActiveElement.focus();
|
||||
}
|
||||
previousActiveElement = null;
|
||||
};
|
||||
|
||||
const closeDrawer = () => {
|
||||
close();
|
||||
emit('close');
|
||||
restoreFocus();
|
||||
};
|
||||
|
||||
const recordKey = record =>
|
||||
`${record.record_type}-${record.message?.id || record.conversation?.id}-${
|
||||
record.occurred_at
|
||||
}`;
|
||||
|
||||
const rememberActiveElement = () => {
|
||||
if (previousActiveElement) return;
|
||||
|
||||
previousActiveElement =
|
||||
document.activeElement instanceof HTMLElement
|
||||
? document.activeElement
|
||||
: null;
|
||||
};
|
||||
|
||||
const focusDrawer = () => {
|
||||
nextTick(() => drawerRef.value?.focus());
|
||||
};
|
||||
|
||||
const fetchDrilldown = () => {
|
||||
openDrilldown({
|
||||
metric: props.metric,
|
||||
bucketTimestamp: props.bucketTimestamp,
|
||||
from: props.from,
|
||||
to: props.to,
|
||||
type: props.type,
|
||||
id: props.id,
|
||||
groupBy: props.groupBy,
|
||||
businessHours: props.businessHours,
|
||||
});
|
||||
};
|
||||
|
||||
const navigate = direction => {
|
||||
if (direction < 0 && !props.canPrev) return;
|
||||
if (direction > 0 && !props.canNext) return;
|
||||
|
||||
emit('navigate', direction);
|
||||
};
|
||||
|
||||
const onKeydown = event => {
|
||||
if (!isOpen.value) return;
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
closeDrawer();
|
||||
} else if (event.key === 'ArrowLeft') {
|
||||
navigate(-1);
|
||||
} else if (event.key === 'ArrowRight') {
|
||||
navigate(1);
|
||||
}
|
||||
};
|
||||
|
||||
useEventListener(document, 'keydown', onKeydown);
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
isDrawerOpen => {
|
||||
if (!isDrawerOpen) {
|
||||
close();
|
||||
restoreFocus();
|
||||
return;
|
||||
}
|
||||
|
||||
rememberActiveElement();
|
||||
fetchDrilldown();
|
||||
focusDrawer();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => [props.metric, props.bucketTimestamp],
|
||||
() => {
|
||||
if (props.open) fetchDrilldown();
|
||||
}
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
restoreFocus();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TeleportWithDirection to="body">
|
||||
<Transition name="report-drilldown-fade">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="fixed inset-0 z-50 bg-black/30"
|
||||
role="presentation"
|
||||
@click.self="closeDrawer"
|
||||
>
|
||||
<aside
|
||||
ref="drawerRef"
|
||||
class="fixed inset-y-0 end-0 flex w-full max-w-xl flex-col bg-n-solid-1 shadow-xl outline outline-1 outline-n-container"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-label="title"
|
||||
tabindex="-1"
|
||||
>
|
||||
<header
|
||||
class="flex items-start justify-between gap-4 border-b border-n-weak px-6 py-5"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<h2 class="truncate text-base font-medium text-n-slate-12">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<p
|
||||
v-if="bucketValue"
|
||||
class="mt-1 text-xl font-semibold text-n-slate-12"
|
||||
>
|
||||
{{ bucketValue }}
|
||||
</p>
|
||||
<div
|
||||
class="text-sm text-n-slate-11"
|
||||
:class="{
|
||||
'mt-2': bucketValue,
|
||||
'mt-1': !bucketValue,
|
||||
}"
|
||||
>
|
||||
{{ subtitle }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-1">
|
||||
<Button
|
||||
ghost
|
||||
slate
|
||||
size="sm"
|
||||
icon="i-ph-caret-left"
|
||||
class="rtl:rotate-180"
|
||||
:disabled="!canPrev"
|
||||
:aria-label="$t('REPORT.DRILLDOWN.PREVIOUS_BUCKET')"
|
||||
@click="navigate(-1)"
|
||||
/>
|
||||
<Button
|
||||
ghost
|
||||
slate
|
||||
size="sm"
|
||||
icon="i-ph-caret-right"
|
||||
class="rtl:rotate-180"
|
||||
:disabled="!canNext"
|
||||
:aria-label="$t('REPORT.DRILLDOWN.NEXT_BUCKET')"
|
||||
@click="navigate(1)"
|
||||
/>
|
||||
<Button
|
||||
ghost
|
||||
slate
|
||||
size="sm"
|
||||
icon="i-ph-x"
|
||||
:aria-label="$t('REPORT.DRILLDOWN.CLOSE')"
|
||||
@click="closeDrawer"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="min-h-0 flex-1 overflow-y-auto px-5 py-3">
|
||||
<div
|
||||
v-if="isFetching"
|
||||
class="flex h-40 items-center justify-center"
|
||||
>
|
||||
<Spinner />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="hasError"
|
||||
class="flex h-40 items-center justify-center text-sm text-n-ruby-11"
|
||||
>
|
||||
{{ $t('REPORT.DRILLDOWN.ERROR') }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else-if="!hasRecords"
|
||||
class="flex h-40 items-center justify-center text-sm text-n-slate-10"
|
||||
>
|
||||
{{ $t('REPORT.DRILLDOWN.EMPTY') }}
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-col gap-2">
|
||||
<ReportDrilldownCard
|
||||
v-for="record in records"
|
||||
:key="recordKey(record)"
|
||||
:record="record"
|
||||
/>
|
||||
|
||||
<Button
|
||||
v-if="hasMore"
|
||||
faded
|
||||
slate
|
||||
size="sm"
|
||||
class="mx-auto mt-2"
|
||||
:label="$t('REPORT.DRILLDOWN.LOAD_MORE')"
|
||||
:is-loading="isFetchingMore"
|
||||
@click="loadMore"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</Transition>
|
||||
</TeleportWithDirection>
|
||||
</template>
|
||||
@@ -69,6 +69,9 @@ export default {
|
||||
isAgentType() {
|
||||
return this.type === 'agent';
|
||||
},
|
||||
selectedFilterId() {
|
||||
return this.selectedFilter?.id || null;
|
||||
},
|
||||
reportKeys() {
|
||||
return {
|
||||
CONVERSATIONS: 'conversations_count',
|
||||
@@ -181,5 +184,10 @@ export default {
|
||||
v-if="filterItemsList.length"
|
||||
:group-by="groupBy"
|
||||
:report-keys="reportKeys"
|
||||
:from="from"
|
||||
:to="to"
|
||||
:report-type="type"
|
||||
:selected-item-id="selectedFilterId"
|
||||
:business-hours="businessHours"
|
||||
/>
|
||||
</template>
|
||||
|
||||
+195
@@ -0,0 +1,195 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import ReportDrilldownCard from '../ReportDrilldownCard.vue';
|
||||
|
||||
vi.mock('vue-router', () => ({
|
||||
useRoute: () => ({
|
||||
params: {
|
||||
accountId: 1,
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
t: (key, params = {}) => {
|
||||
if (key === 'REPORT.DRILLDOWN.MESSAGE_CREATED_AT') {
|
||||
return `Message created at ${params.time}`;
|
||||
}
|
||||
if (key === 'REPORT.DRILLDOWN.EVENT_OCCURRED_AT') {
|
||||
return `Event occurred at ${params.time}`;
|
||||
}
|
||||
if (key === 'REPORT.DRILLDOWN.INCOMING_MESSAGE') {
|
||||
return 'Incoming message';
|
||||
}
|
||||
if (key === 'REPORT.DRILLDOWN.OUTGOING_MESSAGE') {
|
||||
return 'Outgoing message';
|
||||
}
|
||||
return key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('shared/helpers/timeHelper', () => ({
|
||||
dynamicTime: timestamp => {
|
||||
const timestamps = {
|
||||
1621103500: '2 minutes ago',
|
||||
1621103400: '4 days ago',
|
||||
1621103700: '4 days ago',
|
||||
};
|
||||
return timestamps[timestamp] || 'less than a minute ago';
|
||||
},
|
||||
shortTimestamp: time => {
|
||||
const timestamps = {
|
||||
'2 minutes ago': '2m',
|
||||
'4 days ago': '4d',
|
||||
};
|
||||
return timestamps[time] || 'now';
|
||||
},
|
||||
dateFormat: timestamp => `date-${timestamp}`,
|
||||
}));
|
||||
|
||||
describe('ReportDrilldownCard.vue', () => {
|
||||
const record = {
|
||||
record_type: 'message',
|
||||
conversation: {
|
||||
id: 10,
|
||||
display_id: 42,
|
||||
contact_id: 11,
|
||||
contact_name: 'Jane',
|
||||
inbox_id: 12,
|
||||
inbox_name: 'Website',
|
||||
assignee_id: 13,
|
||||
assignee_name: 'Alex',
|
||||
status: 'open',
|
||||
created_at: 1621103400,
|
||||
last_activity_at: 1621103700,
|
||||
last_message: {
|
||||
id: 100,
|
||||
content: 'Latest reply',
|
||||
message_type: 'outgoing',
|
||||
created_at: 1621103600,
|
||||
},
|
||||
},
|
||||
message: {
|
||||
id: 99,
|
||||
content: 'Need help',
|
||||
message_type: 'incoming',
|
||||
created_at: 1621103500,
|
||||
},
|
||||
metric_value: null,
|
||||
occurred_at: 1621103500,
|
||||
};
|
||||
|
||||
const mountCard = (props = {}) =>
|
||||
mount(ReportDrilldownCard, {
|
||||
props: {
|
||||
record,
|
||||
...props,
|
||||
},
|
||||
global: {
|
||||
mocks: {
|
||||
$t: key => key,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
vi.spyOn(window, 'open').mockImplementation(() => {});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('opens the card conversation link in a new tab', async () => {
|
||||
const wrapper = mountCard();
|
||||
|
||||
expect(wrapper.text()).toContain('#42');
|
||||
expect(wrapper.text()).toContain('Need help');
|
||||
expect(wrapper.find('.i-lucide-arrow-down-left').exists()).toBe(true);
|
||||
expect(wrapper.find('[aria-label="Incoming message"]').exists()).toBe(true);
|
||||
|
||||
await wrapper.find('[role="link"]').trigger('click');
|
||||
|
||||
expect(window.open).toHaveBeenCalledWith(
|
||||
'/app/accounts/1/conversations/42?messageId=99',
|
||||
'_blank',
|
||||
'noopener,noreferrer'
|
||||
);
|
||||
});
|
||||
|
||||
it('renders only message created timestamp for message rows', () => {
|
||||
const wrapper = mountCard();
|
||||
const messageCreatedLabel = wrapper
|
||||
.findAll('[aria-label]')
|
||||
.map(timestamp => timestamp.attributes('aria-label'))
|
||||
.find(label => label.includes('Message created at'));
|
||||
|
||||
expect(wrapper.text()).toContain('2m');
|
||||
expect(wrapper.text()).not.toContain('4d • 4d');
|
||||
expect(messageCreatedLabel).toContain('Message created at');
|
||||
});
|
||||
|
||||
it('renders separate contact, inbox, and agent links', async () => {
|
||||
const wrapper = mountCard();
|
||||
const links = wrapper.findAll('a');
|
||||
|
||||
expect(links.map(link => link.attributes('href'))).toEqual([
|
||||
'/app/accounts/1/contacts/11',
|
||||
'/app/accounts/1/inbox/12',
|
||||
'/app/accounts/1/reports/agents/13',
|
||||
]);
|
||||
expect(links.every(link => link.attributes('target') === '_blank')).toBe(
|
||||
true
|
||||
);
|
||||
expect(
|
||||
links.every(link => link.classes().includes('text-n-slate-10'))
|
||||
).toBe(true);
|
||||
expect(
|
||||
links.every(link => !link.classes().includes('text-n-blue-11'))
|
||||
).toBe(true);
|
||||
expect(wrapper.find('.i-lucide-contact').exists()).toBe(true);
|
||||
expect(wrapper.find('.i-lucide-inbox').exists()).toBe(true);
|
||||
expect(wrapper.find('.i-lucide-user-round').exists()).toBe(true);
|
||||
|
||||
await links[0].trigger('click');
|
||||
|
||||
expect(window.open).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('renders the last message for conversation rows', () => {
|
||||
const wrapper = mountCard({
|
||||
record: {
|
||||
...record,
|
||||
record_type: 'conversation',
|
||||
message: null,
|
||||
occurred_at: 1621103500,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.text()).toContain('Latest reply');
|
||||
expect(wrapper.text()).toContain('4d • 4d');
|
||||
});
|
||||
|
||||
it('renders event time alongside TimeAgo for event-backed conversation rows', () => {
|
||||
const wrapper = mountCard({
|
||||
record: {
|
||||
...record,
|
||||
record_type: 'conversation',
|
||||
message: null,
|
||||
event_name: 'conversation_bot_handoff',
|
||||
occurred_at: 1621103500,
|
||||
},
|
||||
});
|
||||
const eventOccurredLabel = wrapper
|
||||
.findAll('[aria-label]')
|
||||
.map(timestamp => timestamp.attributes('aria-label'))
|
||||
.find(label => label.includes('Event occurred at'));
|
||||
|
||||
expect(wrapper.text()).toContain('Latest reply');
|
||||
expect(wrapper.text()).toContain('4d • 4d');
|
||||
expect(wrapper.text()).toContain('2m');
|
||||
expect(eventOccurredLabel).toContain('Event occurred at');
|
||||
});
|
||||
});
|
||||
+352
@@ -0,0 +1,352 @@
|
||||
import { flushPromises, mount } from '@vue/test-utils';
|
||||
import { nextTick } from 'vue';
|
||||
import { formatTime } from '@chatwoot/utils';
|
||||
import ReportsAPI from 'dashboard/api/reports';
|
||||
import ReportDrilldownDrawer from '../ReportDrilldownDrawer.vue';
|
||||
|
||||
vi.mock('dashboard/api/reports', () => ({
|
||||
default: {
|
||||
getDrilldown: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock('vue-i18n', () => ({
|
||||
useI18n: () => ({
|
||||
t: (key, params = {}) => {
|
||||
if (key === 'REPORT.DRILLDOWN.TITLE') {
|
||||
return `${params.metric} details`;
|
||||
}
|
||||
if (key === 'REPORT.DRILLDOWN.RESULT_COUNT_CONVERSATION') {
|
||||
return `${params.count} conversations`;
|
||||
}
|
||||
if (key === 'REPORT.DRILLDOWN.RESULT_COUNT_MESSAGE') {
|
||||
return `${params.count} messages`;
|
||||
}
|
||||
return key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('ReportDrilldownDrawer.vue', () => {
|
||||
const request = {
|
||||
metric: 'incoming_messages_count',
|
||||
metricName: 'Messages received',
|
||||
bucketLabel: '20-May',
|
||||
bucketTimestamp: 1621103400,
|
||||
from: 1621103400,
|
||||
to: 1621621800,
|
||||
type: 'account',
|
||||
groupBy: 'day',
|
||||
businessHours: false,
|
||||
};
|
||||
|
||||
const payload = [
|
||||
{
|
||||
record_type: 'message',
|
||||
conversation: {
|
||||
id: 10,
|
||||
display_id: 42,
|
||||
contact_id: 11,
|
||||
contact_name: 'Jane',
|
||||
inbox_id: 12,
|
||||
inbox_name: 'Website',
|
||||
assignee_id: 13,
|
||||
assignee_name: 'Alex',
|
||||
status: 'open',
|
||||
created_at: 1621103400,
|
||||
last_activity_at: 1621103700,
|
||||
last_message: {
|
||||
id: 100,
|
||||
content: 'Latest reply',
|
||||
message_type: 'outgoing',
|
||||
created_at: 1621103600,
|
||||
},
|
||||
},
|
||||
message: {
|
||||
id: 99,
|
||||
content: 'Need help',
|
||||
message_type: 'incoming',
|
||||
created_at: 1621103500,
|
||||
},
|
||||
metric_value: null,
|
||||
occurred_at: 1621103500,
|
||||
},
|
||||
];
|
||||
|
||||
const mountDrawer = options =>
|
||||
mount(ReportDrilldownDrawer, {
|
||||
props: { open: true, ...request, ...options?.props },
|
||||
attachTo: options?.attachTo,
|
||||
global: {
|
||||
stubs: {
|
||||
TeleportWithDirection: {
|
||||
template: '<div><slot /></div>',
|
||||
},
|
||||
Transition: false,
|
||||
Spinner: true,
|
||||
Button: {
|
||||
props: ['label'],
|
||||
emits: ['click'],
|
||||
template:
|
||||
'<button @click="$emit(\'click\')">{{ label }}<slot /></button>',
|
||||
},
|
||||
ReportDrilldownCard: {
|
||||
props: ['record'],
|
||||
template:
|
||||
'<div data-testid="drilldown-card">#{{ record.conversation.display_id }}</div>',
|
||||
},
|
||||
},
|
||||
mocks: {
|
||||
$t: key => key,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
ReportsAPI.getDrilldown.mockResolvedValue({
|
||||
data: {
|
||||
meta: {
|
||||
total_count: 1,
|
||||
current_page: 1,
|
||||
record_type: 'message',
|
||||
conversation_count: 1,
|
||||
},
|
||||
payload,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('loads and renders drilldown cards for the request', async () => {
|
||||
const wrapper = mountDrawer();
|
||||
await flushPromises();
|
||||
|
||||
expect(ReportsAPI.getDrilldown).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
metric: 'incoming_messages_count',
|
||||
bucketTimestamp: 1621103400,
|
||||
page: 1,
|
||||
})
|
||||
);
|
||||
expect(wrapper.text()).toContain('Messages received');
|
||||
expect(wrapper.text()).toContain('1 conversations');
|
||||
expect(wrapper.find('[data-testid="drilldown-card"]').text()).toBe('#42');
|
||||
});
|
||||
|
||||
it('shows the bucket aggregate value for average metrics', async () => {
|
||||
const wrapper = mountDrawer({
|
||||
props: {
|
||||
metric: 'avg_first_response_time',
|
||||
metricName: 'First response time',
|
||||
isAverageMetric: true,
|
||||
bucketValue: 2580,
|
||||
},
|
||||
});
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.text()).toContain(formatTime(2580));
|
||||
});
|
||||
|
||||
it('shows both conversation and message counts when they differ (reply time)', async () => {
|
||||
ReportsAPI.getDrilldown.mockResolvedValue({
|
||||
data: {
|
||||
meta: {
|
||||
total_count: 8,
|
||||
current_page: 1,
|
||||
record_type: 'message',
|
||||
conversation_count: 5,
|
||||
},
|
||||
payload,
|
||||
},
|
||||
});
|
||||
const wrapper = mountDrawer({
|
||||
props: {
|
||||
metric: 'reply_time',
|
||||
isAverageMetric: true,
|
||||
bucketValue: 2580,
|
||||
},
|
||||
});
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.text()).toContain('5 conversations');
|
||||
expect(wrapper.text()).toContain('8 messages');
|
||||
});
|
||||
|
||||
it('hides the message count when it matches the conversation count (first response time)', async () => {
|
||||
ReportsAPI.getDrilldown.mockResolvedValue({
|
||||
data: {
|
||||
meta: {
|
||||
total_count: 5,
|
||||
current_page: 1,
|
||||
record_type: 'message',
|
||||
conversation_count: 5,
|
||||
},
|
||||
payload,
|
||||
},
|
||||
});
|
||||
const wrapper = mountDrawer({
|
||||
props: {
|
||||
metric: 'avg_first_response_time',
|
||||
isAverageMetric: true,
|
||||
bucketValue: 2580,
|
||||
},
|
||||
});
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.text()).toContain('5 conversations');
|
||||
expect(wrapper.text()).not.toContain('messages');
|
||||
});
|
||||
|
||||
it('shows the plain count as the bucket value for count metrics', async () => {
|
||||
const wrapper = mountDrawer({ props: { bucketValue: 128 } });
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.text()).toContain('128');
|
||||
expect(wrapper.text()).not.toContain(formatTime(128));
|
||||
});
|
||||
|
||||
it('hides the redundant subtitle count for conversation-count metrics', async () => {
|
||||
ReportsAPI.getDrilldown.mockResolvedValue({
|
||||
data: {
|
||||
meta: {
|
||||
total_count: 5,
|
||||
current_page: 1,
|
||||
record_type: 'conversation',
|
||||
conversation_count: 5,
|
||||
},
|
||||
payload,
|
||||
},
|
||||
});
|
||||
const wrapper = mountDrawer({
|
||||
props: { metric: 'conversations_count', bucketValue: 5 },
|
||||
});
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.text()).toContain('5');
|
||||
expect(wrapper.text()).not.toContain('conversations');
|
||||
});
|
||||
|
||||
it('keeps the subtitle count when it differs from the stat value', async () => {
|
||||
ReportsAPI.getDrilldown.mockResolvedValue({
|
||||
data: {
|
||||
meta: {
|
||||
total_count: 8,
|
||||
current_page: 1,
|
||||
record_type: 'conversation',
|
||||
conversation_count: 5,
|
||||
},
|
||||
payload,
|
||||
},
|
||||
});
|
||||
const wrapper = mountDrawer({
|
||||
props: { metric: 'resolutions_count', bucketValue: 8 },
|
||||
});
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.text()).toContain('5 conversations');
|
||||
});
|
||||
|
||||
it('anchors the drawer to the inline-end edge so it flips in RTL', async () => {
|
||||
const wrapper = mountDrawer();
|
||||
await flushPromises();
|
||||
|
||||
const drawer = wrapper.get('[role="dialog"]');
|
||||
expect(drawer.classes()).toContain('end-0');
|
||||
expect(drawer.classes()).not.toContain('right-0');
|
||||
});
|
||||
|
||||
it('flips the navigation caret icons in RTL', async () => {
|
||||
const wrapper = mountDrawer({ props: { canPrev: true, canNext: true } });
|
||||
await flushPromises();
|
||||
|
||||
expect(
|
||||
wrapper.get('[aria-label="REPORT.DRILLDOWN.PREVIOUS_BUCKET"]').classes()
|
||||
).toContain('rtl:rotate-180');
|
||||
expect(
|
||||
wrapper.get('[aria-label="REPORT.DRILLDOWN.NEXT_BUCKET"]').classes()
|
||||
).toContain('rtl:rotate-180');
|
||||
});
|
||||
|
||||
it('emits close when the drawer close button is clicked', async () => {
|
||||
const wrapper = mountDrawer();
|
||||
await flushPromises();
|
||||
|
||||
await wrapper.get('[aria-label="REPORT.DRILLDOWN.CLOSE"]').trigger('click');
|
||||
|
||||
expect(wrapper.emitted('close')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('emits navigate when the next button is clicked', async () => {
|
||||
const wrapper = mountDrawer({ props: { canNext: true } });
|
||||
await flushPromises();
|
||||
|
||||
await wrapper
|
||||
.get('[aria-label="REPORT.DRILLDOWN.NEXT_BUCKET"]')
|
||||
.trigger('click');
|
||||
|
||||
expect(wrapper.emitted('navigate')).toStrictEqual([[1]]);
|
||||
});
|
||||
|
||||
it('does not emit navigate past the available range', async () => {
|
||||
const wrapper = mountDrawer({ props: { canPrev: false } });
|
||||
await flushPromises();
|
||||
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
|
||||
|
||||
expect(wrapper.emitted('navigate')).toBeUndefined();
|
||||
});
|
||||
|
||||
it('moves focus into the drawer when opened', async () => {
|
||||
const target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
const wrapper = mountDrawer({ attachTo: target });
|
||||
await flushPromises();
|
||||
await nextTick();
|
||||
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper.find('[role="dialog"]').element
|
||||
);
|
||||
|
||||
wrapper.unmount();
|
||||
target.remove();
|
||||
});
|
||||
|
||||
it('closes on Escape even when focus is outside the drawer', async () => {
|
||||
const target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
const wrapper = mountDrawer({ attachTo: target });
|
||||
await flushPromises();
|
||||
|
||||
document.body.focus();
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
|
||||
|
||||
expect(wrapper.emitted('close')).toBeTruthy();
|
||||
|
||||
wrapper.unmount();
|
||||
target.remove();
|
||||
});
|
||||
|
||||
it('restores focus to the previously focused element when closed', async () => {
|
||||
const opener = document.createElement('button');
|
||||
const target = document.createElement('div');
|
||||
document.body.appendChild(opener);
|
||||
document.body.appendChild(target);
|
||||
opener.focus();
|
||||
|
||||
const wrapper = mountDrawer({ attachTo: target });
|
||||
await flushPromises();
|
||||
await nextTick();
|
||||
|
||||
await wrapper.get('[aria-label="REPORT.DRILLDOWN.CLOSE"]').trigger('click');
|
||||
|
||||
expect(document.activeElement).toBe(opener);
|
||||
|
||||
wrapper.unmount();
|
||||
target.remove();
|
||||
opener.remove();
|
||||
});
|
||||
});
|
||||
+124
@@ -0,0 +1,124 @@
|
||||
import { flushPromises, mount } from '@vue/test-utils';
|
||||
import ReportsAPI from 'dashboard/api/reports';
|
||||
import { useReportDrilldown } from '../useReportDrilldown';
|
||||
|
||||
vi.mock('dashboard/api/reports', () => ({
|
||||
default: {
|
||||
getDrilldown: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
const deferredPromise = () => {
|
||||
let resolve;
|
||||
let reject;
|
||||
const promise = new Promise((resolvePromise, rejectPromise) => {
|
||||
resolve = resolvePromise;
|
||||
reject = rejectPromise;
|
||||
});
|
||||
|
||||
return { promise, resolve, reject };
|
||||
};
|
||||
|
||||
const drilldownRequest = overrides => ({
|
||||
metric: 'conversations_count',
|
||||
bucketTimestamp: 1,
|
||||
from: 1621103400,
|
||||
to: 1621621800,
|
||||
type: 'account',
|
||||
groupBy: 'day',
|
||||
businessHours: false,
|
||||
...overrides,
|
||||
});
|
||||
|
||||
describe('useReportDrilldown', () => {
|
||||
const mountComposable = () =>
|
||||
mount({
|
||||
setup() {
|
||||
return useReportDrilldown();
|
||||
},
|
||||
template: '<div />',
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('does not request drilldown again for an identical active request', async () => {
|
||||
const request = deferredPromise();
|
||||
ReportsAPI.getDrilldown.mockReturnValue(request.promise);
|
||||
|
||||
const wrapper = mountComposable();
|
||||
wrapper.vm.open(drilldownRequest());
|
||||
wrapper.vm.open(drilldownRequest());
|
||||
|
||||
expect(ReportsAPI.getDrilldown).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('aborts an in-flight request when a newer request is opened', async () => {
|
||||
const firstRequest = deferredPromise();
|
||||
const secondRequest = deferredPromise();
|
||||
let firstSignal;
|
||||
|
||||
ReportsAPI.getDrilldown
|
||||
.mockImplementationOnce(({ signal }) => {
|
||||
firstSignal = signal;
|
||||
return firstRequest.promise;
|
||||
})
|
||||
.mockReturnValueOnce(secondRequest.promise);
|
||||
|
||||
const wrapper = mountComposable();
|
||||
wrapper.vm.open(drilldownRequest({ bucketTimestamp: 1 }));
|
||||
wrapper.vm.open(drilldownRequest({ bucketTimestamp: 2 }));
|
||||
|
||||
expect(firstSignal.aborted).toBe(true);
|
||||
});
|
||||
|
||||
it('passes an abort signal to drilldown requests', async () => {
|
||||
const request = deferredPromise();
|
||||
ReportsAPI.getDrilldown.mockReturnValue(request.promise);
|
||||
|
||||
const wrapper = mountComposable();
|
||||
wrapper.vm.open(drilldownRequest());
|
||||
|
||||
expect(ReportsAPI.getDrilldown).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
page: 1,
|
||||
signal: expect.any(AbortSignal),
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('ignores stale responses when a newer request is opened first', async () => {
|
||||
const firstRequest = deferredPromise();
|
||||
const secondRequest = deferredPromise();
|
||||
ReportsAPI.getDrilldown
|
||||
.mockReturnValueOnce(firstRequest.promise)
|
||||
.mockReturnValueOnce(secondRequest.promise);
|
||||
|
||||
const wrapper = mountComposable();
|
||||
wrapper.vm.open(drilldownRequest({ bucketTimestamp: 1 }));
|
||||
wrapper.vm.open(drilldownRequest({ bucketTimestamp: 2 }));
|
||||
|
||||
secondRequest.resolve({
|
||||
data: {
|
||||
meta: { current_page: 1, total_count: 1 },
|
||||
payload: [{ id: 'second' }],
|
||||
},
|
||||
});
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.vm.records).toEqual([{ id: 'second' }]);
|
||||
expect(wrapper.vm.meta).toEqual({ current_page: 1, total_count: 1 });
|
||||
|
||||
firstRequest.resolve({
|
||||
data: {
|
||||
meta: { current_page: 1, total_count: 1 },
|
||||
payload: [{ id: 'first' }],
|
||||
},
|
||||
});
|
||||
await flushPromises();
|
||||
|
||||
expect(wrapper.vm.records).toEqual([{ id: 'second' }]);
|
||||
expect(wrapper.vm.meta).toEqual({ current_page: 1, total_count: 1 });
|
||||
});
|
||||
});
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
import { computed, ref } from 'vue';
|
||||
import ReportsAPI from 'dashboard/api/reports';
|
||||
|
||||
export function useReportDrilldown() {
|
||||
const activeRequest = ref(null);
|
||||
const records = ref([]);
|
||||
const meta = ref({});
|
||||
const isFetching = ref(false);
|
||||
const isFetchingMore = ref(false);
|
||||
const hasError = ref(false);
|
||||
let requestToken = 0;
|
||||
let activeRequestController = null;
|
||||
let activeRequestFingerprint = null;
|
||||
|
||||
const hasRecords = computed(() => records.value.length > 0);
|
||||
const hasMore = computed(() => {
|
||||
return records.value.length < (meta.value.total_count || 0);
|
||||
});
|
||||
|
||||
const isCurrentRequest = token =>
|
||||
token === requestToken && !!activeRequest.value;
|
||||
|
||||
const requestFingerprint = request =>
|
||||
JSON.stringify({
|
||||
metric: request.metric,
|
||||
bucketTimestamp: request.bucketTimestamp,
|
||||
from: request.from,
|
||||
to: request.to,
|
||||
type: request.type,
|
||||
id: request.id,
|
||||
groupBy: request.groupBy,
|
||||
businessHours: request.businessHours,
|
||||
});
|
||||
|
||||
const abortActiveRequest = () => {
|
||||
if (!activeRequestController) return;
|
||||
|
||||
activeRequestController.abort();
|
||||
activeRequestController = null;
|
||||
};
|
||||
|
||||
const isAbortError = error =>
|
||||
error?.name === 'AbortError' ||
|
||||
error?.name === 'CanceledError' ||
|
||||
error?.code === 'ERR_CANCELED';
|
||||
|
||||
const fetchPage = async (page, token = requestToken) => {
|
||||
if (!activeRequest.value) return;
|
||||
|
||||
const request = activeRequest.value;
|
||||
const controller = new AbortController();
|
||||
const loadingState = page === 1 ? isFetching : isFetchingMore;
|
||||
activeRequestController = controller;
|
||||
loadingState.value = true;
|
||||
hasError.value = false;
|
||||
|
||||
try {
|
||||
const response = await ReportsAPI.getDrilldown({
|
||||
...request,
|
||||
page,
|
||||
signal: controller.signal,
|
||||
});
|
||||
if (!isCurrentRequest(token)) return;
|
||||
|
||||
meta.value = response.data.meta || {};
|
||||
records.value =
|
||||
page === 1
|
||||
? response.data.payload || []
|
||||
: [...records.value, ...(response.data.payload || [])];
|
||||
} catch (error) {
|
||||
if (!isCurrentRequest(token) || isAbortError(error)) return;
|
||||
|
||||
hasError.value = true;
|
||||
} finally {
|
||||
if (activeRequestController === controller) {
|
||||
activeRequestController = null;
|
||||
}
|
||||
|
||||
if (isCurrentRequest(token)) {
|
||||
loadingState.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const open = async request => {
|
||||
const fingerprint = requestFingerprint(request);
|
||||
if (activeRequestFingerprint === fingerprint) return;
|
||||
|
||||
abortActiveRequest();
|
||||
requestToken += 1;
|
||||
activeRequestFingerprint = fingerprint;
|
||||
activeRequest.value = request;
|
||||
records.value = [];
|
||||
meta.value = {};
|
||||
hasError.value = false;
|
||||
isFetchingMore.value = false;
|
||||
await fetchPage(1, requestToken);
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
abortActiveRequest();
|
||||
requestToken += 1;
|
||||
activeRequestFingerprint = null;
|
||||
activeRequest.value = null;
|
||||
records.value = [];
|
||||
meta.value = {};
|
||||
hasError.value = false;
|
||||
isFetching.value = false;
|
||||
isFetchingMore.value = false;
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
if (
|
||||
!activeRequest.value ||
|
||||
!hasMore.value ||
|
||||
isFetching.value ||
|
||||
isFetchingMore.value
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetchPage((meta.value.current_page || 1) + 1, requestToken);
|
||||
};
|
||||
|
||||
return {
|
||||
activeRequest,
|
||||
records,
|
||||
meta,
|
||||
isFetching,
|
||||
isFetchingMore,
|
||||
hasError,
|
||||
hasRecords,
|
||||
hasMore,
|
||||
open,
|
||||
close,
|
||||
loadMore,
|
||||
};
|
||||
}
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import ReportContainer from '../ReportContainer.vue';
|
||||
|
||||
vi.mock('dashboard/composables', () => ({
|
||||
useAlert: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('dashboard/composables/useReportMetrics', () => ({
|
||||
useReportMetrics: () => ({
|
||||
calculateTrend: () => 0,
|
||||
isAverageMetricType: key =>
|
||||
['avg_first_response_time', 'avg_resolution_time', 'reply_time'].includes(
|
||||
key
|
||||
),
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('ReportContainer.vue', () => {
|
||||
const mountComponent = ({
|
||||
dataPoint = { value: 2, timestamp: 1621103400 },
|
||||
data,
|
||||
reportKey = 'conversations_count',
|
||||
role = 'administrator',
|
||||
} = {}) =>
|
||||
shallowMount(ReportContainer, {
|
||||
props: {
|
||||
from: 1621103400,
|
||||
to: 1621621800,
|
||||
groupBy: { period: 'day' },
|
||||
reportType: 'inbox',
|
||||
selectedItemId: 1,
|
||||
businessHours: true,
|
||||
reportKeys: {
|
||||
CONVERSATIONS: reportKey,
|
||||
},
|
||||
},
|
||||
global: {
|
||||
mocks: {
|
||||
$t: key => key,
|
||||
$store: {
|
||||
getters: {
|
||||
getAccountReports: {
|
||||
isFetching: {
|
||||
[reportKey]: false,
|
||||
},
|
||||
data: {
|
||||
[reportKey]: data || [dataPoint],
|
||||
},
|
||||
},
|
||||
getCurrentRole: role,
|
||||
},
|
||||
},
|
||||
},
|
||||
stubs: {
|
||||
ChartStats: true,
|
||||
ReportDrilldownDrawer: {
|
||||
name: 'ReportDrilldownDrawer',
|
||||
props: [
|
||||
'open',
|
||||
'metric',
|
||||
'metricName',
|
||||
'bucketLabel',
|
||||
'bucketTimestamp',
|
||||
'bucketValue',
|
||||
'isAverageMetric',
|
||||
'from',
|
||||
'to',
|
||||
'type',
|
||||
'id',
|
||||
'groupBy',
|
||||
'businessHours',
|
||||
'canPrev',
|
||||
'canNext',
|
||||
],
|
||||
emits: ['navigate', 'close'],
|
||||
template: '<div />',
|
||||
},
|
||||
BarChart: {
|
||||
name: 'BarChart',
|
||||
props: ['collection', 'chartOptions', 'clickable'],
|
||||
emits: ['elementClick'],
|
||||
template:
|
||||
'<button data-test-id="bar-chart" @click="$emit(\'elementClick\', { dataIndex: 0, label: \'20-May\', value: 2 })" />',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('opens a drilldown request with report context when a non-zero bar is clicked', async () => {
|
||||
const wrapper = mountComponent();
|
||||
|
||||
await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
|
||||
|
||||
const drawer = wrapper.findComponent({ name: 'ReportDrilldownDrawer' });
|
||||
expect(drawer.props('open')).toBe(true);
|
||||
expect(drawer.props()).toMatchObject({
|
||||
metric: 'conversations_count',
|
||||
metricName: 'REPORT.METRICS.CONVERSATIONS.NAME',
|
||||
bucketLabel: '15-May',
|
||||
bucketTimestamp: 1621103400,
|
||||
from: 1621103400,
|
||||
to: 1621621800,
|
||||
type: 'inbox',
|
||||
id: 1,
|
||||
groupBy: 'day',
|
||||
businessHours: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('shows an alert and does not open drilldown for non-admin users', async () => {
|
||||
const wrapper = mountComponent({ role: 'agent' });
|
||||
|
||||
await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
|
||||
|
||||
expect(useAlert).toHaveBeenCalledWith('REPORT.DRILLDOWN.ADMIN_ONLY');
|
||||
expect(
|
||||
wrapper.findComponent({ name: 'ReportDrilldownDrawer' }).props('open')
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it('does not open drilldown for zero-value count bars', async () => {
|
||||
const wrapper = mountComponent({
|
||||
dataPoint: { value: 0, timestamp: 1621103400 },
|
||||
});
|
||||
|
||||
await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
|
||||
|
||||
expect(
|
||||
wrapper.findComponent({ name: 'ReportDrilldownDrawer' }).props('open')
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it('opens average metric drilldown when the bucket has contributing records', async () => {
|
||||
const wrapper = mountComponent({
|
||||
reportKey: 'avg_first_response_time',
|
||||
dataPoint: { value: 90, count: 2, timestamp: 1621103400 },
|
||||
});
|
||||
|
||||
await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
|
||||
|
||||
const drawer = wrapper.findComponent({ name: 'ReportDrilldownDrawer' });
|
||||
expect(drawer.props('open')).toBe(true);
|
||||
expect(drawer.props()).toMatchObject({
|
||||
metric: 'avg_first_response_time',
|
||||
bucketTimestamp: 1621103400,
|
||||
});
|
||||
});
|
||||
|
||||
it('navigates to adjacent drillable buckets within the report range', async () => {
|
||||
const wrapper = mountComponent({
|
||||
data: [
|
||||
{ value: 2, timestamp: 1621103400 },
|
||||
{ value: 0, timestamp: 1621189800 },
|
||||
{ value: 5, timestamp: 1621276200 },
|
||||
],
|
||||
});
|
||||
|
||||
await wrapper.find('[data-test-id="bar-chart"]').trigger('click');
|
||||
|
||||
const drawer = wrapper.findComponent({ name: 'ReportDrilldownDrawer' });
|
||||
// Opened on the first bucket: no previous, but a later drillable bucket exists.
|
||||
expect(drawer.props('bucketTimestamp')).toBe(1621103400);
|
||||
expect(drawer.props('canPrev')).toBe(false);
|
||||
expect(drawer.props('canNext')).toBe(true);
|
||||
|
||||
// Skips the zero-value middle bucket and lands on the last drillable one.
|
||||
drawer.vm.$emit('navigate', 1);
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
expect(drawer.props('bucketTimestamp')).toBe(1621276200);
|
||||
expect(drawer.props('canPrev')).toBe(true);
|
||||
expect(drawer.props('canNext')).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -144,7 +144,20 @@ export const actions = {
|
||||
subscription: async ({ commit }) => {
|
||||
commit(types.default.SET_ACCOUNT_UI_FLAG, { isCheckoutInProcess: true });
|
||||
try {
|
||||
await EnterpriseAccountAPI.subscription();
|
||||
const response = await EnterpriseAccountAPI.subscription();
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throwErrorMessage(error);
|
||||
return null;
|
||||
} finally {
|
||||
commit(types.default.SET_ACCOUNT_UI_FLAG, { isCheckoutInProcess: false });
|
||||
}
|
||||
},
|
||||
|
||||
selectBillingCurrency: async ({ commit }, currency) => {
|
||||
commit(types.default.SET_ACCOUNT_UI_FLAG, { isCheckoutInProcess: true });
|
||||
try {
|
||||
await EnterpriseAccountAPI.selectBillingCurrency(currency);
|
||||
} catch (error) {
|
||||
throwErrorMessage(error);
|
||||
} finally {
|
||||
|
||||
@@ -157,11 +157,13 @@ export const actions = {
|
||||
// Update positions in the store immediately so subsequent mutations preserve correct positions
|
||||
commit(types.SET_ARTICLE_POSITIONS, reorderedGroup);
|
||||
try {
|
||||
await articlesAPI.reorderArticles({
|
||||
const { data } = await articlesAPI.reorderArticles({
|
||||
portalSlug,
|
||||
reorderedGroup,
|
||||
categorySlug,
|
||||
});
|
||||
// Adopt the backend's re-spaced positions so the next reorder isn't computed from stale local values.
|
||||
if (data?.positions) commit(types.SET_ARTICLE_POSITIONS, data.positions);
|
||||
} catch (error) {
|
||||
commit(types.SET_ARTICLE_POSITIONS, oldPositions);
|
||||
throw error;
|
||||
|
||||
@@ -314,6 +314,25 @@ describe('#actions', () => {
|
||||
);
|
||||
});
|
||||
|
||||
it('adopts the backend re-spaced positions when the response returns them', async () => {
|
||||
const serverPositions = { 1: 10, 2: 30, 3: 20 };
|
||||
axios.post.mockResolvedValue({ data: { positions: serverPositions } });
|
||||
|
||||
await actions.reorder(
|
||||
{ commit, state },
|
||||
{
|
||||
portalSlug: 'test-portal',
|
||||
categorySlug: 'test-category',
|
||||
reorderedGroup: { 3: 25 },
|
||||
}
|
||||
);
|
||||
|
||||
expect(commit).toHaveBeenCalledWith(
|
||||
types.default.SET_ARTICLE_POSITIONS,
|
||||
serverPositions
|
||||
);
|
||||
});
|
||||
|
||||
it('rolls back positions and throws when API call fails', async () => {
|
||||
axios.post.mockRejectedValue({ message: 'Network error' });
|
||||
const reorderedGroup = { 1: 1, 2: 2 };
|
||||
|
||||
@@ -19,8 +19,14 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
clickable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['elementClick']);
|
||||
|
||||
ChartJS.register(Title, Tooltip, BarElement, CategoryScale, LinearScale);
|
||||
|
||||
const fontFamily =
|
||||
@@ -67,8 +73,39 @@ const defaultChartOptions = {
|
||||
},
|
||||
};
|
||||
|
||||
const handleClick = (event, elements, chart) => {
|
||||
props.chartOptions.onClick?.(event, elements, chart);
|
||||
|
||||
if (!props.clickable || !elements.length) return;
|
||||
|
||||
const { datasetIndex, index } = elements[0];
|
||||
const dataset = props.collection.datasets?.[datasetIndex] || {};
|
||||
|
||||
emit('elementClick', {
|
||||
datasetIndex,
|
||||
dataIndex: index,
|
||||
dataset,
|
||||
label: props.collection.labels?.[index],
|
||||
value: dataset.data?.[index],
|
||||
});
|
||||
};
|
||||
|
||||
const handleHover = (event, elements, chart) => {
|
||||
props.chartOptions.onHover?.(event, elements, chart);
|
||||
|
||||
if (!event?.native?.target) return;
|
||||
|
||||
event.native.target.style.cursor =
|
||||
props.clickable && elements.length ? 'pointer' : 'default';
|
||||
};
|
||||
|
||||
const options = computed(() => {
|
||||
return { ...defaultChartOptions, ...props.chartOptions };
|
||||
return {
|
||||
...defaultChartOptions,
|
||||
...props.chartOptions,
|
||||
onClick: handleClick,
|
||||
onHover: handleHover,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import BarChart from '../charts/BarChart.vue';
|
||||
|
||||
vi.mock('vue-chartjs', () => ({
|
||||
Bar: {
|
||||
name: 'Bar',
|
||||
props: ['data', 'options'],
|
||||
template: '<canvas />',
|
||||
},
|
||||
}));
|
||||
|
||||
describe('BarChart.vue', () => {
|
||||
it('emits the clicked chart element when clickable', () => {
|
||||
const wrapper = shallowMount(BarChart, {
|
||||
props: {
|
||||
clickable: true,
|
||||
collection: {
|
||||
labels: ['20-May'],
|
||||
datasets: [{ type: 'bar', data: [3] }],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const options = wrapper.findComponent({ name: 'Bar' }).props('options');
|
||||
options.onClick({}, [{ datasetIndex: 0, index: 0 }], {});
|
||||
|
||||
expect(wrapper.emitted('elementClick')[0][0]).toEqual({
|
||||
datasetIndex: 0,
|
||||
dataIndex: 0,
|
||||
dataset: { type: 'bar', data: [3] },
|
||||
label: '20-May',
|
||||
value: 3,
|
||||
});
|
||||
});
|
||||
|
||||
it('does not emit when chart is not clickable', () => {
|
||||
const wrapper = shallowMount(BarChart, {
|
||||
props: {
|
||||
clickable: false,
|
||||
collection: {
|
||||
labels: ['20-May'],
|
||||
datasets: [{ type: 'bar', data: [3] }],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const options = wrapper.findComponent({ name: 'Bar' }).props('options');
|
||||
options.onClick({}, [{ datasetIndex: 0, index: 0 }], {});
|
||||
|
||||
expect(wrapper.emitted('elementClick')).toBeUndefined();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user