feat: add upgrade banner for SLA feature (#9240)
- Add an upgrade CTA for the SLA feature ------------------- Co-authored-by: Sojan Jose <sojan@pepalo.com> Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
Shivam Mishra
@@ -10,44 +10,17 @@
|
||||
<SLAListItemLoading v-for="ii in 2" :key="ii" class="mb-3" />
|
||||
</template>
|
||||
<template #body>
|
||||
<div v-if="!records.length" class="w-full min-h-[12rem] relative">
|
||||
<div class="w-full space-y-3">
|
||||
<SLA-list-item
|
||||
class="opacity-25 dark:opacity-20"
|
||||
:sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
|
||||
:description="$t('SLA.LIST.EMPTY.DESC_1')"
|
||||
first-response="20m"
|
||||
next-response="1h"
|
||||
resolution-time="24h"
|
||||
has-business-hours
|
||||
/>
|
||||
<SLA-list-item
|
||||
class="opacity-25 dark:opacity-20"
|
||||
:sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
|
||||
:description="$t('SLA.LIST.EMPTY.DESC_2')"
|
||||
first-response="2h"
|
||||
next-response="4h"
|
||||
resolution-time="4d"
|
||||
has-business-hours
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
|
||||
>
|
||||
<p class="max-w-xs text-sm font-medium text-center">
|
||||
{{ $t('SLA.LIST.404') }}
|
||||
</p>
|
||||
<woot-button
|
||||
color-scheme="primary"
|
||||
icon="plus-sign"
|
||||
class="px-5 mt-4 rounded-xl"
|
||||
@click="openAddPopup"
|
||||
>
|
||||
{{ $t('SLA.ADD_ACTION_LONG') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="records.length" class="flex flex-col w-full h-full gap-3">
|
||||
<SLAPaywallEnterprise
|
||||
v-if="isBehindAPaywall"
|
||||
:is-super-admin="isSuperAdmin"
|
||||
:is-on-chatwoot-cloud="isOnChatwootCloud"
|
||||
@click="onClickCTA"
|
||||
/>
|
||||
<SLAEmptyState
|
||||
v-else-if="!records.length"
|
||||
@primary-action="openAddPopup"
|
||||
/>
|
||||
<div v-else class="flex flex-col w-full h-full gap-3">
|
||||
<SLA-list-item
|
||||
v-for="sla in records"
|
||||
:key="sla.title"
|
||||
@@ -80,25 +53,30 @@
|
||||
</settings-layout>
|
||||
</template>
|
||||
<script>
|
||||
import AddSLA from './AddSLA.vue';
|
||||
import SettingsLayout from '../SettingsLayout.vue';
|
||||
import SLAEmptyState from './components/SLAEmptyState.vue';
|
||||
import SLAHeader from './components/SLAHeader.vue';
|
||||
import SLAListItem from './components/SLAListItem.vue';
|
||||
import SLAListItemLoading from './components/SLAListItemLoading.vue';
|
||||
import SLAPaywallEnterprise from './components/SLAPaywallEnterprise.vue';
|
||||
|
||||
import { mapGetters } from 'vuex';
|
||||
import { convertSecondsToTimeUnit } from '@chatwoot/utils';
|
||||
|
||||
import AddSLA from './AddSLA.vue';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import configMixin from 'shared/mixins/configMixin';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddSLA,
|
||||
SettingsLayout,
|
||||
SLAEmptyState,
|
||||
SLAHeader,
|
||||
SLAListItem,
|
||||
SLAListItemLoading,
|
||||
SettingsLayout,
|
||||
SLAPaywallEnterprise,
|
||||
},
|
||||
mixins: [alertMixin],
|
||||
mixins: [alertMixin, configMixin],
|
||||
data() {
|
||||
return {
|
||||
loading: {},
|
||||
@@ -109,7 +87,12 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
globalConfig: 'globalConfig/get',
|
||||
isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
|
||||
isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
|
||||
records: 'sla/getSLA',
|
||||
currentUser: 'getCurrentUser',
|
||||
accountId: 'getCurrentAccountId',
|
||||
uiFlags: 'sla/getUIFlags',
|
||||
}),
|
||||
deleteConfirmText() {
|
||||
@@ -121,12 +104,21 @@ export default {
|
||||
deleteMessage() {
|
||||
return ` ${this.selectedResponse.name}`;
|
||||
},
|
||||
isBehindAPaywall() {
|
||||
return !this.isFeatureEnabledonAccount(this.accountId, 'sla');
|
||||
},
|
||||
isSuperAdmin() {
|
||||
return this.currentUser.type === 'SuperAdmin';
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('sla/get');
|
||||
},
|
||||
methods: {
|
||||
openAddPopup() {
|
||||
if (this.isBehindAPaywall) {
|
||||
return;
|
||||
}
|
||||
this.showAddPopup = true;
|
||||
},
|
||||
hideAddPopup() {
|
||||
@@ -166,6 +158,12 @@ export default {
|
||||
if (!time) return '-';
|
||||
return `${time}${unit}`;
|
||||
},
|
||||
onClickCTA() {
|
||||
this.$router.push({
|
||||
name: 'billing_settings_index',
|
||||
params: { accountId: this.accountId },
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
import SLAListItem from './SLAListItem.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full min-h-[12rem] relative">
|
||||
<div class="w-full space-y-3">
|
||||
<SLA-list-item
|
||||
class="opacity-25 dark:opacity-20"
|
||||
:sla-name="$t('SLA.LIST.EMPTY.TITLE_1')"
|
||||
:description="$t('SLA.LIST.EMPTY.DESC_1')"
|
||||
first-response="20m"
|
||||
next-response="1h"
|
||||
resolution-time="24h"
|
||||
has-business-hours
|
||||
/>
|
||||
<SLA-list-item
|
||||
class="opacity-25 dark:opacity-20"
|
||||
:sla-name="$t('SLA.LIST.EMPTY.TITLE_2')"
|
||||
:description="$t('SLA.LIST.EMPTY.DESC_2')"
|
||||
first-response="2h"
|
||||
next-response="4h"
|
||||
resolution-time="4d"
|
||||
has-business-hours
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col items-center justify-center w-full h-full bg-gradient-to-t from-white dark:from-slate-900 to-transparent"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup>
|
||||
import BaseEmptyState from './BaseEmptyState.vue';
|
||||
|
||||
const emit = defineEmits(['primary-action']);
|
||||
const primaryAction = () => emit('primary-action');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<base-empty-state>
|
||||
<p class="max-w-xs text-sm font-medium text-center">
|
||||
{{ $t('SLA.LIST.404') }}
|
||||
</p>
|
||||
<woot-button
|
||||
color-scheme="primary"
|
||||
icon="plus-sign"
|
||||
class="px-5 mt-4 rounded-xl"
|
||||
@click="primaryAction"
|
||||
>
|
||||
{{ $t('SLA.ADD_ACTION_LONG') }}
|
||||
</woot-button>
|
||||
</base-empty-state>
|
||||
</template>
|
||||
@@ -0,0 +1,73 @@
|
||||
<script setup>
|
||||
import BaseEmptyState from './BaseEmptyState.vue';
|
||||
|
||||
const props = defineProps({
|
||||
isSuperAdmin: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isOnChatwootCloud: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
const i18nKey = props.isOnChatwootCloud ? 'PAYWALL' : 'ENTERPRISE_PAYWALL';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<base-empty-state>
|
||||
<div
|
||||
class="flex flex-col max-w-md px-6 py-6 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-100 dark:border-slate-900"
|
||||
>
|
||||
<div class="flex items-center w-full gap-2 mb-4">
|
||||
<span
|
||||
class="flex items-center justify-center w-6 h-6 rounded-full bg-woot-75/70 dark:bg-woot-800/40"
|
||||
>
|
||||
<fluent-icon
|
||||
size="14"
|
||||
class="flex-shrink-0 text-woot-500 dark:text-woot-500"
|
||||
icon="lock-closed"
|
||||
/>
|
||||
</span>
|
||||
<span class="text-base font-medium text-slate-900 dark:text-white">
|
||||
{{ $t('SLA.PAYWALL.TITLE') }}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-normal"
|
||||
v-html="$t(`SLA.${i18nKey}.AVAILABLE_ON`)"
|
||||
/>
|
||||
<p class="text-sm font-normal">
|
||||
{{ $t(`SLA.${i18nKey}.UPGRADE_PROMPT`) }}
|
||||
<span v-if="!isOnChatwootCloud && !isSuperAdmin">
|
||||
{{ $t('SLA.ENTERPRISE_PAYWALL.ASK_ADMIN') }}
|
||||
</span>
|
||||
</p>
|
||||
<template v-if="isOnChatwootCloud">
|
||||
<woot-button
|
||||
color-scheme="primary"
|
||||
class="w-full mt-2 text-center rounded-xl"
|
||||
size="expanded"
|
||||
is-expanded
|
||||
@click="emit('click')"
|
||||
>
|
||||
{{ $t('SLA.PAYWALL.UPGRADE_NOW') }}
|
||||
</woot-button>
|
||||
</template>
|
||||
<template v-if="isSuperAdmin">
|
||||
<a href="/super_admin" class="block w-full">
|
||||
<woot-button
|
||||
color-scheme="primary"
|
||||
class="w-full mt-2 text-center rounded-xl"
|
||||
size="expanded"
|
||||
is-expanded
|
||||
>
|
||||
{{ $t('SLA.PAYWALL.UPGRADE_NOW') }}
|
||||
</woot-button>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</base-empty-state>
|
||||
</template>
|
||||
Reference in New Issue
Block a user