mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-30 10:42:38 +00:00
ef7bf66476
This PR introduces several improvements to the Captain AI dashboard section: - New billing page, with new colors, layout and meters for Captain usage - Updated the base paywall component to use new colors - Updated PageLayout.vue, it's more generic and can be used for other pages as well - Use flags to toggle empty state and loading state - Add prop for `featureFlag` to show the paywall slot based on feature enabled on account - Update `useAccount` to add a `isCloudFeatureEnabled` - **Removed feature flag checks from captain route definitions**, so the captain entry will always be visible on the sidebar - Add banner to Captain pages for the following cases - Responses usage is over 80% - Documents limit is fully exhausted ### Screenshots <details><summary>Free plan</summary> <p>   </p> </details> <details><summary>Paid plan</summary> <p>   </p> </details> --------- Co-authored-by: Sojan Jose <sojan@pepalo.com> Co-authored-by: Pranav <pranav@chatwoot.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
color: {
|
|
type: String,
|
|
default: 'slate',
|
|
validator: value =>
|
|
['blue', 'ruby', 'amber', 'slate', 'teal'].includes(value),
|
|
},
|
|
actionLabel: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['action']);
|
|
|
|
const bannerClass = computed(() => {
|
|
const classMap = {
|
|
slate: 'bg-n-slate-3 border-n-slate-4 text-n-slate-11',
|
|
amber: 'bg-n-amber-3 border-n-amber-4 text-n-amber-11',
|
|
teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11',
|
|
ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11',
|
|
blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11',
|
|
};
|
|
|
|
return classMap[props.color];
|
|
});
|
|
|
|
const buttonClass = computed(() => {
|
|
const classMap = {
|
|
slate: 'bg-n-slate-4 text-n-slate-11',
|
|
amber: 'bg-n-amber-4 text-n-amber-11',
|
|
teal: 'bg-n-teal-4 text-n-teal-11',
|
|
ruby: 'bg-n-ruby-4 text-n-ruby-11',
|
|
blue: 'bg-n-blue-4 text-n-blue-11',
|
|
};
|
|
|
|
return classMap[props.color];
|
|
});
|
|
|
|
const triggerAction = () => {
|
|
emit('action');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="text-sm rounded-xl flex items-center justify-between gap-2 border"
|
|
:class="[
|
|
bannerClass,
|
|
{
|
|
'py-2 px-3': !actionLabel,
|
|
'pl-3 p-2': actionLabel,
|
|
},
|
|
]"
|
|
>
|
|
<div>
|
|
<slot />
|
|
</div>
|
|
<div>
|
|
<button
|
|
v-if="actionLabel"
|
|
class="px-3 py-1 w-auto grid place-content-center rounded-lg"
|
|
:class="buttonClass"
|
|
@click="triggerAction"
|
|
>
|
|
{{ actionLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|