akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Design Updates

Browse Source
This commit is contained in:
Pranav
2024-11-20 15:56:14 -08:00
parent 93b7ce6eba
commit 16432a6ebc
72 changed files with 571 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+5 -5
View File
@@ -18,7 +18,7 @@
}
&.multiselect--disabled {
@apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
@apply opacity-50 border border-n-weak rounded-md cursor-not-allowed;
.multiselect__select {
@apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
@@ -44,7 +44,7 @@
}
.multiselect__content-wrapper {
@apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
@apply bg-white dark:bg-slate-900 border border-solid border-n-weak text-slate-800 dark:text-slate-100;
}
.multiselect__content {
@@ -96,7 +96,7 @@
}
.multiselect__tags {
@apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
@apply bg-n-slate-1 border border-solid border-n-weak m-0 min-h-[2.875rem] pt-0;
input {
@apply border-0 border-none;
@@ -121,7 +121,7 @@
.multiselect__input {
@include ghost-input;
@apply text-sm h-[2.875rem] mb-0 p-0;
@apply text-sm !h-[2.375rem] mb-0 !py-0 ;
}
.multiselect__single {
@@ -179,7 +179,7 @@
.multiselect__tags,
.multiselect__input,
.multiselect {
@apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm min-h-[2.5rem];
@apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-lg text-sm min-h-[2.5rem];
}
.multiselect__input {
app/javascript/dashboard/assets/scss/widgets/_base.scss
+7 -2
View File
@@ -74,7 +74,10 @@ input[type='password']:not(.reset-base),
input[type='date']:not(.reset-base),
input[type='email']:not(.reset-base),
input[type='url']:not(.reset-base) {
@apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
@apply block box-border w-full transition-colors;
@apply focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out];
@apply h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md font-normal text-sm;
@apply bg-n-slate-1 text-n-slate-12 border border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 focus:border-n-brand dark:focus:border-n-brand;
&[disabled] {
@apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
@@ -90,7 +93,9 @@ select {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
background-position: right -1rem center;
background-size: 9px 6px;
@apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2 rounded-md w-full text-base font-normal appearance-none transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
@apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2;
@apply rounded-md w-full text-base font-normal appearance-none transition-colors;
@apply text-sm duration-[0.25s] ease-[ease-in-out] bg-n-slate-1 text-n-slate-12 border border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 focus:border-n-brand dark:focus:border-n-brand;
}
// Textarea
app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue
+2 -2
View File
@@ -22,7 +22,7 @@ const handleButtonClick = () => {
<template>
<section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
<header class="sticky top-0 z-10 px-6 lg:px-0">
<div class="w-full max-w-[900px] mx-auto">
<div class="w-full max-w-[960px] mx-auto">
<div class="flex items-center justify-between w-full h-20 gap-2">
<span class="text-xl font-medium text-n-slate-12">
{{ headerTitle }}
@@ -44,7 +44,7 @@ const handleButtonClick = () => {
</div>
</header>
<main class="flex-1 px-6 overflow-y-auto lg:px-0">
<div class="w-full max-w-[900px] mx-auto py-4">
<div class="w-full max-w-[960px] mx-auto py-4">
<slot name="default" />
</div>
</main>
app/javascript/dashboard/components-next/EmptyStateLayout.vue
+2 -2
View File
@@ -29,12 +29,12 @@ defineProps({
<div class="flex flex-col items-center justify-center gap-6">
<div class="flex flex-col items-center justify-center gap-3">
<h2
class="text-3xl font-medium text-center text-slate-900 dark:text-white font-interDisplay"
class="text-3xl font-medium text-center text-slate-900 dark:text-white "
>
{{ title }}
</h2>
<p
class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 tracking-[0.3px]"
>
{{ subtitle }}
</p>
app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue
+2 -2
View File
@@ -60,7 +60,7 @@ const togglePortalSwitcher = () => {
<template>
<section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
<header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
<div class="w-full max-w-[900px] mx-auto">
<div class="w-full max-w-[960px] mx-auto">
<div
v-if="showHeaderTitle"
class="flex items-center justify-start h-20 gap-2"
@@ -95,7 +95,7 @@ const togglePortalSwitcher = () => {
</div>
</header>
<main class="flex-1 px-6 overflow-y-auto lg:px-0">
<div class="w-full max-w-[900px] mx-auto py-3">
<div class="w-full max-w-[960px] mx-auto py-3">
<slot name="content" />
</div>
</main>
app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div class="absolute">
<ul
class="text-sm bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak rounded-xl shadow-sm py-2 n-dropdown-body gap-2 grid list-none px-2 reset-base"
class="text-sm bg-n-alpha-3 backdrop-blur-[100px] shadow-sm py-2 n-dropdown-body gap-2 grid list-none px-2 reset-base"
>
<slot />
</ul>
app/javascript/dashboard/components/ChatList.vue
+2 -1
View File
@@ -751,7 +751,7 @@ watch(conversationFilters, (newVal, oldVal) => {
<template>
<div
class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap bg-n-solid-1 border-n-weak"
:class="[
{ hidden: !showConversationList },
isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
@@ -892,6 +892,7 @@ watch(conversationFilters, (newVal, oldVal) => {
<style scoped>
@tailwind components;
@layer components {
.flex-basis-clamp {
flex-basis: clamp(20rem, 4vw + 21.25rem, 27.5rem);
app/javascript/dashboard/components/Modal.vue
+12 -6
View File
@@ -75,9 +75,9 @@ onMounted(() => {
@mousedown="handleMouseDown"
>
<div
class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
class="relative max-h-full overflow-auto shadow-xl modal-container rtl:text-right bg-n-alpha-3 backdrop-blur-[100px] skip-context-menu"
:class="{
'rounded-xl w-[37.5rem]': !fullWidth,
'rounded-xl w-[36rem]': !fullWidth,
'items-center rounded-none flex h-full justify-center w-full':
fullWidth,
[size]: true,
@@ -102,38 +102,44 @@ onMounted(() => {
<style lang="scss">
.modal-mask {
@apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
.modal-container {
&.medium {
@apply max-w-[80%] w-[56.25rem];
}
// .content-box {
// @apply h-auto p-0;
// }
.content {
@apply p-8;
@apply p-6;
}
form,
.modal-content {
@apply pt-4 pb-8 px-8 self-center;
a {
@apply p-4;
}
}
}
}
.modal-big {
@apply w-full;
}
.modal-mask.right-aligned {
@apply justify-end;
.modal-container {
@apply rounded-none h-full w-[30rem];
}
}
.modal-enter,
.modal-leave {
@apply opacity-0;
}
.modal-enter .modal-container,
.modal-leave .modal-container {
transform: scale(1.1);
app/javascript/dashboard/components/SettingsSection.vue
+3 -3
View File
@@ -23,13 +23,13 @@ export default {
<template>
<div
class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
class="ml-0 mr-0 flex py-8 w-full flex-col xl:flex-row"
:class="{
'border-b border-solid border-slate-50 dark:border-slate-700/30':
showBorder,
}"
>
<div class="w-full xl:w-1/4 min-w-0 xl:max-w-[30%] pr-12">
<div class="w-full xl:w-1/3 min-w-0 xl:max-w-[40%] pr-12">
<p
v-if="title"
class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
@@ -48,7 +48,7 @@ export default {
{{ note }}
</p>
</div>
<div class="w-full xl:w-1/2 min-w-0 xl:max-w-[50%]">
<div class="w-full xl:w-2/3 min-w-0 xl:max-w-[50%]">
<slot />
</div>
</div>
app/javascript/dashboard/components/ui/Wizard.vue
+1 -1
View File
@@ -89,7 +89,7 @@ export default {
@apply bg-woot-500 dark:bg-woot-500;
}
& + .item {
&+.item {
&::before {
@apply bg-woot-500 dark:bg-woot-500;
}
app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+5 -2
View File
@@ -201,10 +201,10 @@ export default {
<style lang="scss" scoped>
.filter {
@apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
@apply p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
&.is-a-macro {
@apply mb-0 bg-white dark:bg-slate-700 p-0 border-0 rounded-none;
@apply mb-0 p-0 border-0 rounded-none;
}
}
@@ -244,6 +244,7 @@ export default {
@apply mb-0;
}
}
.filter__answer {
&.answer--text-input {
@apply mb-0;
@@ -270,9 +271,11 @@ export default {
.multiselect {
@apply mb-0;
}
.action-message {
@apply mt-2 mx-0 mb-0;
}
// Prosemirror does not have a native way of hiding the menu bar, hence
::v-deep .ProseMirror-menubar {
@apply hidden;
app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
+3 -8
View File
@@ -14,16 +14,11 @@ export default {
</script>
<template>
<div
class="bg-slate-25 dark:bg-slate-900 pt-4 pb-0 px-8 border-b border-solid border-slate-50 dark:border-slate-800/50"
>
<h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
<div class="pb-0 px-8 border-b border-n-weak">
<h2 class="text-2xl text-n-slate-12 mb-1 font-medium">
{{ headerTitle }}
</h2>
<p
v-if="headerContent"
class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
>
<p v-if="headerContent" class="w-full text-n-slate-11 text-sm mb-2">
{{ headerContent }}
</p>
<slot />
app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+1 -1
View File
@@ -95,7 +95,7 @@ export default {
<template>
<div
class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
class="conversation-details-wrap"
:class="{ 'with-border-right': !isOnExpandedLayout }"
>
<ConversationHeader
app/javascript/dashboard/components/widgets/conversation/OnboardingFeatureCard.vue
+1 -1
View File
@@ -36,7 +36,7 @@ defineProps({
</div>
<div class="mt-auto">
<p
class="text-base text-slate-800 dark:text-slate-100 font-interDisplay font-semibold tracking-[0.3px]"
class="text-base text-slate-800 dark:text-slate-100 font-semibold tracking-[0.3px]"
>
{{ title }}
</p>
app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
+1 -1
View File
@@ -32,7 +32,7 @@ const greetingMessage = computed(() => {
>
<div class="col-span-full self-start">
<p
class="text-xl font-semibold text-slate-900 dark:text-white font-interDisplay tracking-[0.3px]"
class="text-xl font-semibold text-slate-900 dark:text-white tracking-[0.3px]"
>
{{ greetingMessage }}
</p>
app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue
+1 -1
View File
@@ -193,7 +193,7 @@ export default {
</script>
<template>
<section class="bg-white conversation-page dark:bg-slate-900">
<section class="conversation-page bg-n-background">
<ChatList
:show-conversation-list="showConversationList"
:conversation-inbox="inboxId"
app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+4 -12
View File
@@ -54,11 +54,9 @@ export default {
<template>
<div
class="flex justify-between items-center h-14 min-h-[3.5rem] px-4 py-2 bg-white dark:bg-slate-900 border-b border-slate-50 dark:border-slate-800/50"
class="flex justify-between items-center h-20 min-h-[3.5rem] py-2 max-w-[960px] mx-auto w-full"
>
<h1
class="flex items-center mb-0 text-2xl text-slate-900 dark:text-slate-100"
>
<h1 class="flex items-center mb-0 text-xl font-medium text-n-slate-12">
<woot-sidemenu-icon v-if="showSidemenuIcon" />
<BackButton
v-if="showBackButton"
@@ -66,21 +64,15 @@ export default {
:back-url="backUrl"
class="ml-2 mr-4"
/>
<fluent-icon
v-if="icon"
:icon="icon"
:class="iconClass"
class="hidden ml-1 mr-2 rtl:ml-2 rtl:mr-1 md:block"
/>
<slot />
<span class="text-2xl font-medium text-slate-900 dark:text-slate-100">
<span class="text-xl font-medium text-n-slate-12">
{{ headerTitle }}
</span>
</h1>
<router-link
v-if="showNewButton && isAdmin"
:to="buttonRoute"
class="button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
class="button success px-3.5 py-1 rounded-[5px] flex gap-2"
>
<fluent-icon icon="add-circle" />
<span class="button__content">
app/javascript/dashboard/routes/dashboard/settings/SettingsLayout.vue
+2 -2
View File
@@ -20,10 +20,10 @@ defineProps({
</script>
<template>
<div class="flex flex-col w-full h-full gap-8 font-inter">
<div class="flex flex-col w-full h-full gap-8">
<slot name="header" />
<!-- Added to render any templates that should be rendered before body -->
<div>
<div class="mx-auto max-w-[960px] w-full">
<slot name="preBody" />
<slot v-if="isLoading" name="loading">
<woot-loading-state :message="loadingMessage" />
app/javascript/dashboard/routes/dashboard/settings/SettingsWrapper.vue
+1 -1
View File
@@ -9,7 +9,7 @@ defineProps({
<template>
<div
class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-white dark:bg-slate-900 font-inter"
class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-background"
>
<div class="flex items-start w-full max-w-6xl mx-auto">
<router-view v-slot="{ Component }">
app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+1 -3
View File
@@ -22,9 +22,7 @@ const showNewButton = computed(
</script>
<template>
<div
class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
>
<div class="w-full h-full bg-n-background overflow-auto">
<SettingsHeader
button-route="new"
:icon="icon"
app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+97 -100
View File
@@ -161,100 +161,104 @@ export default {
</script>
<template>
<div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
<form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
<div
class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
>
<div
class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
>
<h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
</h4>
<p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
</div>
<div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
<label :class="{ error: v$.name.$error }">
{{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
<input
v-model="name"
type="text"
:placeholder="$t('GENERAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
@blur="v$.name.$touch"
/>
<span v-if="v$.name.$error" class="message">
{{ $t('GENERAL_SETTINGS.FORM.NAME.ERROR') }}
</span>
</label>
<label :class="{ error: v$.locale.$error }">
{{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
<select v-model="locale">
<option
v-for="lang in languagesSortedByCode"
:key="lang.iso_639_1_code"
:value="lang.iso_639_1_code"
>
{{ lang.name }}
</option>
</select>
<span v-if="v$.locale.$error" class="message">
{{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
</span>
</label>
<label v-if="featureInboundEmailEnabled">
{{ $t('GENERAL_SETTINGS.FORM.FEATURES.INBOUND_EMAIL_ENABLED') }}
</label>
<label v-if="featureCustomReplyDomainEnabled">
{{
$t('GENERAL_SETTINGS.FORM.FEATURES.CUSTOM_EMAIL_DOMAIN_ENABLED')
}}
</label>
<label v-if="featureCustomReplyDomainEnabled">
{{ $t('GENERAL_SETTINGS.FORM.DOMAIN.LABEL') }}
<input
v-model="domain"
type="text"
:placeholder="$t('GENERAL_SETTINGS.FORM.DOMAIN.PLACEHOLDER')"
/>
</label>
<label v-if="featureCustomReplyEmailEnabled">
{{ $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.LABEL') }}
<input
v-model="supportEmail"
type="text"
:placeholder="
$t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.PLACEHOLDER')
"
/>
</label>
<label
v-if="showAutoResolutionConfig"
:class="{ error: v$.autoResolveDuration.$error }"
<div
class="flex-grow flex-shrink min-w-0 p-6 overflow-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5 max-w-[960px] w-full mx-auto mb-10"
>
<div v-if="!uiFlags.isFetchingItem">
<form @submit.prevent="updateAccount">
<div class="flex flex-row p-4 border-n-weak border-b">
<div
class="flex-grow-0 flex-shrink-0 flex-[30%] min-w-0 py-4 pr-6 pl-0"
>
{{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL') }}
<input
v-model="autoResolveDuration"
type="number"
:placeholder="
$t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
"
@blur="v$.autoResolveDuration.$touch"
/>
<span v-if="v$.autoResolveDuration.$error" class="message">
{{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
</span>
</label>
</div>
</div>
<h4 class="text-lg font-medium text-n-slate-12">
{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.TITLE') }}
</h4>
<p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
</div>
<div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
<label :class="{ error: v$.name.$error }">
{{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
<input
v-model="name"
type="text"
:placeholder="$t('GENERAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
@blur="v$.name.$touch"
/>
<span v-if="v$.name.$error" class="message">
{{ $t('GENERAL_SETTINGS.FORM.NAME.ERROR') }}
</span>
</label>
<label :class="{ error: v$.locale.$error }">
{{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
<select v-model="locale">
<option
v-for="lang in languagesSortedByCode"
:key="lang.iso_639_1_code"
:value="lang.iso_639_1_code"
>
{{ lang.name }}
</option>
</select>
<span v-if="v$.locale.$error" class="message">
{{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
</span>
</label>
<label v-if="featureInboundEmailEnabled">
{{ $t('GENERAL_SETTINGS.FORM.FEATURES.INBOUND_EMAIL_ENABLED') }}
</label>
<label v-if="featureCustomReplyDomainEnabled">
{{
$t('GENERAL_SETTINGS.FORM.FEATURES.CUSTOM_EMAIL_DOMAIN_ENABLED')
}}
</label>
<label v-if="featureCustomReplyDomainEnabled">
{{ $t('GENERAL_SETTINGS.FORM.DOMAIN.LABEL') }}
<input
v-model="domain"
type="text"
:placeholder="$t('GENERAL_SETTINGS.FORM.DOMAIN.PLACEHOLDER')"
/>
</label>
<label v-if="featureCustomReplyEmailEnabled">
{{ $t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.LABEL') }}
<input
v-model="supportEmail"
type="text"
:placeholder="$t('GENERAL_SETTINGS.FORM.SUPPORT_EMAIL.PLACEHOLDER')
"
/>
</label>
<label
v-if="showAutoResolutionConfig"
:class="{ error: v$.autoResolveDuration.$error }"
>
{{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL') }}
<input
v-model="autoResolveDuration"
type="number"
:placeholder="$t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
"
@blur="v$.autoResolveDuration.$touch"
/>
<span v-if="v$.autoResolveDuration.$error" class="message">
{{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
</span>
</label>
<div
class="flex flex-row p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300"
>
<woot-submit-button
class="button nice"
:button-text="$t('GENERAL_SETTINGS.SUBMIT')"
:loading="isUpdating"
/>
</div>
</div>
</form>
<div class="flex flex-row p-4 text-n-slate-12">
<div
class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
class="flex-grow-0 flex-shrink-0 flex-[30%] min-w-0 py-4 pr-6 pl-0"
>
<h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
<h4 class="text-lg font-medium text-n-slate-12">
{{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
</h4>
<p>
@@ -265,7 +269,7 @@ export default {
<woot-code :script="getAccountId" />
</div>
</div>
<div class="p-4 text-sm text-center">
<div class="p-4 text-sm text-center text-n-slate-11">
<div>{{ `v${globalConfig.appVersion}` }}</div>
<div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
{{
@@ -278,14 +282,7 @@ export default {
<div>{{ `Build ${globalConfig.gitSha}` }}</div>
</div>
</div>
<woot-submit-button
class="button nice success button--fixed-top"
:button-text="$t('GENERAL_SETTINGS.SUBMIT')"
:loading="isUpdating"
/>
</form>
<woot-loading-state v-if="uiFlags.isFetchingItem" />
</div>
<woot-loading-state v-else />
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+3 -1
View File
@@ -45,7 +45,9 @@ export default {
</script>
<template>
<div class="flex-1 p-4 overflow-auto">
<div
class="flex-1 p-4 max-w-[960px] w-full mx-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5"
>
<div class="flex flex-row gap-4">
<div class="w-full lg:w-3/5">
<woot-loading-state
app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
+7 -2
View File
@@ -46,11 +46,16 @@ export default {
</script>
<template>
<div class="flex flex-col h-auto overflow-auto">
<div
class="max-w-[960px] mx-auto w-full shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 mb-10"
>
<div class="flex flex-row">
<div class="w-[68%]">
<div class="h-[calc(100vh-56px)] relative">
<CsmlMonacoEditor v-model="bot.csmlContent" class="w-full h-full" />
<CsmlMonacoEditor
v-model="bot.csmlContent"
class="w-full h-full rounded-tl-xl"
/>
<div
v-if="v$.bot.csmlContent.$error"
class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"
app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+3 -1
View File
@@ -83,7 +83,9 @@ const tableHeaders = computed(() => {
feature-name="audit_logs"
/>
<div class="mt-6 flex-1 text-slate-700 dark:text-slate-300">
<div
class="mt-6 flex-1 w-full max-w-[960px] mx-auto text-slate-700 dark:text-slate-300"
>
<woot-loading-state
v-if="uiFlags.fetchingList"
:message="$t('AUDIT_LOGS.LOADING')"
app/javascript/dashboard/routes/dashboard/settings/billing/Index.vue
+1 -1
View File
@@ -58,7 +58,7 @@ export default {
</script>
<template>
<div class="flex-1 p-6 overflow-auto dark:bg-slate-900">
<div class="flex-1 py-6 overflow-auto mx-auto max-w-[960px] w-full">
<woot-loading-state v-if="uiFlags.isFetchingItem" />
<div v-else-if="!hasABillingPlan">
<p>{{ $t('BILLING_SETTINGS.NO_BILLING_USER') }}</p>
app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+1 -3
View File
@@ -133,8 +133,7 @@ const tableHeaders = computed(() => {
</woot-button>
</template>
</BaseSettingsHeader>
<div class="mt-6 flex-1">
<div class="mt-6 flex-1 w-full max-w-[960px] mx-auto">
<woot-loading-state
v-if="uiFlags.fetchingList"
:message="$t('CANNED_MGMT.LOADING')"
@@ -213,7 +212,6 @@ const tableHeaders = computed(() => {
</tbody>
</table>
</div>
<woot-modal v-model:show="showAddPopup" :on-close="hideAddPopup">
<AddCanned :on-close="hideAddPopup" />
</woot-modal>
app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+4 -2
View File
@@ -38,7 +38,9 @@ const openInNewTab = url => {
</script>
<template>
<div class="flex flex-col items-start w-full gap-2 pt-4">
<div
class="flex flex-col items-start w-full gap-2 pt-4 max-w-[960px] mx-auto"
>
<BackButton
v-if="backButtonLabel"
compact
@@ -62,7 +64,7 @@ const openInNewTab = url => {
</div>
</div>
<h1
class="text-2xl font-semibold font-interDisplay tracking-[0.3px] text-slate-900 dark:text-slate-25"
class="text-2xl font-semibold tracking-[0.3px] text-slate-900 dark:text-slate-25"
>
{{ title }}
</h1>
app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
+1 -1
View File
@@ -13,7 +13,7 @@ defineProps({
<template>
<div
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 w-full"
class="flex relative flex-col sm:flex-row px-4 py-4 gap-4 sm:px-6 sm:py-5 justify-between shadow group bg-n-solid-2 rounded-xl outline-1 outline outline-n-container w-full"
>
<slot name="leftSection">
<div class="flex flex-col min-w-0 items-start gap-3 max-w-[480px] w-full">
app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+1 -1
View File
@@ -62,7 +62,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class="h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
<div class="w-full">
app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+6 -7
View File
@@ -62,17 +62,16 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
class="max-w-4xl"
:header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
:header-content="
useInstallationName(
$t('INBOX_MGMT.ADD.AUTH.DESC'),
globalConfig.installationName
)
"
:header-content="useInstallationName(
$t('INBOX_MGMT.ADD.AUTH.DESC'),
globalConfig.installationName
)
"
/>
<div
class="grid max-w-3xl grid-cols-2 mx-0 mt-6 sm:grid-cols-3 lg:grid-cols-4"
app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+1 -1
View File
@@ -70,7 +70,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<EmptyState
:title="$t('INBOX_MGMT.FINISH.TITLE')"
app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+11 -9
View File
@@ -40,14 +40,16 @@ export default {
</script>
<template>
<div
class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
>
<woot-wizard
class="hidden md:block w-1/4"
:global-config="globalConfig"
:items="items"
/>
<router-view />
<div class="max-w-[960px] mx-auto w-full flex">
<div
class="flex flex-row overflow-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5 mb-10"
>
<woot-wizard
class="hidden md:block w-1/4"
:global-config="globalConfig"
:items="items"
/>
<router-view />
</div>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+39 -52
View File
@@ -161,9 +161,8 @@ export default {
inboxName() {
if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
return `${this.inbox.name} (${
this.inbox.messaging_service_sid || this.inbox.phone_number
})`;
return `${this.inbox.name} (${this.inbox.messaging_service_sid || this.inbox.phone_number
})`;
}
if (this.isAWhatsAppChannel) {
return `${this.inbox.name} (${this.inbox.phone_number})`;
@@ -289,8 +288,8 @@ export default {
greeting_message: this.greetingMessage || '',
portal_id: this.selectedPortalSlug
? this.portals.find(
portal => portal.slug === this.selectedPortalSlug
).id
portal => portal.slug === this.selectedPortalSlug
).id
: null,
lock_to_single_conversation: this.locktoSingleConversation,
sender_name_type: this.senderNameType,
@@ -359,7 +358,7 @@ export default {
<template>
<div
class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 overflow-auto bg-white settings dark:bg-slate-800"
class="flex-grow flex-shrink w-full min-w-0 pl-0 pr-0 max-w-[960px] mx-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5 mb-10"
>
<SettingIntroBanner
:header-image="inbox.avatarUrl"
@@ -404,11 +403,10 @@ export default {
:class="{ error: v$.selectedInboxName.$error }"
:label="inboxNameLabel"
:placeholder="inboxNamePlaceHolder"
:error="
v$.selectedInboxName.$error
:error="v$.selectedInboxName.$error
? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
: ''
"
"
@blur="v$.selectedInboxName.$touch"
/>
<woot-input
@@ -416,17 +414,14 @@ export default {
v-model="webhookUrl"
class="w-3/4 pb-4"
:class="{ error: v$.webhookUrl.$error }"
:label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
"
:placeholder="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
"
:error="
v$.webhookUrl.$error
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
"
:placeholder="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
"
:error="v$.webhookUrl.$error
? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
: ''
"
"
@blur="v$.webhookUrl.$touch"
/>
<woot-input
@@ -434,36 +429,31 @@ export default {
v-model="channelWebsiteUrl"
class="w-3/4 pb-4"
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
:placeholder="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
"
:placeholder="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
"
/>
<woot-input
v-if="isAWebWidgetInbox"
v-model="channelWelcomeTitle"
class="w-3/4 pb-4"
:label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
"
:placeholder="
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
)
"
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
"
:placeholder="$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
)
"
/>
<woot-input
v-if="isAWebWidgetInbox"
v-model="channelWelcomeTagline"
class="w-3/4 pb-4"
:label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
"
:placeholder="
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
)
"
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
"
:placeholder="$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
)
"
/>
<label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
@@ -507,16 +497,14 @@ export default {
<div v-if="greetingEnabled" class="pb-4">
<GreetingsEditor
v-model="greetingMessage"
:label="
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
)
"
:placeholder="
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
)
"
:label="$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
)
"
:placeholder="$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
)
"
:richtext="!textAreaChannels"
/>
</div>
@@ -723,11 +711,10 @@ export default {
<input
ref="businessNameInput"
v-model="businessName"
:placeholder="
$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
)
"
:placeholder="$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
)
"
class="mb-0"
type="text"
/>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
+5 -7
View File
@@ -64,7 +64,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
@@ -77,9 +77,8 @@ export default {
<input
v-model="channelName"
type="text"
:placeholder="
$t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
"
:placeholder="$t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
"
@blur="v$.channelName.$touch"
/>
<span v-if="v$.channelName.$error" class="message">{{
@@ -94,9 +93,8 @@ export default {
<input
v-model="webhookUrl"
type="text"
:placeholder="
$t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
"
:placeholder="$t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
"
@blur="v$.webhookUrl.$touch"
/>
</label>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+1 -1
View File
@@ -55,7 +55,7 @@ function onClick(emailProvider) {
<template>
<div
v-if="!provider"
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full md:w-full max-w-full md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
class="max-w-4xl"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+6 -7
View File
@@ -207,7 +207,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<div
v-if="!hasLoginStarted"
@@ -246,12 +246,11 @@ export default {
<div class="w-full">
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
:header-content="
useInstallationName(
$t('INBOX_MGMT.ADD.DETAILS.DESC'),
globalConfig.installationName
)
"
:header-content="useInstallationName(
$t('INBOX_MGMT.ADD.DETAILS.DESC'),
globalConfig.installationName
)
"
/>
</div>
<div class="w-3/5">
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+9 -13
View File
@@ -70,7 +70,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
@@ -83,9 +83,8 @@ export default {
<input
v-model="channelName"
type="text"
:placeholder="
$t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
"
:placeholder="$t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
"
@blur="v$.channelName.$touch"
/>
<span v-if="v$.channelName.$error" class="message">{{
@@ -100,9 +99,8 @@ export default {
<input
v-model="lineChannelId"
type="text"
:placeholder="
$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.PLACEHOLDER')
"
:placeholder="$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.PLACEHOLDER')
"
@blur="v$.lineChannelId.$touch"
/>
</label>
@@ -114,9 +112,8 @@ export default {
<input
v-model="lineChannelSecret"
type="text"
:placeholder="
$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.PLACEHOLDER')
"
:placeholder="$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.PLACEHOLDER')
"
@blur="v$.lineChannelSecret.$touch"
/>
</label>
@@ -128,9 +125,8 @@ export default {
<input
v-model="lineChannelToken"
type="text"
:placeholder="
$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.PLACEHOLDER')
"
:placeholder="$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.PLACEHOLDER')
"
@blur="v$.lineChannelToken.$touch"
/>
</label>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+1 -1
View File
@@ -19,7 +19,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
+4 -5
View File
@@ -54,7 +54,7 @@ export default {
} catch (error) {
useAlert(
error.message ||
this.$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.API.ERROR_MESSAGE')
this.$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.API.ERROR_MESSAGE')
);
}
},
@@ -64,7 +64,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
@@ -77,9 +77,8 @@ export default {
<input
v-model="botToken"
type="text"
:placeholder="
$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
"
:placeholder="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
"
@blur="v$.botToken.$touch"
/>
</label>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+4 -2
View File
@@ -27,7 +27,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<div class="login-init h-full text-center">
<form @submit.prevent="requestAuthorization">
@@ -46,10 +46,12 @@ export default {
<style scoped lang="scss">
.login-init {
@apply pt-[30%] text-center;
p {
@apply p-6;
}
> a > img {
>a>img {
@apply w-60;
}
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+18 -23
View File
@@ -63,7 +63,7 @@ export default {
} catch (error) {
useAlert(
error.message ||
this.$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.API.ERROR_MESSAGE')
this.$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.API.ERROR_MESSAGE')
);
}
},
@@ -73,7 +73,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
@@ -104,9 +104,8 @@ export default {
<input
v-model="channelWebsiteUrl"
type="text"
:placeholder="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
"
:placeholder="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
"
/>
</label>
</div>
@@ -124,11 +123,10 @@ export default {
<input
v-model="channelWelcomeTitle"
type="text"
:placeholder="
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
)
"
:placeholder="$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
)
"
/>
</label>
</div>
@@ -140,11 +138,10 @@ export default {
<input
v-model="channelWelcomeTagline"
type="text"
:placeholder="
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
)
"
:placeholder="$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
)
"
/>
</label>
</div>
@@ -178,14 +175,12 @@ export default {
v-if="greetingEnabled"
v-model="greetingMessage"
class="w-full"
:label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
"
:placeholder="
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
)
"
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL')
"
:placeholder="$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
)
"
:richtext="!textAreaChannels"
/>
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+1 -1
View File
@@ -21,7 +21,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
+3 -4
View File
@@ -69,7 +69,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
@@ -82,9 +82,8 @@ export default {
<input
v-model="channelName"
type="text"
:placeholder="
$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
"
:placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
"
@blur="v$.channelName.$touch"
/>
<span v-if="v$.channelName.$error" class="message">{{
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
+1 -1
View File
@@ -67,7 +67,7 @@ async function requestAuthorization() {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<SettingsSubPageHeader
:header-title="title"
app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue
+3 -1
View File
@@ -34,7 +34,9 @@ onMounted(() => {
</template>
<template #body>
<div class="flex-grow flex-shrink overflow-auto">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div
class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-1 mb-10"
>
<IntegrationItem
v-for="item in integrationList"
:id="item.id"
app/javascript/dashboard/routes/dashboard/settings/integrations/IntegrationItem.vue
+1 -1
View File
@@ -47,7 +47,7 @@ const actionURL = computed(() =>
<template>
<div
class="flex flex-col flex-1 p-6 bg-white border border-solid rounded-md dark:bg-slate-800 border-slate-50 dark:border-slate-700/50"
class="flex flex-col flex-1 p-6 rounded-md shadow outline-1 outline outline-n-container bg-n-solid-2 px-6 py-5"
>
<div class="flex items-start justify-between">
<div class="flex h-12 w-12 mb-4">
app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue
+33 -1
View File
@@ -122,7 +122,9 @@ const saveMacro = async macroData => {
</script>
<template>
<div class="flex flex-col flex-1 h-full overflow-auto">
<div
class="flex flex-col flex-1 pb-10 max-w-[960px] mx-auto w-full overflow-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
>
<woot-loading-state
v-if="uiFlags.isFetchingItem"
:message="t('MACROS.EDITOR.LOADING')"
@@ -135,3 +137,33 @@ const saveMacro = async macroData => {
/>
</div>
</template>
<style scoped>
@tailwind components;
@layer components {
.macro-gradient-radial {
background-image: radial-gradient(
ellipse at center,
transparent 0%,
#fdfdfd 80%
),
radial-gradient(#cbe5ff 1.2px, transparent 0);
}
.macro-dark-gradient-radial {
background-image: radial-gradient(
circle at center,
transparent 0%,
#121213 70%
),
radial-gradient(#293f51 1.2px, transparent 0);
}
.macro-gradient-radial-size {
background-size:
100% 100%,
1rem 1rem;
}
}
</style>
app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
+2 -20
View File
@@ -110,7 +110,7 @@ export default {
<template>
<div class="flex flex-col w-full h-auto md:flex-row md:h-full">
<div
class="flex-1 w-full h-full max-h-full px-12 py-4 overflow-y-auto md:w-auto macro-gradient-radial dark:macro-dark-gradient-radial macro-gradient-radial-size"
class="flex-1 w-full h-full max-h-full px-6 py-4 overflow-y-auto md:w-auto"
>
<MacroNodes
v-model="macro.actions"
@@ -121,7 +121,7 @@ export default {
@reset-action="resetNode"
/>
</div>
<div class="w-full md:w-1/3">
<div class="w-96 p-4">
<MacroProperties
:macro-name="macro.name"
:macro-visibility="macro.visibility"
@@ -132,21 +132,3 @@ export default {
</div>
</div>
</template>
<style scoped>
@tailwind components;
@layer components {
.macro-gradient-radial {
background-image: radial-gradient(#ebf0f5 1.2px, transparent 0);
}
.macro-dark-gradient-radial {
background-image: radial-gradient(#293f51 1.2px, transparent 0);
}
.macro-gradient-radial-size {
background-size: 1rem 1rem;
}
}
</style>
app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+3 -4
View File
@@ -63,11 +63,9 @@ const dropdownValues = () => {
class="absolute cursor-move -left-8 macros__node-drag-handle"
/>
<div
class="flex-grow p-2 mr-2 rounded-md shadow-sm"
class="flex-grow p-2 mr-2 rounded-md shadow outline outline-1 outline-n-container"
:class="
errorKey
? 'bg-red-50 animate-shake dark:bg-red-800'
: 'bg-white dark:bg-slate-700'
errorKey ? 'bg-red-50 animate-shake dark:bg-red-800' : 'bg-n-solid-2'
"
>
<ActionInput
@@ -87,6 +85,7 @@ const dropdownValues = () => {
v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
icon="delete"
size="small"
class="min-w-8"
variant="smooth"
color-scheme="alert"
@click="$emit('deleteNode')"
app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
+18 -18
View File
@@ -44,11 +44,12 @@ export default {
<template>
<div class="macros__nodes">
<div class="macro__node">
<div>
<woot-label
:title="$t('MACROS.EDITOR.START_FLOW')"
color-scheme="primary"
/>
<div class="relative z-10">
<div
class="bg-n-solid-2 rounded-lg inline mt-2 text-sm p-2 border-n-weak border"
>
{{ $t('MACROS.EDITOR.START_FLOW') }}
</div>
</div>
</div>
<Draggable
@@ -68,13 +69,12 @@ export default {
type="add"
:index="i"
:error-key="errors[`action_${i}`]"
:file-name="
fileName(
actionData[i].action_params[0],
actionData[i].action_name,
files
)
"
:file-name="fileName(
actionData[i].action_params[0],
actionData[i].action_name,
files
)
"
:single-node="actionData.length === 1"
@reset-action="$emit('resetAction', i)"
@delete-node="$emit('deleteNode', i)"
@@ -96,12 +96,11 @@ export default {
</woot-button>
</div>
</div>
<div class="macro__node">
<div>
<woot-label
:title="$t('MACROS.EDITOR.END_FLOW')"
color-scheme="primary"
/>
<div class="macro__node relative">
<div
class="bg-n-solid-2 rounded-lg inline mt-2 text-sm p-2 border-n-weak border"
>
{{ $t('MACROS.EDITOR.END_FLOW') }}
</div>
</div>
</div>
@@ -139,6 +138,7 @@ export default {
.macros__node-action-container {
position: relative;
.drag-handle {
position: absolute;
left: var(--space-minus-medium);
app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+13 -24
View File
@@ -15,8 +15,8 @@ export default {
methods: {
isActive(key) {
return this.macroVisibility === key
? 'bg-woot-25 dark:bg-slate-900 border-woot-200 dark:border-woot-700'
: 'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600';
? ' !border-n-brand'
: ' !border-n-strong';
},
onUpdateName(value) {
this.$emit('update:name', value);
@@ -30,7 +30,7 @@ export default {
<template>
<div
class="p-3 bg-white dark:bg-slate-900 h-[calc(100vh-3.5rem)] flex flex-col border-l border-slate-50 dark:border-slate-800/50"
class="px-6 py-5 bg-n-solid-2 outline-1 outline outline-n-container rounded-xl flex flex-col gap-3 text-n-slate-11"
>
<div>
<woot-input
@@ -43,14 +43,12 @@ export default {
/>
</div>
<div class="mt-2">
<p
class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
>
<p class="block m-0 text-sm font-medium text-n-slate-12 mb-2">
{{ $t('MACROS.EDITOR.VISIBILITY.LABEL') }}
</p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div class="grid gap-3 pb-4">
<button
class="p-2 relative rounded-md border border-solid text-left cursor-default"
class="p-4 relative rounded-md border text-left cursor-default bg-n-alpha-3"
:class="isActive('global')"
@click="onUpdateVisibility('global')"
>
@@ -60,17 +58,15 @@ export default {
type="solid"
class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
/>
<p
class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
>
<p class="block m-0 text-sm font-medium mb-1">
{{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.LABEL') }}
</p>
<p class="text-xs text-slate-500 dark:text-slate-200">
<p class="text-sm text-slate-500 dark:text-slate-200">
{{ $t('MACROS.EDITOR.VISIBILITY.GLOBAL.DESCRIPTION') }}
</p>
</button>
<button
class="p-2 relative rounded-md border border-solid text-left cursor-default"
class="p-4 relative rounded-md border text-left cursor-default bg-n-alpha-3"
:class="isActive('personal')"
@click="onUpdateVisibility('personal')"
>
@@ -80,23 +76,16 @@ export default {
type="solid"
class="absolute text-woot-500 dark:text-woot-500 top-2 right-2"
/>
<p
class="block m-0 text-sm font-medium leading-[1.8] text-slate-700 dark:text-slate-100"
>
<p class="block m-0 text-sm font-medium mb-1">
{{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.LABEL') }}
</p>
<p class="text-xs text-slate-500 dark:text-slate-200">
<p class="text-sm text-slate-500 dark:text-slate-200">
{{ $t('MACROS.EDITOR.VISIBILITY.PERSONAL.DESCRIPTION') }}
</p>
</button>
</div>
<div
class="mt-2 flex items-start p-2 bg-slate-50 dark:bg-slate-700 rounded-md"
>
<fluent-icon icon="info" size="20" class="flex-shrink" />
<p
class="ml-2 rtl:ml-0 rtl:mr-2 mb-0 text-slate-600 dark:text-slate-200"
>
<div class="mt-2 flex items-start border-t border-n-weak pt-4">
<p class="text-n-slate-11">
{{ $t('MACROS.ORDER_INFO') }}
</p>
</div>
app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+15 -13
View File
@@ -84,19 +84,21 @@ export default {
</script>
<template>
<div class="flex-1 p-4 overflow-auto">
<ReportFilterSelector
:show-agents-filter="false"
show-group-by-filter
:show-business-hours-switch="false"
@filter-change="onFilterChange"
/>
<div class="flex-1 p-1 overflow-auto">
<div class="max-w-[960px] w-full mx-auto mb-10">
<ReportFilterSelector
:show-agents-filter="false"
show-group-by-filter
:show-business-hours-switch="false"
@filter-change="onFilterChange"
/>
<BotMetrics :filters="requestPayload" />
<ReportContainer
account-summary-key="getBotSummary"
:group-by="groupBy"
:report-keys="reportKeys"
/>
<BotMetrics :filters="requestPayload" />
<ReportContainer
account-summary-key="getBotSummary"
:group-by="groupBy"
:report-keys="reportKeys"
/>
</div>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+21 -19
View File
@@ -108,24 +108,26 @@ export default {
</script>
<template>
<div class="flex-1 p-4 overflow-auto">
<ReportFilterSelector
show-agents-filter
show-inbox-filter
show-rating-filter
:show-team-filter="isTeamsEnabled"
:show-business-hours-switch="false"
@filter-change="onFilterChange"
/>
<woot-button
color-scheme="success"
class-names="button--fixed-top"
icon="arrow-download"
@click="downloadReports"
>
{{ $t('CSAT_REPORTS.DOWNLOAD') }}
</woot-button>
<CsatMetrics :filters="requestPayload" />
<CsatTable :page-index="pageIndex" @page-change="onPageNumberChange" />
<div class="flex-1 p-1 overflow-auto">
<div class="max-w-[960px] w-full mx-auto mb-10">
<ReportFilterSelector
show-agents-filter
show-inbox-filter
show-rating-filter
:show-team-filter="isTeamsEnabled"
:show-business-hours-switch="false"
@filter-change="onFilterChange"
/>
<woot-button
color-scheme="success"
class-names="button--fixed-top"
icon="arrow-download"
@click="downloadReports"
>
{{ $t('CSAT_REPORTS.DOWNLOAD') }}
</woot-button>
<CsatMetrics :filters="requestPayload" />
<CsatTable :page-index="pageIndex" @page-change="onPageNumberChange" />
</div>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+17 -15
View File
@@ -98,20 +98,22 @@ export default {
</script>
<template>
<div class="flex-1 p-4 overflow-auto">
<woot-button
color-scheme="success"
class-names="button--fixed-top"
icon="arrow-download"
@click="downloadAgentReports"
>
{{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
</woot-button>
<ReportFilterSelector
:show-agents-filter="false"
show-group-by-filter
@filter-change="onFilterChange"
/>
<ReportContainer :group-by="groupBy" />
<div class="flex-1 p-1 overflow-auto">
<div class="max-w-[960px] w-full mx-auto mb-10">
<woot-button
color-scheme="success"
class-names="button--fixed-top"
icon="arrow-download"
@click="downloadAgentReports"
>
{{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
</woot-button>
<ReportFilterSelector
:show-agents-filter="false"
show-group-by-filter
@filter-change="onFilterChange"
/>
<ReportContainer :group-by="groupBy" />
</div>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+70 -66
View File
@@ -123,78 +123,82 @@ export default {
</script>
<template>
<div class="flex-1 p-4 overflow-auto">
<div class="flex flex-col items-center md:flex-row">
<div
class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
>
<MetricCard
:header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
:is-loading="uiFlags.isFetchingAccountConversationMetric"
:loading-message="
$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
"
<div class="flex-1 overflow-auto">
<div class="max-w-[960px] mx-auto w-full">
<div class="flex flex-col items-center md:flex-row">
<div
class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
>
<div
v-for="(metric, name, index) in conversationMetrics"
:key="index"
class="flex-1 min-w-0 pb-2"
<MetricCard
:header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
:is-loading="uiFlags.isFetchingAccountConversationMetric"
:loading-message="
$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.LOADING_MESSAGE')
"
>
<h3 class="text-base text-slate-700 dark:text-slate-100">
{{ name }}
</h3>
<p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
{{ metric }}
</p>
</div>
<div
v-for="(metric, name, index) in conversationMetrics"
:key="index"
class="flex-1 min-w-0 pb-2"
>
<h3 class="text-base text-slate-700 dark:text-slate-100">
{{ name }}
</h3>
<p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
{{ metric }}
</p>
</div>
</MetricCard>
</div>
<div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
<MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
<div
v-for="(metric, name, index) in agentStatusMetrics"
:key="index"
class="flex-1 min-w-0 pb-2"
>
<h3 class="text-base text-slate-700 dark:text-slate-100">
{{ name }}
</h3>
<p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
{{ metric }}
</p>
</div>
</MetricCard>
</div>
</div>
<div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
<MetricCard
:header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')"
>
<template #control>
<woot-button
icon="arrow-download"
size="small"
variant="smooth"
color-scheme="secondary"
@click="downloadHeatmapData"
>
{{ $t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.DOWNLOAD_REPORT') }}
</woot-button>
</template>
<ReportHeatmap
:heat-data="accountConversationHeatmap"
:is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
/>
</MetricCard>
</div>
<div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
<MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
<div
v-for="(metric, name, index) in agentStatusMetrics"
:key="index"
class="flex-1 min-w-0 pb-2"
>
<h3 class="text-base text-slate-700 dark:text-slate-100">
{{ name }}
</h3>
<p class="text-woot-800 dark:text-woot-300 text-3xl mb-0 mt-1">
{{ metric }}
</p>
</div>
<div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
<MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
<AgentTable
:agents="agents"
:agent-metrics="agentConversationMetric"
:page-index="pageIndex"
:is-loading="uiFlags.isFetchingAgentConversationMetric"
@page-change="onPageNumberChange"
/>
</MetricCard>
</div>
</div>
<div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
<MetricCard :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
<template #control>
<woot-button
icon="arrow-download"
size="small"
variant="smooth"
color-scheme="secondary"
@click="downloadHeatmapData"
>
{{ $t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.DOWNLOAD_REPORT') }}
</woot-button>
</template>
<ReportHeatmap
:heat-data="accountConversationHeatmap"
:is-loading="uiFlags.isFetchingAccountConversationsHeatmap"
/>
</MetricCard>
</div>
<div class="flex flex-row flex-wrap max-w-full ml-auto mr-auto">
<MetricCard :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
<AgentTable
:agents="agents"
:agent-metrics="agentConversationMetric"
:page-index="pageIndex"
:is-loading="uiFlags.isFetchingAgentConversationMetric"
@page-change="onPageNumberChange"
/>
</MetricCard>
</div>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+1 -1
View File
@@ -135,7 +135,7 @@ export default {
<template>
<div
class="grid grid-cols-1 p-2 bg-white border rounded-md md:grid-cols-2 lg:grid-cols-3 dark:bg-slate-800 border-slate-100 dark:border-slate-700"
class="grid grid-cols-1 px-6 py-5 md:grid-cols-2 lg:grid-cols-3 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
>
<div
v-for="metric in metrics"
app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+26 -24
View File
@@ -77,30 +77,32 @@ export default {
</script>
<template>
<div class="flex flex-col flex-1 gap-6 px-4 pt-4 overflow-auto">
<SLAReportFilters @filter-change="onFilterChange" />
<woot-button
color-scheme="success"
class-names="button--fixed-top"
icon="arrow-download"
@click="downloadReports"
>
{{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
</woot-button>
<div class="flex flex-col gap-6">
<SLAMetrics
:hit-rate="slaMetrics.hitRate"
:no-of-breaches="slaMetrics.numberOfSLAMisses"
:no-of-conversations="slaMetrics.numberOfConversations"
:is-loading="uiFlags.isFetchingMetrics"
/>
<SLATable
:sla-reports="slaReports"
:is-loading="uiFlags.isFetching"
:current-page="Number(slaMeta.currentPage)"
:total-count="Number(slaMeta.count)"
@page-change="onPageChange"
/>
<div class="flex-1 p-1 overflow-auto">
<div class="max-w-[960px] w-full mx-auto mb-10 flex flex-col gap-6">
<SLAReportFilters @filter-change="onFilterChange" />
<woot-button
color-scheme="success"
class-names="button--fixed-top"
icon="arrow-download"
@click="downloadReports"
>
{{ $t('SLA_REPORTS.DOWNLOAD_SLA_REPORTS') }}
</woot-button>
<div class="flex flex-col gap-6">
<SLAMetrics
:hit-rate="slaMetrics.hitRate"
:no-of-breaches="slaMetrics.numberOfSLAMisses"
:no-of-conversations="slaMetrics.numberOfConversations"
:is-loading="uiFlags.isFetchingMetrics"
/>
<SLATable
:sla-reports="slaReports"
:is-loading="uiFlags.isFetching"
:current-page="Number(slaMeta.currentPage)"
:total-count="Number(slaMeta.count)"
@page-change="onPageChange"
/>
</div>
</div>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+1 -1
View File
@@ -86,7 +86,7 @@ export default {
<!-- Added ref for writing specs -->
<template>
<div
class="flex-col lg:flex-row flex flex-wrap mx-0 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
class="flex-col lg:flex-row flex flex-wrap mx-0 mb-5 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2 px-6 py-5"
>
<CsatMetricCard
:label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+5 -20
View File
@@ -145,14 +145,13 @@ const table = useVueTable({
</script>
<template>
<div class="csat--table-container">
<Table
:table="table"
class="max-h-[calc(100vh-21.875rem)] border bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800"
/>
<div
class="shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2 px-6 py-5"
>
<Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
<div
v-show="!tableData.length"
class="csat--empty-records text-slate-600 dark:text-slate-200 bg-white dark:bg-slate-900 border border-t-0 border-solid border-slate-75 dark:border-slate-700"
class="flex items-center -mt-1 justify-center h-48 w-full border-0 text-slate-600 dark:text-slate-200"
>
{{ $t('CSAT_REPORTS.NO_RECORDS') }}
</div>
@@ -161,17 +160,3 @@ const table = useVueTable({
</div>
</div>
</template>
<style lang="scss" scoped>
.csat--empty-records {
align-items: center;
// border: 1px solid var(--color-border);
border-top: 0;
display: flex;
font-size: var(--font-size-small);
height: 12.5rem;
justify-content: center;
margin-top: -1px;
width: 100%;
}
</style>
app/javascript/dashboard/routes/dashboard/settings/reports/components/Heatmap.vue
+1 -2
View File
@@ -63,8 +63,7 @@ function getDayOfTheWeek(date) {
return days[dayIndex];
}
function getHeatmapLevelClass(value) {
if (!value)
return 'outline-slate-100 dark:outline-slate-700 dark:bg-slate-700/40 bg-slate-50/50';
if (!value) return 'outline-n-weak bg-n-solid-2';
let level = [...quantileRange.value, Infinity].findIndex(
range => value <= range && value > 0
app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
+1 -1
View File
@@ -22,7 +22,7 @@ defineProps({
<template>
<div
class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2 px-6 py-5"
>
<SLAMetricCard
:label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
+3 -8
View File
@@ -57,11 +57,9 @@ export default {
<template>
<div>
<div
class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
class="min-w-full shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
>
<div
class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
>
<div class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0">
<TableHeaderCell
:span="6"
:label="$t('SLA_REPORTS.TABLE.HEADER.CONVERSATION')"
@@ -77,10 +75,7 @@ export default {
<TableHeaderCell :span="2" label="" />
</div>
<div
v-if="isLoading"
class="flex items-center justify-center h-32 bg-white rounded-b-xl dark:bg-slate-900"
>
<div v-if="isLoading" class="flex items-center justify-center h-32">
<Spinner />
<span>{{ $t('SLA_REPORTS.LOADING') }}</span>
</div>
app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue
+27 -25
View File
@@ -198,30 +198,32 @@ export default {
</script>
<template>
<div class="flex-1 p-4 overflow-auto">
<woot-button
color-scheme="success"
class-names="button--fixed-top"
icon="arrow-download"
@click="downloadReports"
>
{{ downloadButtonLabel }}
</woot-button>
<ReportFilters
v-if="filterItemsList"
:type="type"
:filter-items-list="filterItemsList"
:group-by-filter-items-list="groupByfilterItemsList"
:selected-group-by-filter="selectedGroupByFilter"
@date-range-change="onDateRangeChange"
@filter-change="onFilterChange"
@group-by-filter-change="onGroupByFilterChange"
@business-hours-toggle="onBusinessHoursToggle"
/>
<ReportContainer
v-if="filterItemsList.length"
:group-by="groupBy"
:report-keys="reportKeys"
/>
<div class="flex-1 p-1 overflow-auto">
<div class="max-w-[960px] w-full mx-auto mb-10">
<woot-button
color-scheme="success"
class-names="button--fixed-top"
icon="arrow-download"
@click="downloadReports"
>
{{ downloadButtonLabel }}
</woot-button>
<ReportFilters
v-if="filterItemsList"
:type="type"
:filter-items-list="filterItemsList"
:group-by-filter-items-list="groupByfilterItemsList"
:selected-group-by-filter="selectedGroupByFilter"
@date-range-change="onDateRangeChange"
@filter-change="onFilterChange"
@group-by-filter-change="onGroupByFilterChange"
@business-hours-toggle="onBusinessHoursToggle"
/>
<ReportContainer
v-if="filterItemsList.length"
:group-by="groupBy"
:report-keys="reportKeys"
/>
</div>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/MetricCard.vue
+1 -1
View File
@@ -25,7 +25,7 @@ export default {
<template>
<div
class="metric-card mb-2 p flex flex-col m-2 p-4 border border-solid overflow-hidden rounded-md flex-grow shadow-sm text-slate-700 dark:text-slate-100 bg-white dark:bg-slate-800 border-slate-75 dark:border-slate-700 min-h-[10rem]"
class="metric-card mb-2 p flex flex-col m-2 px-6 py-5 overflow-hidden flex-grow text-slate-700 dark:text-slate-100 min-h-[10rem] shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
>
<div
class="card-header grid w-full mb-6 grid-cols-[repeat(auto-fit,minmax(max-content,50%))] gap-y-2"
app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+1 -1
View File
@@ -89,7 +89,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 overflow-x-auto bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class="overflow-x-auto h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<form
class="flex flex-wrap mx-0 overflow-x-auto"
app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
+1 -1
View File
@@ -38,7 +38,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
:header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"
app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue
+7 -5
View File
@@ -23,10 +23,12 @@ export default {
</script>
<template>
<div
class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
>
<woot-wizard class="hidden md:block w-1/4" :items="items" />
<router-view />
<div class="overflow-auto p-4 h-full w-full">
<div
class="mx-auto max-w-[960px] flex flex-row overflow-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5 mb-10"
>
<woot-wizard class="hidden md:block w-1/4" :items="items" />
<router-view />
</div>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+3 -4
View File
@@ -104,7 +104,7 @@ export default {
<template>
<div
class="border border-slate-25 overflow-x-auto dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class="overflow-x-auto h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<form
class="flex flex-wrap mx-0 overflow-x-auto"
@@ -129,9 +129,8 @@ export default {
:selected-agents="selectedAgents"
:update-selected-agents="updateSelectedAgents"
:is-working="isCreating"
:submit-button-text="
$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.BUTTON_TEXT')
"
:submit-button-text="$t('TEAMS_SETTINGS.EDIT_FLOW.AGENTS.BUTTON_TEXT')
"
/>
<Spinner v-else />
</div>
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
+1 -1
View File
@@ -58,7 +58,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<PageHeader
:header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue
+7 -5
View File
@@ -27,10 +27,12 @@ export default {
</script>
<template>
<div
class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full bg-slate-25 dark:bg-slate-800"
>
<woot-wizard class="hidden md:block w-1/4" :items="items" />
<router-view />
<div class="overflow-auto p-4 h-full w-full">
<div
class="mx-auto max-w-[960px] flex flex-row overflow-auto shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 px-6 py-5 mb-10"
>
<woot-wizard class="hidden md:block w-1/4" :items="items" />
<router-view />
</div>
</div>
</template>
app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
+1 -1
View File
@@ -10,7 +10,7 @@ export default {
<template>
<div
class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
class=" h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<EmptyState
:title="$t('TEAMS_SETTINGS.FINISH.TITLE')"
app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
+3 -1
View File
@@ -86,7 +86,9 @@ const confirmPlaceHolderText = computed(() =>
</router-link>
</template>
</BaseSettingsHeader>
<div class="mt-6 flex-1 text-slate-700 dark:text-slate-300">
<div
class="mt-6 flex-1 w-full max-w-[960px] mx-auto text-slate-700 dark:text-slate-300"
>
<woot-loading-state
v-if="uiFlags.isFetching"
:message="$t('TEAMS_SETTINGS.LOADING')"