Merge branch 'develop' into extending-lock-to-single-conversation-to-meta-inbox
This commit is contained in:
Jaideep Guntupalli
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center px-2 truncate border min-w-fit border-slate-75 dark:border-slate-700"
|
||||
:class="showExtendedInfo ? 'py-[5px] rounded-lg' : 'py-0.5 gap-1 rounded'"
|
||||
>
|
||||
<div
|
||||
class="flex items-center gap-1"
|
||||
:class="
|
||||
showExtendedInfo &&
|
||||
'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-75 dark:border-slate-700'
|
||||
"
|
||||
>
|
||||
<fluent-icon
|
||||
size="14"
|
||||
:icon="slaStatus.icon"
|
||||
type="outline"
|
||||
:icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
|
||||
class="flex-shrink-0"
|
||||
:class="slaTextStyles"
|
||||
/>
|
||||
<span
|
||||
v-if="showExtendedInfo"
|
||||
class="text-xs font-medium"
|
||||
:class="slaTextStyles"
|
||||
>
|
||||
{{ slaStatusText }}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="text-xs font-medium"
|
||||
:class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
|
||||
>
|
||||
{{ slaStatus.threshold }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { evaluateSLAStatus } from '../helpers/SLAHelper';
|
||||
|
||||
// const REFRESH_INTERVAL = 60000;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
chat: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
showExtendedInfo: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
slaStatus: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
activeSLA: 'sla/getSLAById',
|
||||
}),
|
||||
slaPolicyId() {
|
||||
return this.chat?.sla_policy_id;
|
||||
},
|
||||
sla() {
|
||||
if (!this.slaPolicyId) return null;
|
||||
return this.activeSLA(this.slaPolicyId);
|
||||
},
|
||||
isSlaMissed() {
|
||||
return this.slaStatus?.isSlaMissed;
|
||||
},
|
||||
slaTextStyles() {
|
||||
return this.isSlaMissed
|
||||
? 'text-red-400 dark:text-red-300'
|
||||
: 'text-yellow-600 dark:text-yellow-500';
|
||||
},
|
||||
slaStatusText() {
|
||||
const upperCaseType = this.slaStatus?.type?.toUpperCase(); // FRT, NRT, or RT
|
||||
const statusKey = this.isSlaMissed ? 'BREACH' : 'DUE';
|
||||
|
||||
return this.$t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
|
||||
status: this.$t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
chat() {
|
||||
this.updateSlaStatus();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.updateSlaStatus();
|
||||
},
|
||||
methods: {
|
||||
updateSlaStatus() {
|
||||
this.slaStatus = evaluateSLAStatus(this.sla, this.chat);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
import { debounce } from '@chatwoot/utils';
|
||||
|
||||
const RESIZE_OBSERVER_DEBOUNCE_TIME = 100;
|
||||
|
||||
function createResizeObserver(el, binding) {
|
||||
const { value } = binding;
|
||||
const observer = new ResizeObserver(
|
||||
debounce(entries => {
|
||||
const entry = entries[0];
|
||||
if (entry && value && typeof value === 'function') {
|
||||
value(entry);
|
||||
}
|
||||
}, RESIZE_OBSERVER_DEBOUNCE_TIME)
|
||||
);
|
||||
|
||||
el.cwResizeObserver = observer;
|
||||
observer.observe(el);
|
||||
}
|
||||
|
||||
function destroyResizeObserver(el) {
|
||||
if (el.cwResizeObserver) {
|
||||
el.cwResizeObserver.unobserve(el);
|
||||
el.cwResizeObserver.disconnect();
|
||||
delete el.cwResizeObserver;
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
bind(el, binding) {
|
||||
createResizeObserver(el, binding);
|
||||
},
|
||||
update(el, binding) {
|
||||
if (binding.oldValue !== binding.value) {
|
||||
destroyResizeObserver(el);
|
||||
createResizeObserver(el, binding);
|
||||
}
|
||||
},
|
||||
unbind(el) {
|
||||
destroyResizeObserver(el);
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,78 @@
|
||||
import resize from '../../directives/resize';
|
||||
|
||||
class ResizeObserverMock {
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
observe() {}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
unobserve() {}
|
||||
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
describe('resize directive', () => {
|
||||
let el;
|
||||
let binding;
|
||||
let observer;
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div');
|
||||
binding = {
|
||||
value: jest.fn(),
|
||||
};
|
||||
observer = {
|
||||
observe: jest.fn(),
|
||||
unobserve: jest.fn(),
|
||||
disconnect: jest.fn(),
|
||||
};
|
||||
window.ResizeObserver = ResizeObserverMock;
|
||||
jest.spyOn(window, 'ResizeObserver').mockImplementation(() => observer);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('should create ResizeObserver on bind', () => {
|
||||
resize.bind(el, binding);
|
||||
|
||||
expect(ResizeObserver).toHaveBeenCalled();
|
||||
expect(observer.observe).toHaveBeenCalledWith(el);
|
||||
});
|
||||
|
||||
it('should call callback on observer callback', () => {
|
||||
el = document.createElement('div');
|
||||
binding = {
|
||||
value: jest.fn(),
|
||||
};
|
||||
|
||||
resize.bind(el, binding);
|
||||
|
||||
const entries = [{ contentRect: { width: 100, height: 100 } }];
|
||||
const callback = binding.value;
|
||||
callback(entries[0]);
|
||||
|
||||
expect(binding.value).toHaveBeenCalledWith(entries[0]);
|
||||
});
|
||||
|
||||
it('should destroy and recreate observer on update', () => {
|
||||
resize.bind(el, binding);
|
||||
|
||||
resize.update(el, { ...binding, oldValue: 'old' });
|
||||
|
||||
expect(observer.unobserve).toHaveBeenCalledWith(el);
|
||||
expect(observer.disconnect).toHaveBeenCalled();
|
||||
expect(ResizeObserver).toHaveBeenCalledTimes(2);
|
||||
expect(observer.observe).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it('should destroy observer on unbind', () => {
|
||||
resize.bind(el, binding);
|
||||
|
||||
resize.unbind(el);
|
||||
|
||||
expect(observer.unobserve).toHaveBeenCalledWith(el);
|
||||
expect(observer.disconnect).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -64,7 +64,14 @@
|
||||
"SNOOZED_UNTIL": "Snoozed until",
|
||||
"SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
|
||||
"SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week",
|
||||
"SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply"
|
||||
"SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply",
|
||||
"SLA_STATUS": {
|
||||
"FRT": "FRT {status}",
|
||||
"NRT": "NRT {status}",
|
||||
"RT": "RT {status}",
|
||||
"BREACH": "breach",
|
||||
"DUE": "due"
|
||||
}
|
||||
},
|
||||
"RESOLVE_DROPDOWN": {
|
||||
"MARK_PENDING": "Mark as pending",
|
||||
|
||||
@@ -83,7 +83,10 @@
|
||||
"CONVERSATION_CREATION": "Send email notifications when a new conversation is created",
|
||||
"CONVERSATION_MENTION": "Send email notifications when you are mentioned in a conversation",
|
||||
"ASSIGNED_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in an assigned conversation",
|
||||
"PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in a participating conversation"
|
||||
"PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in a participating conversation",
|
||||
"SLA_MISSED_FIRST_RESPONSE": "Send email notifications when a conversation misses first response SLA",
|
||||
"SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
|
||||
"SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
|
||||
},
|
||||
"API": {
|
||||
"UPDATE_SUCCESS": "Your notification preferences are updated successfully",
|
||||
@@ -98,7 +101,10 @@
|
||||
"ASSIGNED_CONVERSATION_NEW_MESSAGE": "Send push notifications when a new message is created in an assigned conversation",
|
||||
"PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send push notifications when a new message is created in a participating conversation",
|
||||
"HAS_ENABLED_PUSH": "You have enabled push for this browser.",
|
||||
"REQUEST_PUSH": "Enable push notifications"
|
||||
"REQUEST_PUSH": "Enable push notifications",
|
||||
"SLA_MISSED_FIRST_RESPONSE": "Send push notifications when a conversation misses first response SLA",
|
||||
"SLA_MISSED_NEXT_RESPONSE": "Send push notifications when a conversation misses next response SLA",
|
||||
"SLA_MISSED_RESOLUTION": "Send push notifications when a conversation misses resolution SLA"
|
||||
},
|
||||
"PROFILE_IMAGE": {
|
||||
"LABEL": "Profile Image"
|
||||
|
||||
@@ -4,22 +4,9 @@
|
||||
"ADD_ACTION": "Add SLA",
|
||||
"DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
|
||||
"LEARN_MORE": "Learn more about SLA",
|
||||
"HEADER_BTN_TXT": "Add SLA",
|
||||
"LOADING": "Fetching SLAs",
|
||||
"SEARCH_404": "There are no items matching this query",
|
||||
"SIDEBAR_TXT": "<p><b>SLA</b> <p>Think of Service Level Agreements (SLAs) like friendly promises between a service provider and a customer.</p> <p> These promises set clear expectations for things like how quickly the team will respond to issues, making sure you always get a reliable and top-notch experience!</p>",
|
||||
"LIST": {
|
||||
"404": "There are no SLAs available in this account.",
|
||||
"TITLE": "Manage SLA",
|
||||
"DESC": "SLAs: Friendly promises for great service!",
|
||||
"TABLE_HEADER": [
|
||||
"Name",
|
||||
"Description",
|
||||
"FRT",
|
||||
"NRT",
|
||||
"RT",
|
||||
"Business Hours"
|
||||
],
|
||||
"BUSINESS_HOURS_ON": "Business hours on",
|
||||
"BUSINESS_HOURS_OFF": "Business hours off",
|
||||
"RESPONSE_TYPES": {
|
||||
|
||||
@@ -1,6 +1,23 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loadingMessage: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col w-full h-full gap-10 font-inter">
|
||||
<slot name="header" />
|
||||
<slot name="body" />
|
||||
<div>
|
||||
<slot v-if="isLoading" name="loading">
|
||||
<woot-loading-state :message="loadingMessage" />
|
||||
</slot>
|
||||
<slot v-else name="body" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@ defineProps({
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between shadow-sm sm:divide-x sm:divide-slate-75 sm:dark:divide-slate-700/50 group bg-white border border-solid rounded-xl dark:bg-slate-800 border-slate-75 dark:border-slate-700/50 max-w-[900px] w-full"
|
||||
class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between shadow-sm group bg-white border border-solid rounded-xl dark:bg-slate-800 border-slate-75 dark:border-slate-700/50 max-w-[900px] w-full"
|
||||
>
|
||||
<!-- left side section -->
|
||||
<slot name="leftSection">
|
||||
|
||||
@@ -236,6 +236,54 @@
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
class="notification--checkbox"
|
||||
type="checkbox"
|
||||
value="email_sla_missed_first_response"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<label for="sla_missed_first_response">
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.SLA_MISSED_FIRST_RESPONSE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
class="notification--checkbox"
|
||||
type="checkbox"
|
||||
value="email_sla_missed_next_response"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<label for="sla_missed_next_response">
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.SLA_MISSED_NEXT_RESPONSE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
|
||||
<input
|
||||
v-model="selectedEmailFlags"
|
||||
class="notification--checkbox"
|
||||
type="checkbox"
|
||||
value="email_sla_missed_resolution"
|
||||
@input="handleEmailInput"
|
||||
/>
|
||||
<label for="sla_missed_resolution">
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.SLA_MISSED_RESOLUTION'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -352,6 +400,57 @@
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
|
||||
<input
|
||||
v-model="selectedPushFlags"
|
||||
class="notification--checkbox"
|
||||
type="checkbox"
|
||||
value="push_sla_missed_first_response"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
<label for="sla_missed_first_response">
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.SLA_MISSED_FIRST_RESPONSE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
|
||||
<input
|
||||
v-model="selectedPushFlags"
|
||||
class="notification--checkbox"
|
||||
type="checkbox"
|
||||
value="push_sla_missed_next_response"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
<label for="sla_missed_next_response">
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.SLA_MISSED_NEXT_RESPONSE'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div v-if="isSLAEnabled" class="flex items-center gap-2 mb-1">
|
||||
<input
|
||||
v-model="selectedPushFlags"
|
||||
class="notification--checkbox"
|
||||
type="checkbox"
|
||||
value="push_sla_missed_resolution"
|
||||
@input="handlePushInput"
|
||||
/>
|
||||
<label for="sla_missed_resolution">
|
||||
{{
|
||||
$t(
|
||||
'PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.SLA_MISSED_RESOLUTION'
|
||||
)
|
||||
}}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -367,6 +466,7 @@ import {
|
||||
requestPushPermissions,
|
||||
verifyServiceWorkerExistence,
|
||||
} from '../../../../helper/pushHelper';
|
||||
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
|
||||
|
||||
export default {
|
||||
mixins: [alertMixin, configMixin, uiSettingsMixin],
|
||||
@@ -393,13 +493,18 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
accountId: 'getCurrentAccountId',
|
||||
emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
|
||||
pushFlags: 'userNotificationSettings/getSelectedPushFlags',
|
||||
uiSettings: 'getUISettings',
|
||||
isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
|
||||
}),
|
||||
hasPushAPISupport() {
|
||||
return !!('Notification' in window);
|
||||
},
|
||||
isSLAEnabled() {
|
||||
return this.isFeatureEnabledonAccount(this.accountId, FEATURE_FLAGS.SLA);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
emailFlags(value) {
|
||||
|
||||
@@ -1,99 +1,58 @@
|
||||
<template>
|
||||
<div class="flex-1 overflow-auto p-4">
|
||||
<woot-button
|
||||
color-scheme="success"
|
||||
class-names="button--fixed-top"
|
||||
icon="add-circle"
|
||||
@click="openAddPopup"
|
||||
>
|
||||
{{ $t('SLA.HEADER_BTN_TXT') }}
|
||||
</woot-button>
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="w-full xl:w-3/5">
|
||||
<p
|
||||
v-if="!uiFlags.isFetching && !records.length"
|
||||
class="flex h-full items-center flex-col justify-center"
|
||||
>
|
||||
{{ $t('SLA.LIST.404') }}
|
||||
</p>
|
||||
<woot-loading-state
|
||||
v-if="uiFlags.isFetching"
|
||||
:message="$t('SLA.LOADING')"
|
||||
<settings-layout
|
||||
:is-loading="uiFlags.isFetching"
|
||||
:loading-message="$t('SLA.LOADING')"
|
||||
>
|
||||
<template #header>
|
||||
<SLA-header @click="openAddPopup" />
|
||||
</template>
|
||||
<template #loading>
|
||||
<SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
|
||||
</template>
|
||||
<template #body>
|
||||
<p
|
||||
v-if="!records.length"
|
||||
class="flex flex-col items-center justify-center h-full"
|
||||
>
|
||||
{{ $t('SLA.LIST.404') }}
|
||||
</p>
|
||||
<div v-if="records.length" class="flex flex-col w-full h-full gap-3">
|
||||
<SLA-list-item
|
||||
v-for="sla in records"
|
||||
:key="sla.title"
|
||||
:sla-name="sla.name"
|
||||
:description="sla.description"
|
||||
:first-response="displayTime(sla.first_response_time_threshold)"
|
||||
:next-response="displayTime(sla.next_response_time_threshold)"
|
||||
:resolution-time="displayTime(sla.resolution_time_threshold)"
|
||||
:has-business-hours="sla.only_during_business_hours"
|
||||
:is-loading="loading[sla.id]"
|
||||
@click="openDeletePopup(sla)"
|
||||
/>
|
||||
<table v-if="!uiFlags.isFetching && records.length" class="woot-table">
|
||||
<thead>
|
||||
<th v-for="thHeader in $t('SLA.LIST.TABLE_HEADER')" :key="thHeader">
|
||||
{{ thHeader }}
|
||||
</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="sla in records" :key="sla.title">
|
||||
<td>
|
||||
<span
|
||||
class="inline-block overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ sla.name }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ sla.description }}</td>
|
||||
<td>
|
||||
<span class="flex items-center">
|
||||
{{ displayTime(sla.first_response_time_threshold) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="flex items-center">
|
||||
{{ displayTime(sla.next_response_time_threshold) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="flex items-center">
|
||||
{{ displayTime(sla.resolution_time_threshold) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="flex items-center">
|
||||
{{ sla.only_during_business_hours }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="button-wrapper">
|
||||
<woot-button
|
||||
v-tooltip.top="$t('SLA.FORM.DELETE')"
|
||||
variant="smooth"
|
||||
color-scheme="alert"
|
||||
size="tiny"
|
||||
icon="dismiss-circle"
|
||||
class-names="grey-btn"
|
||||
:is-loading="loading[sla.id]"
|
||||
@click="openDeletePopup(sla)"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="w-1/3 hidden xl:block">
|
||||
<span v-dompurify-html="$t('SLA.SIDEBAR_TXT')" />
|
||||
</div>
|
||||
</div>
|
||||
<woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
|
||||
<add-SLA @close="hideAddPopup" />
|
||||
</woot-modal>
|
||||
<woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
|
||||
<add-SLA @close="hideAddPopup" />
|
||||
</woot-modal>
|
||||
|
||||
<woot-delete-modal
|
||||
:show.sync="showDeleteConfirmationPopup"
|
||||
:on-close="closeDeletePopup"
|
||||
:on-confirm="confirmDeletion"
|
||||
:title="$t('SLA.DELETE.CONFIRM.TITLE')"
|
||||
:message="$t('SLA.DELETE.CONFIRM.MESSAGE')"
|
||||
:message-value="deleteMessage"
|
||||
:confirm-text="deleteConfirmText"
|
||||
:reject-text="deleteRejectText"
|
||||
/>
|
||||
</div>
|
||||
<woot-delete-modal
|
||||
:show.sync="showDeleteConfirmationPopup"
|
||||
:on-close="closeDeletePopup"
|
||||
:on-confirm="confirmDeletion"
|
||||
:title="$t('SLA.DELETE.CONFIRM.TITLE')"
|
||||
:message="$t('SLA.DELETE.CONFIRM.MESSAGE')"
|
||||
:message-value="deleteMessage"
|
||||
:confirm-text="deleteConfirmText"
|
||||
:reject-text="deleteRejectText"
|
||||
/>
|
||||
</template>
|
||||
</settings-layout>
|
||||
</template>
|
||||
<script>
|
||||
import SettingsLayout from '../SettingsLayout.vue';
|
||||
import SLAHeader from './components/SLAHeader.vue';
|
||||
import SLAListItem from './components/SLAListItem.vue';
|
||||
import SLAListItemLoading from './components/SLAListItemLoading.vue';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { convertSecondsToTimeUnit } from '@chatwoot/utils';
|
||||
|
||||
@@ -103,6 +62,10 @@ import alertMixin from 'shared/mixins/alertMixin';
|
||||
export default {
|
||||
components: {
|
||||
AddSLA,
|
||||
SLAHeader,
|
||||
SLAListItem,
|
||||
SLAListItemLoading,
|
||||
SettingsLayout,
|
||||
},
|
||||
mixins: [alertMixin],
|
||||
data() {
|
||||
|
||||
@@ -35,7 +35,11 @@ defineProps({
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<base-settings-list-item :title="slaName" :description="description">
|
||||
<base-settings-list-item
|
||||
class="sm:divide-x sm:divide-slate-75 sm:dark:divide-slate-700/50"
|
||||
:title="slaName"
|
||||
:description="description"
|
||||
>
|
||||
<template #label>
|
||||
<SLA-business-hours-label :has-business-hours="hasBusinessHours" />
|
||||
</template>
|
||||
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import BaseSettingsListItem from '../../components/BaseSettingsListItem.vue';
|
||||
</script>
|
||||
<template>
|
||||
<base-settings-list-item class="opacity-50">
|
||||
<template #title>
|
||||
<div class="w-24 h-[26px] rounded-md bg-slate-50 animate-pulse" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="w-64 h-4 mb-0.5 rounded-md bg-slate-50 animate-pulse" />
|
||||
<div class="w-48 h-4 rounded-md bg-slate-50 animate-pulse" />
|
||||
</template>
|
||||
<template #label>
|
||||
<div class="w-32 h-[26px] bg-slate-50 animate-pulse rounded-md" />
|
||||
</template>
|
||||
<template #rightSection>
|
||||
<div
|
||||
class="flex items-center sm:rtl:!border-l-0 sm:rtl:!border-r sm:rtl:border-solid sm:rtl:border-slate-75 sm:rtl:dark:border-slate-700/50 gap-1.5 w-fit sm:w-full sm:gap-0 sm:justify-between"
|
||||
>
|
||||
<div
|
||||
v-for="ii in 3"
|
||||
:key="ii"
|
||||
class="flex justify-end w-1/3 h-full px-4"
|
||||
>
|
||||
<div class="w-32 h-full rounded-md bg-slate-50 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</base-settings-list-item>
|
||||
</template>
|
||||
@@ -1,18 +1,14 @@
|
||||
import { frontendURL } from '../../../../helper/URLHelper';
|
||||
|
||||
const SettingsContent = () => import('../Wrapper.vue');
|
||||
const SettingsWrapper = () => import('../SettingsWrapper.vue');
|
||||
const Index = () => import('./Index.vue');
|
||||
|
||||
export default {
|
||||
routes: [
|
||||
{
|
||||
path: frontendURL('accounts/:accountId/settings/sla'),
|
||||
component: SettingsContent,
|
||||
props: {
|
||||
headerTitle: 'SLA.HEADER',
|
||||
icon: 'document-list-clock',
|
||||
showNewButton: true,
|
||||
},
|
||||
component: SettingsWrapper,
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
|
||||
@@ -30,6 +30,7 @@ import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
|
||||
import VueDOMPurifyHTML from 'vue-dompurify-html';
|
||||
import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
|
||||
import AnalyticsPlugin from '../dashboard/helper/AnalyticsHelper/plugin';
|
||||
import resizeDirective from '../dashboard/helper/directives/resize.js';
|
||||
|
||||
Vue.config.env = process.env;
|
||||
|
||||
@@ -78,6 +79,7 @@ Vue.component('woot-switch', WootSwitch);
|
||||
Vue.component('woot-wizard', WootWizard);
|
||||
Vue.component('fluent-icon', FluentIcon);
|
||||
|
||||
Vue.directive('resize', resizeDirective);
|
||||
const i18nConfig = new VueI18n({
|
||||
locale: 'en',
|
||||
messages: i18n,
|
||||
|
||||
Reference in New Issue
Block a user