scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-12-24 14:47:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Update styles in settings pages (#11070)

Browse Source 
---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
Sivin Varghese
2025-03-19 03:10:02 +05:30
committed by GitHub
parent 9d49b69f2e
commit 8066b36ebf
101 changed files with 1320 additions and 1273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/routes/dashboard/settings/SettingsSubPageHeader.vue
View File

@@ -8,7 +8,7 @@ export default {
</script>
<template>
<div class="flex flex-col w-full items-start">
<div class="flex flex-col w-full items-start mb-4">
<h2
class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100 break-words"
>

7
app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
View File

@@ -12,6 +12,7 @@ const props = defineProps({
showBackButton: { type: Boolean, default: false },
backUrl: { type: [String, Object], default: '' },
showSidemenuIcon: { type: Boolean, default: true },
fullWidth: { type: Boolean, default: false },
});
const { t } = useI18n();
@@ -31,7 +32,10 @@ const showSettingsHeader = computed(
<template>
<div class="flex flex-1 flex-col m-0 bg-n-background overflow-auto">
<div class="max-w-6xl mx-auto w-full flex flex-col flex-1">
<div
class="mx-auto w-full flex flex-col flex-1"
:class="{ 'max-w-6xl': !fullWidth }"
>
<SettingsHeader
v-if="showSettingsHeader"
button-route="new"
@@ -43,6 +47,7 @@ const showSettingsHeader = computed(
:show-new-button="showNewButton"
:show-sidemenu-icon="showSidemenuIcon"
class="sticky top-0 z-20"
:class="{ 'max-w-6xl w-full mx-auto': fullWidth }"
/>
<router-view v-slot="{ Component }" class="px-5 flex-1 overflow-hidden">

6
app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
View File

@@ -100,17 +100,17 @@ const tableHeaders = computed(() => {
<th
v-for="thHeader in tableHeaders"
:key="thHeader"
class="py-4 pr-4 text-left font-semibold text-n-slate-11"
class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11"
>
{{ thHeader }}
</th>
</thead>
<tbody class="divide-y divide-n-weak text-n-slate-11">
<tr v-for="auditLogItem in records" :key="auditLogItem.id">
<td class="py-4 pr-4 break-all whitespace-nowrap">
<td class="py-4 ltr:pr-4 rtl:pl-4 break-all whitespace-nowrap">
{{ generateLogText(auditLogItem) }}
</td>
<td class="py-4 pr-4 break-all whitespace-nowrap">
<td class="py-4 ltr:pr-4 rtl:pl-4 break-all whitespace-nowrap">
{{
messageTimestamp(
auditLogItem.created_at,

36
app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
View File

@@ -2,6 +2,7 @@
import { mapGetters } from 'vuex';
import FilterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
import AutomationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
import { useAutomation } from 'dashboard/composables/useAutomation';
import { validateAutomation } from 'dashboard/helper/validations';
import {
@@ -39,6 +40,7 @@ export default {
components: {
FilterInputBox,
AutomationActionInput,
NextButton,
},
props: {
onClose: {
@@ -184,7 +186,7 @@ export default {
</label>
<p
v-if="hasAutomationMutated"
class="text-xs text-right text-green-500 dark:text-green-500"
class="text-xs text-right text-green-500 pt-1 dark:text-green-500"
>
{{ $t('AUTOMATION.FORM.RESET_MESSAGE') }}
</p>
@@ -243,15 +245,15 @@ export default {
@remove-filter="removeFilter(i)"
/>
<div class="mt-4">
<woot-button
icon="add"
color-scheme="success"
variant="smooth"
size="small"
<NextButton
icon="i-lucide-plus"
blue
faded
sm
@click="appendNewCondition"
>
{{ $t('AUTOMATION.ADD.CONDITION_BUTTON_LABEL') }}
</woot-button>
</NextButton>
</div>
</div>
</section>
@@ -287,27 +289,27 @@ export default {
@remove-action="removeAction(i)"
/>
<div class="mt-4">
<woot-button
icon="add"
color-scheme="success"
variant="smooth"
size="small"
<NextButton
icon="i-lucide-plus"
blue
faded
sm
@click="appendNewAction"
>
{{ $t('AUTOMATION.ADD.ACTION_BUTTON_LABEL') }}
</woot-button>
</NextButton>
</div>
</div>
</section>
<!-- // Actions End -->
<div class="w-full">
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
<woot-button class="button clear" @click.prevent="onClose">
<NextButton ghost blue @click.prevent="onClose">
{{ $t('AUTOMATION.ADD.CANCEL_BUTTON_TEXT') }}
</woot-button>
<woot-button @click="emitSaveAutomation">
</NextButton>
<NextButton solid blue @click="emitSaveAutomation">
{{ $t('AUTOMATION.ADD.SUBMIT') }}
</woot-button>
</NextButton>
</div>
</div>
</div>

2
app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
View File

@@ -201,7 +201,7 @@ const tableHeaders = computed(() => {
<th
v-for="thHeader in tableHeaders"
:key="thHeader"
class="py-4 pr-4 text-left font-semibold text-n-slate-11"
class="py-4 ltr:pr-4 rtl:pl-4 rtl:text-right ltr:text-left font-semibold text-n-slate-11"
>
{{ thHeader }}
</th>

6
app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
View File

@@ -153,7 +153,7 @@ const tableHeaders = computed(() => {
<th
v-for="thHeader in tableHeaders"
:key="thHeader"
class="py-4 pr-4 text-left font-semibold text-n-slate-11 last:text-right"
class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11 last:text-right"
>
<span v-if="thHeader !== tableHeaders[0]">
{{ thHeader }}
@@ -179,12 +179,12 @@ const tableHeaders = computed(() => {
:key="cannedItem.short_code"
>
<td
class="py-4 pr-4 truncate max-w-xs font-medium"
class="py-4 ltr:pr-4 rtl:pl-4 truncate max-w-xs font-medium"
:title="cannedItem.short_code"
>
{{ cannedItem.short_code }}
</td>
<td class="py-4 pr-4 md:break-all whitespace-normal">
<td class="py-4 ltr:pr-4 rtl:pl-4 md:break-all whitespace-normal">
{{ cannedItem.content }}
</td>
<td class="py-4 flex justify-end gap-1">

2
app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsListItem.vue
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 group outline outline-n-container outline-1 bg-n-alpha-3 rounded-2xl shadow w-full"
class="flex relative flex-col sm:flex-row p-4 gap-4 sm:p-6 justify-between group outline outline-n-container outline-1 bg-n-solid-2 rounded-2xl shadow w-full"
>
<slot name="leftSection">
<div class="flex flex-col min-w-0 items-start gap-3 max-w-[480px] w-full">

2
app/javascript/dashboard/routes/dashboard/settings/customRoles/Index.vue
View File

@@ -156,7 +156,7 @@ const confirmDeletion = () => {
<th
v-for="thHeader in tableHeaders"
:key="thHeader"
class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
>
<span class="mb-0">
{{ thHeader }}

6
app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleModal.vue
View File

@@ -160,13 +160,13 @@ const isSubmitDisabled = computed(
/>
<form class="flex flex-col w-full" @submit.prevent="handleCustomRole">
<div class="w-full">
<label :class="{ 'text-red-500': v$.name.$error }">
<label>
{{ $t('CUSTOM_ROLE.FORM.NAME.LABEL') }}
<input
ref="nameInput"
v-model.trim="name"
type="text"
:class="{ '!border-red-500': v$.name.$error }"
:class="{ error: v$.name.$error }"
:placeholder="$t('CUSTOM_ROLE.FORM.NAME.PLACEHOLDER')"
@blur="v$.name.$touch"
/>
@@ -174,7 +174,7 @@ const isSubmitDisabled = computed(
</div>
<div class="w-full">
<label :class="{ 'text-red-500': v$.description.$error }">
<label>
{{ $t('CUSTOM_ROLE.FORM.DESCRIPTION.LABEL') }}
<textarea

2
app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRolePaywall.vue
View File

@@ -79,7 +79,7 @@ const tableHeaders = computed(() => {
<th
v-for="thHeader in tableHeaders"
:key="thHeader"
class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
>
<span class="mb-0">
{{ thHeader }}

10
app/javascript/dashboard/routes/dashboard/settings/customRoles/component/CustomRoleTableBody.vue
View File

@@ -28,15 +28,19 @@ const getFormattedPermissions = role => {
<tbody class="divide-y divide-n-weak text-n-slate-11">
<tr v-for="(customRole, index) in roles" :key="index">
<td
class="max-w-xs py-4 pr-4 font-medium truncate align-baseline"
class="max-w-xs py-4 ltr:pr-4 rtl:pl-4 font-medium truncate align-baseline"
:title="customRole.name"
>
{{ customRole.name }}
</td>
<td class="py-4 pr-4 whitespace-normal align-baseline md:break-words">
<td
class="py-4 ltr:pr-4 rtl:pl-4 whitespace-normal align-baseline md:break-words"
>
{{ customRole.description }}
</td>
<td class="py-4 pr-4 whitespace-normal align-baseline md:break-words">
<td
class="py-4 ltr:pr-4 rtl:pl-4 whitespace-normal align-baseline md:break-words"
>
{{ getFormattedPermissions(customRole) }}
</td>
<td class="flex justify-end gap-1 py-4">

17
app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
View File

@@ -4,6 +4,7 @@ import { mapGetters } from 'vuex';
import { useAlert } from 'dashboard/composables';
import InboxMembersAPI from '../../../../api/inboxMembers';
import NextButton from 'dashboard/components-next/button/Button.vue';
import router from '../../../index';
import PageHeader from '../SettingsSubPageHeader.vue';
import { useVuelidate } from '@vuelidate/core';
@@ -11,6 +12,7 @@ import { useVuelidate } from '@vuelidate/core';
export default {
components: {
PageHeader,
NextButton,
},
validations: {
selectedAgents: {
@@ -62,16 +64,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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<form class="flex flex-wrap mx-0" @submit.prevent="addAgents()">
<form class="flex flex-wrap flex-col mx-0" @submit.prevent="addAgents()">
<div class="w-full">
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.AGENTS.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
/>
</div>
<div class="w-3/5">
<div>
<div class="w-full">
<label :class="{ error: v$.selectedAgents.$error }">
{{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
@@ -96,9 +98,12 @@ export default {
</label>
</div>
<div class="w-full">
<woot-submit-button
:button-text="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
:loading="isCreating"
<NextButton
type="submit"
:is-loading="isCreating"
solid
blue
:label="$t('INBOX_MGMT.AGENTS.BUTTON_TEXT')"
/>
</div>
</div>

2
app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<PageHeader
class="max-w-4xl"

18
app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
View File

@@ -1,9 +1,11 @@
<script>
import EmptyState from '../../../../components/widgets/EmptyState.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
EmptyState,
NextButton,
},
computed: {
currentInbox() {
@@ -70,7 +72,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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<EmptyState
:title="$t('INBOX_MGMT.FINISH.TITLE')"
@@ -130,22 +132,28 @@ export default {
</div>
<div class="flex justify-center gap-2 mt-4">
<router-link
class="rounded button hollow primary"
:to="{
name: 'settings_inbox_show',
params: { inboxId: $route.params.inbox_id },
}"
>
{{ $t('INBOX_MGMT.FINISH.MORE_SETTINGS') }}
<NextButton
outline
slate
:label="$t('INBOX_MGMT.FINISH.MORE_SETTINGS')"
/>
</router-link>
<router-link
class="rounded button success"
:to="{
name: 'inbox_dashboard',
params: { inboxId: $route.params.inbox_id },
}"
>
{{ $t('INBOX_MGMT.FINISH.BUTTON_TEXT') }}
<NextButton
solid
teal
:label="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
/>
</router-link>
</div>
</div>

9
app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
View File

@@ -4,10 +4,12 @@ import { useAlert } from 'dashboard/composables';
import SettingsSection from 'dashboard/components/SettingsSection.vue';
import { useVuelidate } from '@vuelidate/core';
import { required, minLength } from '@vuelidate/validators';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
SettingsSection,
NextButton,
},
props: {
inbox: {
@@ -155,9 +157,10 @@ export default {
{{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
</label>
</div>
<woot-submit-button
:button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
:loading="uiFlags.isUpdatingIMAP"
<NextButton
type="submit"
:label="$t('INBOX_MGMT.IMAP.UPDATE')"
:is-loading="uiFlags.isUpdatingIMAP"
:disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
/>
</form>

8
app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
View File

@@ -40,12 +40,14 @@ export default {
</script>
<template>
<div class="flex flex-row overflow-auto h-full">
<div class="grid grid-cols-1 md:grid-cols-8 overflow-auto h-full">
<woot-wizard
class="hidden md:block w-1/4"
class="hidden md:block col-span-2"
:global-config="globalConfig"
:items="items"
/>
<router-view />
<div class="col-span-6">
<router-view />
</div>
</div>
</template>

29
app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
View File

@@ -8,6 +8,7 @@ import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStoreGetters, useStore } from 'dashboard/composables/store';
import ChannelName from './components/ChannelName.vue';
import ChannelIcon from 'next/icon/ChannelIcon.vue';
const getters = useStoreGetters();
const store = useStore();
@@ -87,43 +88,25 @@ const openDelete = inbox => {
</BaseSettingsHeader>
</template>
<template #body>
<table
class="min-w-full overflow-x-auto divide-y divide-slate-75 dark:divide-slate-700"
>
<table class="min-w-full overflow-x-auto">
<tbody
class="divide-y divide-slate-25 dark:divide-slate-800 flex-1 text-slate-700 dark:text-slate-100"
class="divide-y divide-n-weak flex-1 text-slate-700 dark:text-slate-100"
>
<tr v-for="inbox in inboxesList" :key="inbox.id">
<td class="py-4 ltr:pr-4 rtl:pl-4">
<div class="flex items-center flex-row gap-4">
<Thumbnail
v-if="inbox.avatar_url"
class="bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
class="bg-n-alpha-3 rounded-full p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
:src="inbox.avatar_url"
:username="inbox.name"
size="48px"
/>
<div
v-else
class="w-[48px] h-[48px] flex justify-center items-center bg-black-50 dark:bg-black-800 rounded-full p-2 ring ring-opacity-20 dark:ring-opacity-80 ring-black-100 dark:ring-black-900 border border-slate-100 dark:border-slate-700/50 shadow-sm"
class="w-[48px] h-[48px] flex justify-center items-center bg-n-alpha-3 rounded-full p-2 ring ring-n-solid-1 border border-n-strong shadow-sm"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
class="opacity-80 p-1 flex-shrink-0"
>
<path
fill="currentColor"
d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12"
opacity=".35"
/>
<path
fill="currentColor"
d="M2.61 21.389c1.612 1.61 4.205 1.61 9.39 1.61s7.778 0 9.39-1.61c1.492-1.493 1.601-3.829 1.61-8.29h-3.476c-.996 0-1.494 0-1.931.202c-.438.201-.762.58-1.41 1.335l-.666.777c-.648.756-.972 1.134-1.41 1.335s-.935.202-1.93.202h-.353c-.996 0-1.494 0-1.931-.202c-.438-.2-.762-.579-1.41-1.335l-.666-.777c-.648-.756-.972-1.134-1.41-1.335s-.935-.201-1.93-.201H1c.008 4.46.118 6.796 1.61 8.289"
/>
</svg>
<ChannelIcon class="size-5" :inbox="inbox" />
</div>
<div>
<span class="block font-medium capitalize">

16
app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
View File

@@ -4,10 +4,13 @@ import { useAlert } from 'dashboard/composables';
import PreChatFields from './PreChatFields.vue';
import { getPreChatFields, standardFieldKeys } from 'dashboard/helper/preChat';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
PreChatFields,
WootMessageEditor,
NextButton,
},
props: {
inbox: {
@@ -110,7 +113,7 @@ export default {
</select>
</label>
<div v-if="preChatFormEnabled">
<div class="w-[70%]">
<div>
<label>
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.PRE_CHAT_MESSAGE.LABEL') }}
</label>
@@ -122,7 +125,7 @@ export default {
"
/>
</div>
<div class="w-[70%] mt-4">
<div class="mt-4">
<label>{{ $t('INBOX_MGMT.PRE_CHAT_FORM.SET_FIELDS') }}</label>
<table class="table w-full table-striped woot-table">
<thead class="thead-dark">
@@ -161,11 +164,10 @@ export default {
</div>
</div>
<div class="w-auto my-4">
<woot-submit-button
:button-text="
$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')
"
:loading="uiFlags.isUpdating"
<NextButton
type="submit"
:label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE_PRE_CHAT_FORM_SETTINGS')"
:is-loading="uiFlags.isUpdating"
/>
</div>
</form>

767
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
View File

@@ -18,6 +18,7 @@ import WidgetBuilder from './WidgetBuilder.vue';
import BotConfiguration from './components/BotConfiguration.vue';
import { FEATURE_FLAGS } from '../../../../featureFlags';
import SenderNameExamplePreview from './components/SenderNameExamplePreview.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
@@ -34,6 +35,7 @@ export default {
SenderNameExamplePreview,
MicrosoftReauthorize,
GoogleReauthorize,
NextButton,
},
mixins: [inboxMixin],
setup() {
@@ -381,406 +383,417 @@ export default {
/>
</woot-tabs>
</SettingIntroBanner>
<MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
<FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
<GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
<div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
<SettingsSection
:title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
:show-border="false"
>
<woot-avatar-uploader
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
:src="avatarUrl"
class="pb-4"
delete-avatar
@on-avatar-select="handleImageUpload"
@on-avatar-delete="handleAvatarDelete"
/>
<woot-input
v-model="selectedInboxName"
class="w-3/4 pb-4"
:class="{ error: v$.selectedInboxName.$error }"
:label="inboxNameLabel"
:placeholder="inboxNamePlaceHolder"
:error="
v$.selectedInboxName.$error
? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
: ''
"
@blur="v$.selectedInboxName.$touch"
/>
<woot-input
v-if="isAPIInbox"
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
? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
: ''
"
@blur="v$.webhookUrl.$touch"
/>
<woot-input
v-if="isAWebWidgetInbox"
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')
"
/>
<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'
)
"
/>
<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 v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
<woot-color-picker v-model="inbox.widget_color" />
</label>
<label v-if="isAWhatsAppChannel" class="w-3/4 pb-4">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
<input v-model="whatsAppAPIProviderName" type="text" disabled />
</label>
<label class="w-3/4 pb-4">
{{
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
}}
<select v-model="greetingEnabled">
<option :value="true">
{{
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.ENABLED'
)
}}
</option>
<option :value="false">
{{
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.DISABLED'
)
}}
</option>
</select>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
{{
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
)
}}
</p>
</label>
<div v-if="greetingEnabled" class="pb-4">
<GreetingsEditor
v-model="greetingMessage"
<section class="max-w-6xl mx-auto w-full">
<MicrosoftReauthorize v-if="microsoftUnauthorized" :inbox="inbox" />
<FacebookReauthorize v-if="facebookUnauthorized" :inbox="inbox" />
<GoogleReauthorize v-if="googleUnauthorized" :inbox="inbox" />
<div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
<SettingsSection
:title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
:show-border="false"
>
<woot-avatar-uploader
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
:src="avatarUrl"
class="pb-4"
delete-avatar
@on-avatar-select="handleImageUpload"
@on-avatar-delete="handleAvatarDelete"
/>
<woot-input
v-model="selectedInboxName"
class="pb-4"
:class="{ error: v$.selectedInboxName.$error }"
:label="inboxNameLabel"
:placeholder="inboxNamePlaceHolder"
:error="
v$.selectedInboxName.$error
? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
: ''
"
@blur="v$.selectedInboxName.$touch"
/>
<woot-input
v-if="isAPIInbox"
v-model="webhookUrl"
class="pb-4"
:class="{ error: v$.webhookUrl.$error }"
:label="
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.LABEL'
)
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
"
:placeholder="
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_MESSAGE.PLACEHOLDER'
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER'
)
"
:richtext="!textAreaChannels"
:error="
v$.webhookUrl.$error
? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
: ''
"
@blur="v$.webhookUrl.$touch"
/>
</div>
<label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
<select v-model="replyTime">
<option key="in_a_few_minutes" value="in_a_few_minutes">
{{
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES')
}}
</option>
<option key="in_a_few_hours" value="in_a_few_hours">
{{
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS')
}}
</option>
<option key="in_a_day" value="in_a_day">
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
</p>
</label>
<label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
<select v-model="emailCollectEnabled">
<option :value="true">
{{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.ENABLED') }}
</option>
<option :value="false">
{{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
{{
$t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT')
}}
</p>
</label>
<label class="w-3/4 pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
<select v-model="csatSurveyEnabled">
<option :value="true">
{{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.ENABLED') }}
</option>
<option :value="false">
{{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
</p>
</label>
<label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
<select v-model="allowMessagesAfterResolved">
<option :value="true">
{{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.ENABLED') }}
</option>
<option :value="false">
{{ $t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
{{
<woot-input
v-if="isAWebWidgetInbox"
v-model="channelWebsiteUrl"
class="pb-4"
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.LABEL')"
:placeholder="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_DOMAIN.PLACEHOLDER')
"
/>
<woot-input
v-if="isAWebWidgetInbox"
v-model="channelWelcomeTitle"
class="pb-4"
:label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
"
:placeholder="
$t(
'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.PLACEHOLDER'
)
}}
</p>
</label>
"
/>
<label v-if="isAWebWidgetInbox" class="w-3/4 pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
<select v-model="continuityViaEmail">
<option :value="true">
{{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.ENABLED') }}
</option>
<option :value="false">
{{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
{{
<woot-input
v-if="isAWebWidgetInbox"
v-model="channelWelcomeTagline"
class="pb-4"
:label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
"
:placeholder="
$t(
'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.PLACEHOLDER'
)
}}
</p>
</label>
<div class="w-3/4 pb-4">
<label>
{{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
</label>
<select v-model="selectedPortalSlug" class="filter__question">
<option value="">
{{ $t('INBOX_MGMT.HELP_CENTER.PLACEHOLDER') }}
</option>
<option v-for="p in portals" :key="p.slug" :value="p.slug">
{{ p.name }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
{{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
</p>
</div>
<label v-if="canLocktoSingleConversation" class="w-3/4 pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
<select v-model="locktoSingleConversation">
<option :value="true">
{{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.ENABLED') }}
</option>
<option :value="false">
{{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
{{
$t(
'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
)
}}
</p>
</label>
"
/>
<label v-if="isAWebWidgetInbox">
{{ $t('INBOX_MGMT.FEATURES.LABEL') }}
</label>
<div v-if="isAWebWidgetInbox" class="flex gap-2 pt-2 pb-4">
<input
v-model="selectedFeatureFlags"
type="checkbox"
value="attachments"
@input="handleFeatureFlag"
/>
<label for="attachments">
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
<label v-if="isAWebWidgetInbox" class="pb-4">
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.WIDGET_COLOR.LABEL') }}
<woot-color-picker v-model="inbox.widget_color" />
</label>
</div>
<div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
<input
v-model="selectedFeatureFlags"
type="checkbox"
value="emoji_picker"
@input="handleFeatureFlag"
/>
<label for="emoji_picker">
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
<label v-if="isAWhatsAppChannel" class="pb-4">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
<input v-model="whatsAppAPIProviderName" type="text" disabled />
</label>
</div>
<div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
<input
v-model="selectedFeatureFlags"
type="checkbox"
value="end_conversation"
@input="handleFeatureFlag"
/>
<label for="end_conversation">
{{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
</label>
</div>
<div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
<input
v-model="selectedFeatureFlags"
type="checkbox"
value="use_inbox_avatar_for_bot"
@input="handleFeatureFlag"
/>
<label for="use_inbox_avatar_for_bot">
{{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
</label>
</div>
</SettingsSection>
<SettingsSection
v-if="isAWebWidgetInbox || isAnEmailChannel"
:title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
:sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
:show-border="false"
>
<div class="w-3/4 pb-4">
<SenderNameExamplePreview
:sender-name-type="senderNameType"
:business-name="businessName"
@update="toggleSenderNameType"
/>
<div class="flex flex-col items-start gap-2 mt-2">
<woot-button
variant="clear"
color-scheme="primary"
@click="onClickShowBusinessNameInput"
>
{{
$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
)
}}
</woot-button>
<div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
<input
ref="businessNameInput"
v-model="businessName"
:placeholder="
$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
)
"
class="mb-0"
type="text"
/>
<woot-button color-scheme="primary" @click="updateInbox">
<label class="pb-4">
{{
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
}}
<select v-model="greetingEnabled">
<option :value="true">
{{
$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.SAVE_BUTTON_TEXT'
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.ENABLED'
)
}}
</option>
<option :value="false">
{{
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.DISABLED'
)
}}
</option>
</select>
<p class="pb-1 text-sm not-italic text-n-slate-11">
{{
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.HELP_TEXT'
)
}}
</p>
</label>
<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'
)
"
:richtext="!textAreaChannels"
/>
</div>
<label v-if="isAWebWidgetInbox" class="pb-4">
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.TITLE') }}
<select v-model="replyTime">
<option key="in_a_few_minutes" value="in_a_few_minutes">
{{
$t(
'INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_MINUTES'
)
}}
</option>
<option key="in_a_few_hours" value="in_a_few_hours">
{{
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_FEW_HOURS')
}}
</option>
<option key="in_a_day" value="in_a_day">
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.IN_A_DAY') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-n-slate-11">
{{ $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.REPLY_TIME.HELP_TEXT') }}
</p>
</label>
<label v-if="isAWebWidgetInbox" class="pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX') }}
<select v-model="emailCollectEnabled">
<option :value="true">
{{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.ENABLED') }}
</option>
<option :value="false">
{{ $t('INBOX_MGMT.EDIT.EMAIL_COLLECT_BOX.DISABLED') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-n-slate-11">
{{
$t(
'INBOX_MGMT.SETTINGS_POPUP.ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT'
)
}}
</p>
</label>
<label class="pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
<select v-model="csatSurveyEnabled">
<option :value="true">
{{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.ENABLED') }}
</option>
<option :value="false">
{{ $t('INBOX_MGMT.EDIT.ENABLE_CSAT.DISABLED') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-n-slate-11">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT_SUB_TEXT') }}
</p>
</label>
<label v-if="isAWebWidgetInbox" class="pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED') }}
<select v-model="allowMessagesAfterResolved">
<option :value="true">
{{
$t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.ENABLED')
}}
</option>
<option :value="false">
{{
$t('INBOX_MGMT.EDIT.ALLOW_MESSAGES_AFTER_RESOLVED.DISABLED')
}}
</option>
</select>
<p class="pb-1 text-sm not-italic text-n-slate-11">
{{
$t(
'INBOX_MGMT.SETTINGS_POPUP.ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT'
)
}}
</p>
</label>
<label v-if="isAWebWidgetInbox" class="pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL') }}
<select v-model="continuityViaEmail">
<option :value="true">
{{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.ENABLED') }}
</option>
<option :value="false">
{{ $t('INBOX_MGMT.EDIT.ENABLE_CONTINUITY_VIA_EMAIL.DISABLED') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-n-slate-11">
{{
$t(
'INBOX_MGMT.SETTINGS_POPUP.ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT'
)
}}
</p>
</label>
<div class="pb-4">
<label>
{{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
</label>
<select v-model="selectedPortalSlug" class="filter__question">
<option value="">
{{ $t('INBOX_MGMT.HELP_CENTER.PLACEHOLDER') }}
</option>
<option v-for="p in portals" :key="p.slug" :value="p.slug">
{{ p.name }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-n-slate-11">
{{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
</p>
</div>
<label v-if="canLocktoSingleConversation" class="pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION') }}
<select v-model="locktoSingleConversation">
<option :value="true">
{{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.ENABLED') }}
</option>
<option :value="false">
{{ $t('INBOX_MGMT.EDIT.LOCK_TO_SINGLE_CONVERSATION.DISABLED') }}
</option>
</select>
<p class="pb-1 text-sm not-italic text-n-slate-11">
{{
$t(
'INBOX_MGMT.SETTINGS_POPUP.LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT'
)
}}
</p>
</label>
<label v-if="isAWebWidgetInbox">
{{ $t('INBOX_MGMT.FEATURES.LABEL') }}
</label>
<div v-if="isAWebWidgetInbox" class="flex gap-2 pt-2 pb-4">
<input
v-model="selectedFeatureFlags"
type="checkbox"
value="attachments"
@input="handleFeatureFlag"
/>
<label for="attachments">
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
</label>
</div>
<div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
<input
v-model="selectedFeatureFlags"
type="checkbox"
value="emoji_picker"
@input="handleFeatureFlag"
/>
<label for="emoji_picker">
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
</label>
</div>
<div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
<input
v-model="selectedFeatureFlags"
type="checkbox"
value="end_conversation"
@input="handleFeatureFlag"
/>
<label for="end_conversation">
{{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
</label>
</div>
<div v-if="isAWebWidgetInbox" class="flex gap-2 pb-4">
<input
v-model="selectedFeatureFlags"
type="checkbox"
value="use_inbox_avatar_for_bot"
@input="handleFeatureFlag"
/>
<label for="use_inbox_avatar_for_bot">
{{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
</label>
</div>
</SettingsSection>
<SettingsSection
v-if="isAWebWidgetInbox || isAnEmailChannel"
:title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
:sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
:show-border="false"
>
<div class="pb-4">
<SenderNameExamplePreview
:sender-name-type="senderNameType"
:business-name="businessName"
@update="toggleSenderNameType"
/>
<div class="flex flex-col items-start gap-2 mt-2">
<woot-button
variant="clear"
color-scheme="primary"
@click="onClickShowBusinessNameInput"
>
{{
$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
)
}}
</woot-button>
<div v-if="showBusinessNameInput" class="flex gap-2 w-[80%]">
<input
ref="businessNameInput"
v-model="businessName"
:placeholder="
$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
)
"
class="mb-0"
type="text"
/>
<woot-button color-scheme="primary" @click="updateInbox">
{{
$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.SAVE_BUTTON_TEXT'
)
}}
</woot-button>
</div>
</div>
</div>
</div>
</SettingsSection>
<SettingsSection :show-border="false">
<woot-submit-button
v-if="isAPIInbox"
type="submit"
:disabled="v$.webhookUrl.$invalid"
:button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:loading="uiFlags.isUpdating"
@click="updateInbox"
/>
<woot-submit-button
v-else
type="submit"
:disabled="v$.$invalid"
:button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:loading="uiFlags.isUpdating"
@click="updateInbox"
/>
</SettingsSection>
</div>
</SettingsSection>
<SettingsSection :show-border="false">
<NextButton
v-if="isAPIInbox"
type="submit"
:disabled="v$.webhookUrl.$invalid"
:label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:is-loading="uiFlags.isUpdating"
@click="updateInbox"
/>
<NextButton
v-else
type="submit"
:disabled="v$.$invalid"
:label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:is-loading="uiFlags.isUpdating"
@click="updateInbox"
/>
</SettingsSection>
</div>
<div v-if="selectedTabKey === 'collaborators'" class="mx-8">
<CollaboratorsPage :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'configuration'">
<ConfigurationPage :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'preChatForm'">
<PreChatFormSettings :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'businesshours'">
<WeeklyAvailability :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'widgetBuilder'">
<WidgetBuilder :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'botConfiguration'">
<BotConfiguration :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'collaborators'" class="mx-8">
<CollaboratorsPage :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'configuration'">
<ConfigurationPage :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'preChatForm'">
<PreChatFormSettings :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'businesshours'">
<WeeklyAvailability :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'widgetBuilder'">
<WidgetBuilder :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'botConfiguration'">
<BotConfiguration :inbox="inbox" />
</div>
</section>
</div>
</template>

9
app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
View File

@@ -6,12 +6,14 @@ import { useVuelidate } from '@vuelidate/core';
import { required, minLength } from '@vuelidate/validators';
import InputRadioGroup from './components/InputRadioGroup.vue';
import SingleSelectDropdown from './components/SingleSelectDropdown.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
SettingsSection,
InputRadioGroup,
SingleSelectDropdown,
NextButton,
},
props: {
inbox: {
@@ -231,9 +233,10 @@ export default {
:action="handleAuthMechanismChange"
/>
</div>
<woot-submit-button
:button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
:loading="uiFlags.isUpdatingSMTP"
<NextButton
type="submit"
:label="$t('INBOX_MGMT.SMTP.UPDATE')"
:is-loading="uiFlags.isUpdatingSMTP"
:disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
/>
</form>

11
app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
View File

@@ -7,11 +7,13 @@ import { useVuelidate } from '@vuelidate/core';
import { required } from '@vuelidate/validators';
import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
import { LocalStorage } from 'shared/helpers/localStorage';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
Widget,
InputRadioGroup,
NextButton,
},
props: {
inbox: {
@@ -268,7 +270,7 @@ export default {
<div class="mx-8">
<div class="flex p-2.5">
<div class="w-100 lg:w-[40%]">
<div class="min-h-full py-4 overflow-y-scroll">
<div class="min-h-full py-4 overflow-y-scroll px-px">
<form @submit.prevent="updateWidget">
<woot-avatar-uploader
:label="
@@ -376,14 +378,15 @@ export default {
)
"
/>
<woot-submit-button
<NextButton
type="submit"
class="mt-4"
:button-text="
:label="
$t(
'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.UPDATE.BUTTON_TEXT'
)
"
:loading="uiFlags.isUpdating"
:is-loading="uiFlags.isUpdating"
:disabled="v$.$invalid || uiFlags.isUpdating"
/>
</form>

8
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
View File

@@ -66,8 +66,8 @@ export default {
</script>
<template>
<form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.inboxName.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
<input
@@ -82,7 +82,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
<input
@@ -97,7 +97,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.apiKey.$error }">
<span>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}

24
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
View File

@@ -5,6 +5,7 @@ import { useAlert } from 'dashboard/composables';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import PageHeader from '../../SettingsSubPageHeader.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
const shouldBeWebhookUrl = (value = '') =>
value ? value.startsWith('http') : true;
@@ -12,6 +13,7 @@ const shouldBeWebhookUrl = (value = '') =>
export default {
components: {
PageHeader,
NextButton,
},
setup() {
return { v$: useVuelidate() };
@@ -64,14 +66,17 @@ 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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
/>
<form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<form
class="flex flex-wrap flex-col mx-0"
@submit.prevent="createChannel()"
>
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.channelName.$error }">
{{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
<input
@@ -88,7 +93,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.webhookUrl.$error }">
{{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
<input
@@ -105,10 +110,13 @@ export default {
</p>
</div>
<div class="w-full">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
<div class="w-full mt-4">
<NextButton
:is-loading="uiFlags.isCreating"
type="submit"
solid
blue
:label="$t('INBOX_MGMT.ADD.API_CHANNEL.SUBMIT_BUTTON')"
/>
</div>
</form>

30
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
View File

@@ -5,9 +5,14 @@ import { useAlert } from 'dashboard/composables';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import NextButton from 'dashboard/components-next/button/Button.vue';
const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
export default {
components: {
NextButton,
},
setup() {
return { v$: useVuelidate() };
},
@@ -72,8 +77,8 @@ export default {
</script>
<template>
<form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.inboxName.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
<input
@@ -90,7 +95,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
<input
@@ -107,7 +112,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.accountId.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
<input
@@ -124,7 +129,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.applicationId.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
<input
@@ -141,7 +146,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.apiKey.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.LABEL') }}
<input
@@ -156,7 +161,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.apiSecret.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
<input
@@ -173,10 +178,13 @@ export default {
</label>
</div>
<div class="w-full">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.SUBMIT_BUTTON')"
<div class="w-full mt-4">
<NextButton
:is-loading="uiFlags.isCreating"
type="submit"
solid
blue
:label="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.SUBMIT_BUTTON')"
/>
</div>
</form>

28
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
View File

@@ -6,7 +6,12 @@ import { required } from '@vuelidate/validators';
import router from '../../../../index';
import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
NextButton,
},
setup() {
return { v$: useVuelidate() };
},
@@ -72,8 +77,8 @@ export default {
</script>
<template>
<form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.inboxName.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
<input
@@ -88,7 +93,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
<input
@@ -103,7 +108,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.phoneNumberId.$error }">
<span>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.LABEL') }}
@@ -122,7 +127,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.businessAccountId.$error }">
<span>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.LABEL') }}
@@ -141,7 +146,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.apiKey.$error }">
<span>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
@@ -158,10 +163,13 @@ export default {
</label>
</div>
<div class="w-full">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
<div class="w-full mt-4">
<NextButton
:is-loading="uiFlags.isCreating"
type="submit"
solid
blue
:label="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
/>
</div>
</form>

2
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<PageHeader
class="max-w-4xl"

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div
v-if="!hasLoginStarted"
@@ -240,7 +240,7 @@ export default {
<LoadingState v-else-if="showLoader" :message="emptyStateMessage" />
<form
v-else
class="flex flex-wrap mx-0"
class="flex flex-wrap flex-col mx-0"
@submit.prevent="createChannel()"
>
<div class="w-full">

28
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
View File

@@ -5,10 +5,12 @@ import { useAlert } from 'dashboard/composables';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import PageHeader from '../../SettingsSubPageHeader.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
PageHeader,
NextButton,
},
setup() {
return { v$: useVuelidate() };
@@ -70,14 +72,17 @@ 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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.LINE_CHANNEL.DESC')"
/>
<form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<form
class="flex flex-wrap flex-col mx-0"
@submit.prevent="createChannel()"
>
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.channelName.$error }">
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
<input
@@ -94,7 +99,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.lineChannelId.$error }">
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
<input
@@ -108,7 +113,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.lineChannelSecret.$error }">
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
<input
@@ -122,7 +127,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.lineChannelToken.$error }">
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
<input
@@ -136,10 +141,13 @@ export default {
</label>
</div>
<div class="w-full">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.LINE_CHANNEL.SUBMIT_BUTTON')"
<div class="w-full mt-4">
<NextButton
:is-loading="uiFlags.isCreating"
type="submit"
solid
blue
:label="$t('INBOX_MGMT.ADD.LINE_CHANNEL.SUBMIT_BUTTON')"
/>
</div>
</form>

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
View File

@@ -19,13 +19,13 @@ 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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
/>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label>
{{ $t('INBOX_MGMT.ADD.SMS.PROVIDERS.LABEL') }}
<select v-model="provider">

22
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
View File

@@ -5,10 +5,12 @@ import { useAlert } from 'dashboard/composables';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import PageHeader from '../../SettingsSubPageHeader.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
PageHeader,
NextButton,
},
setup() {
return { v$: useVuelidate() };
@@ -64,14 +66,17 @@ 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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
/>
<form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<form
class="flex flex-wrap flex-col mx-0"
@submit.prevent="createChannel()"
>
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.botToken.$error }">
{{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
<input
@@ -88,10 +93,13 @@ export default {
</p>
</div>
<div class="w-full">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
<div class="w-full mt-4">
<NextButton
:is-loading="uiFlags.isCreating"
type="submit"
solid
blue
:label="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.SUBMIT_BUTTON')"
/>
</div>
</form>

32
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
View File

@@ -5,10 +5,14 @@ import { useVuelidate } from '@vuelidate/core';
import { useAlert } from 'dashboard/composables';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import NextButton from 'dashboard/components-next/button/Button.vue';
import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
export default {
components: {
NextButton,
},
props: {
type: {
type: String,
@@ -113,8 +117,8 @@ export default {
</script>
<template>
<form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<form class="flex flex-wrap flex-col mx-0" @submit.prevent="createChannel()">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.channelName.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
<input
@@ -129,7 +133,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label
v-if="useMessagingService"
:class="{ error: v$.messagingServiceSID.$error }"
@@ -149,10 +153,7 @@ export default {
</label>
</div>
<div
v-if="!useMessagingService"
class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]"
>
<div v-if="!useMessagingService" class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
<input
@@ -183,7 +184,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.accountSID.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
<input
@@ -208,7 +209,7 @@ export default {
{{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.USE_API_KEY') }}
</label>
</div>
<div v-if="useAPIKey" class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div v-if="useAPIKey" class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.apiKeySID.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.LABEL') }}
<input
@@ -222,7 +223,7 @@ export default {
}}</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.authToken.$error }">
{{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.LABEL`) }}
<input
@@ -239,10 +240,13 @@ export default {
</label>
</div>
<div class="w-full">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
<div class="w-full mt-4">
<NextButton
:is-loading="uiFlags.isCreating"
type="submit"
solid
blue
:label="$t('INBOX_MGMT.ADD.TWILIO.SUBMIT_BUTTON')"
/>
</div>
</form>

2
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<div class="login-init h-full text-center">
<form @submit.prevent="requestAuthorization">

17
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
View File

@@ -2,6 +2,7 @@
import { mapGetters } from 'vuex';
import { useAlert } from 'dashboard/composables';
import router from '../../../../index';
import NextButton from 'dashboard/components-next/button/Button.vue';
import PageHeader from '../../SettingsSubPageHeader.vue';
import GreetingsEditor from 'shared/components/GreetingsEditor.vue';
@@ -9,6 +10,7 @@ export default {
components: {
PageHeader,
GreetingsEditor,
NextButton,
},
data() {
return {
@@ -73,7 +75,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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
@@ -85,7 +87,7 @@ export default {
/>
<form
v-if="!uiFlags.isCreating"
class="flex flex-wrap mx-0"
class="flex flex-wrap flex-col mx-0"
@submit.prevent="createChannel"
>
<div class="w-full">
@@ -188,12 +190,15 @@ export default {
"
:richtext="!textAreaChannels"
/>
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2 mt-4">
<div class="w-full">
<woot-submit-button
:loading="uiFlags.isCreating"
<NextButton
type="submit"
:is-loading="uiFlags.isCreating"
:disabled="!channelWebsiteUrl || !inboxName"
:button-text="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
solid
blue
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.SUBMIT_BUTTON')"
/>
</div>
</div>

4
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
View File

@@ -21,13 +21,13 @@ 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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
/>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0">
<label>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
<select v-model="provider">

30
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
View File

@@ -5,10 +5,12 @@ import { useAlert } from 'dashboard/composables';
import { required, email } from '@vuelidate/validators';
import router from '../../../../../index';
import PageHeader from '../../../SettingsSubPageHeader.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
PageHeader,
NextButton,
},
setup() {
return { v$: useVuelidate() };
@@ -69,14 +71,17 @@ 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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<PageHeader
:header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
/>
<form class="flex flex-wrap mx-0" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<form
class="flex flex-wrap flex-col mx-0"
@submit.prevent="createChannel()"
>
<div class="flex-shrink-0 flex-grow-0">
<label :class="{ error: v$.channelName.$error }">
{{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
<input
@@ -93,7 +98,7 @@ export default {
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<div class="flex-shrink-0 flex-grow-0 mb-4">
<label :class="{ error: v$.email.$error }">
{{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
<input
@@ -102,16 +107,19 @@ export default {
:placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
@blur="v$.email.$touch"
/>
<p class="help-text">
{{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
</p>
</label>
<p class="help-text">
{{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.SUBTITLE') }}
</p>
</div>
<div class="w-full">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
<div class="w-full mt-4">
<NextButton
:is-loading="uiFlags.isCreating"
type="submit"
solid
blue
:label="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.SUBMIT_BUTTON')"
/>
</div>
</form>

12
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/OAuthChannel.vue
View File

@@ -4,6 +4,7 @@ import { ref, computed } from 'vue';
import microsoftClient from 'dashboard/api/channel/microsoftClient';
import googleClient from 'dashboard/api/channel/googleClient';
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
import { useAlert } from 'dashboard/composables';
@@ -67,7 +68,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="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
>
<SettingsSubPageHeader
:header-title="title"
@@ -79,11 +80,12 @@ async function requestAuthorization() {
type="email"
:placeholder="inputPlaceholder"
/>
<woot-submit-button
icon="brand-twitter"
<NextButton
:is-loading="isRequestingAuthorization"
type="submit"
:button-text="submitButtonText"
:loading="isRequestingAuthorization"
solid
blue
:label="submitButtonText"
/>
</form>
</div>

30
app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
View File

@@ -3,11 +3,13 @@ import { mapGetters } from 'vuex';
import { useAlert } from 'dashboard/composables';
import SettingsSection from 'dashboard/components/SettingsSection.vue';
import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
LoadingState,
SettingsSection,
NextButton,
},
props: {
inbox: {
@@ -83,7 +85,7 @@ export default {
:title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
:sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
>
<div class="w-3/5">
<div>
<label>
<select v-model="selectedAgentBotId">
<option value="" disabled selected>
@@ -98,31 +100,25 @@ export default {
</option>
</select>
</label>
<div class="button-container">
<woot-submit-button
:button-text="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
:loading="uiFlags.isSettingAgentBot"
<div class="button-container space-x-2">
<NextButton
type="submit"
:label="$t('AGENT_BOTS.BOT_CONFIGURATION.SUBMIT')"
:is-loading="uiFlags.isSettingAgentBot"
/>
<woot-button
<NextButton
type="button"
:disabled="!selectedAgentBotId"
:loading="uiFlags.isDisconnecting"
variant="smooth"
color-scheme="alert"
class="button--disconnect"
:is-loading="uiFlags.isDisconnecting"
faded
ruby
@click="disconnectBot"
>
{{ $t('AGENT_BOTS.BOT_CONFIGURATION.DISCONNECT') }}
</woot-button>
</NextButton>
</div>
</div>
</SettingsSection>
</form>
</div>
</template>
<style scoped lang="scss">
.button--disconnect {
@apply ml-2;
}
</style>

2
app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
View File

@@ -135,7 +135,7 @@ export default {
<template>
<div
class="day-wrap flex py-2 px-0 min-h-[3rem] box-content border-b border-solid border-slate-50 dark:border-slate-600"
class="day-wrap flex py-2 gap-1 items-center px-0 min-h-[3rem] box-content border-b border-solid border-n-weak"
>
<div class="checkbox-wrap flex items-center">
<input

15
app/javascript/dashboard/routes/dashboard/settings/inbox/components/InboxReconnectionRequired.vue
View File

@@ -1,16 +1,15 @@
<script setup>
import Banner from 'dashboard/components/ui/Banner.vue';
import Banner from 'dashboard/components-next/banner/Banner.vue';
const emit = defineEmits(['reauthorize']);
</script>
<template>
<Banner
color-scheme="alert"
class="justify-start rounded-md"
:banner-message="$t('INBOX_MGMT.RECONNECTION_REQUIRED')"
:action-button-label="$t('INBOX_MGMT.CLICK_TO_RECONNECT')"
has-action-button
@primary-action="emit('reauthorize')"
/>
color="ruby"
:action-label="$t('INBOX_MGMT.CLICK_TO_RECONNECT')"
@action="emit('reauthorize')"
>
{{ $t('INBOX_MGMT.RECONNECTION_REQUIRED') }}
</Banner>
</template>

18
app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
View File

@@ -11,6 +11,7 @@ import {
defaultTimeSlot,
timeZoneOptions,
} from '../helpers/businessHour';
import NextButton from 'dashboard/components-next/button/Button.vue';
const DEFAULT_TIMEZONE = {
label: 'Pacific Time (US & Canada) (GMT-07:00)',
@@ -21,6 +22,7 @@ export default {
components: {
SettingsSection,
BusinessDay,
NextButton,
WootMessageEditor,
},
mixins: [inboxMixin],
@@ -138,19 +140,18 @@ export default {
{{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
</p>
<div v-if="isBusinessHoursEnabled" class="mb-6">
<div class="max-w-[37.5rem]">
<div>
<label class="unavailable-input-wrap">
{{ $t('INBOX_MGMT.BUSINESS_HOURS.UNAVAILABLE_MESSAGE_LABEL') }}
</label>
<div
v-if="isRichEditorEnabled"
class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
class="px-4 py-0 mx-0 mt-0 mb-4 rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 bg-n-alpha-black2"
>
<WootMessageEditor
v-model="unavailableMessage"
enable-variables
is-format-mode
class="message-editor"
:min-height="4"
/>
</div>
@@ -185,9 +186,10 @@ export default {
@update="data => onSlotUpdate(timeSlot.day, data)"
/>
</div>
<woot-submit-button
:button-text="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
:loading="uiFlags.isUpdating"
<NextButton
type="submit"
:label="$t('INBOX_MGMT.BUSINESS_HOURS.UPDATE')"
:is-loading="uiFlags.isUpdating"
:disabled="hasError"
/>
</form>
@@ -197,8 +199,6 @@ export default {
<style lang="scss" scoped>
.timezone-input-wrap {
@apply max-w-[37.5rem];
&::v-deep .multiselect {
@apply mt-2;
}
@@ -209,8 +209,6 @@ export default {
}
.unavailable-input-wrap {
@apply max-w-[37.5rem];
textarea {
@apply min-h-[4rem] mt-2;
}

2
app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
View File

@@ -39,12 +39,14 @@ export default {
component: SettingsContent,
props: params => {
const showBackButton = params.name !== 'settings_inbox_list';
const fullWidth = params.name === 'settings_inbox_show';
return {
headerTitle: 'INBOX_MGMT.HEADER',
headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
icon: 'mail-inbox-all',
newButtonRoutes: ['settings_inbox_list'],
showBackButton,
fullWidth,
};
},
children: [

16
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
View File

@@ -5,10 +5,12 @@ import { minValue } from '@vuelidate/validators';
import { useAlert } from 'dashboard/composables';
import { useConfig } from 'dashboard/composables/useConfig';
import SettingsSection from '../../../../../components/SettingsSection.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
SettingsSection,
NextButton,
},
props: {
inbox: {
@@ -139,9 +141,9 @@ export default {
@select="v$.selectedAgents.$touch"
/>
<woot-submit-button
:button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:loading="isAgentListUpdating"
<NextButton
:label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:is-loading="isAgentListUpdating"
@click="updateAgents"
/>
</SettingsSection>
@@ -163,7 +165,7 @@ export default {
</label>
</div>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
<p class="pb-1 text-sm not-italic text-n-slate-11">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.AUTO_ASSIGNMENT_SUB_TEXT') }}
</p>
</label>
@@ -181,12 +183,12 @@ export default {
@blur="v$.maxAssignmentLimit.$touch"
/>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
<p class="pb-1 text-sm not-italic text-n-slate-11">
{{ $t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_SUB_TEXT') }}
</p>
<woot-submit-button
:button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
<NextButton
:label="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:disabled="v$.maxAssignmentLimit.$invalid"
@click="updateInbox"
/>

6
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
View File

@@ -6,12 +6,14 @@ import ImapSettings from '../ImapSettings.vue';
import SmtpSettings from '../SmtpSettings.vue';
import { useVuelidate } from '@vuelidate/core';
import { required } from '@vuelidate/validators';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
SettingsSection,
ImapSettings,
SmtpSettings,
NextButton,
},
mixins: [inboxMixin],
props: {
@@ -225,12 +227,12 @@ export default {
)
"
/>
<woot-button
<NextButton
:disabled="v$.whatsAppInboxAPIKey.$invalid"
@click="updateWhatsAppInboxAPIKey"
>
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
</woot-button>
</NextButton>
</div>
</SettingsSection>
</div>

9
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
View File

@@ -12,15 +12,18 @@ defineEmits(['edit', 'delete']);
<template>
<tr class="max-w-full py-1">
<td
class="py-4 pr-4 text-sm w-40 max-w-[10rem] truncate"
class="py-4 ltr:pr-4 rtl:pl-4 text-sm w-40 max-w-[10rem] truncate"
:title="app.title"
>
{{ app.title }}
</td>
<td class="max-w-lg py-4 pr-4 text-sm truncate" :title="app.content[0].url">
<td
class="max-w-lg py-4 ltr:pr-4 rtl:pl-4 text-sm truncate"
:title="app.content[0].url"
>
{{ app.content[0].url }}
</td>
<td class="flex gap-1 py-4 pr-4 text-sm sm:pr-0 justify-end">
<td class="flex gap-1 py-4 ltr:pr-4 rtl:pl-4 text-sm sm:pr-0 justify-end">
<woot-button
v-tooltip.top="
$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.EDIT_TOOLTIP')

2
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
View File

@@ -121,7 +121,7 @@ export default {
<th
v-for="thHeader in tableHeaders"
:key="thHeader"
class="py-4 pr-4 font-semibold text-left text-slate-700 dark:text-slate-300"
class="py-4 ltr:pr-4 rtl:pl-4 font-semibold text-left text-slate-700 dark:text-slate-300"
>
{{ thHeader }}
</th>

35
app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
View File

@@ -2,9 +2,11 @@
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { frontendURL } from '../../../../helper/URLHelper';
import { useAlert } from 'dashboard/composables';
import { useInstallationName } from 'shared/mixins/globalConfigMixin';
import NextButton from 'dashboard/components-next/button/Button.vue';
const props = defineProps({
integrationId: {
@@ -19,6 +21,7 @@ const props = defineProps({
deleteConfirmationText: { type: Object, default: () => ({}) },
});
const { t } = useI18n();
const store = useStore();
const router = useRouter();
@@ -38,9 +41,9 @@ const closeDeletePopup = () => {
const deleteIntegration = async () => {
try {
await store.dispatch('integrations/deleteIntegration', props.integrationId);
useAlert('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE');
useAlert(t('INTEGRATION_SETTINGS.DELETE.API.SUCCESS_MESSAGE'));
} catch (error) {
useAlert('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE');
useAlert(t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE'));
}
};
@@ -90,26 +93,28 @@ const confirmDeletion = () => {
>
<div v-if="integrationEnabled">
<div v-if="integrationAction === 'disconnect'">
<div @click="openDeletePopup">
<woot-submit-button
:button-text="
actionButtonText ||
$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
"
button-class="smooth alert"
/>
</div>
<NextButton
:label="
actionButtonText ||
$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
"
faded
ruby
@click="openDeletePopup"
/>
</div>
<div v-else>
<button class="button nice">
<NextButton faded blue>
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.CONFIGURE') }}
</button>
</NextButton>
</div>
</div>
</router-link>
<div v-if="!integrationEnabled">
<a :href="integrationAction" class="rounded button success nice">
{{ $t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
<a :href="integrationAction">
<NextButton faded blue>
{{ $t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
</NextButton>
</a>
</div>
</div>

2
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
View File

@@ -119,7 +119,7 @@ export default {
<th
v-for="thHeader in tableHeaders"
:key="thHeader"
class="py-4 pr-4 text-left font-semibold text-n-slate-11 last:text-right last:pr-4"
class="py-4 ltr:pr-4 rtl:pl-4 text-left font-semibold text-n-slate-11 last:text-right last:pr-4"
>
{{ thHeader }}
</th>

2
app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
View File

@@ -121,7 +121,7 @@ export default {
@reset-action="resetNode"
/>
</div>
<div class="w-full md:w-1/3">
<div class="w-full md:w-1/3 pb-4">
<MacroProperties
:macro-name="macro.name"
:macro-visibility="macro.visibility"

31
app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
View File

@@ -3,6 +3,7 @@ import { computed, inject, defineModel } from 'vue';
import { useMacros } from 'dashboard/composables/useMacros';
import { useI18n } from 'vue-i18n';
import ActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
const props = defineProps({
singleNode: {
@@ -53,21 +54,21 @@ const dropdownValues = () => {
</script>
<template>
<div class="relative flex items-center w-full min-w-0 basis-full">
<woot-button
<div class="relative flex items-start w-full min-w-0 basis-full">
<NextButton
v-if="!singleNode"
size="small"
variant="clear"
color-scheme="secondary"
icon="navigation"
class="absolute cursor-move -left-8 macros__node-drag-handle"
ghost
sm
slate
icon="i-lucide-menu"
class="absolute cursor-move -left-10 mr-2 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-sm outline outline-1 outline-n-weak"
:class="
errorKey
? 'bg-red-50 animate-shake dark:bg-red-800'
: 'bg-n-slate-2 dark:bg-n-solid-3'
? 'animate-shake bg-n-ruby-8/20 outline-n-ruby-5 dark:outline-n-ruby-5'
: 'bg-n-background dark:bg-n-solid-1'
"
>
<ActionInput
@@ -82,13 +83,13 @@ const dropdownValues = () => {
@reset-action="$emit('resetAction')"
/>
</div>
<woot-button
<NextButton
v-if="!singleNode"
v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
icon="delete"
size="small"
variant="smooth"
color-scheme="alert"
icon="i-lucide-trash-2"
sm
faded
ruby
class="flex-shrink-0"
@click="$emit('deleteNode')"
/>

36
app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue
View File

@@ -1,12 +1,14 @@
<script>
import Draggable from 'vuedraggable';
import MacroNode from './MacroNode.vue';
import NextButton from 'dashboard/components-next/button/Button.vue';
import { getFileName } from './macroHelper';
export default {
components: {
Draggable,
MacroNode,
NextButton,
},
props: {
errors: {
@@ -45,10 +47,11 @@ export default {
<div class="macros__nodes">
<div class="macro__node">
<div>
<woot-label
:title="$t('MACROS.EDITOR.START_FLOW')"
color-scheme="primary"
/>
<span
class="bg-n-solid-blue text-n-blue-text py-1 px-1.5 leading-none text-sm rounded-md"
>
{{ $t('MACROS.EDITOR.START_FLOW') }}
</span>
</div>
</div>
<Draggable
@@ -84,24 +87,25 @@ export default {
</Draggable>
<div class="macro__node">
<div>
<woot-button
<NextButton
:title="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
class="macros__action-button"
color-scheme="success"
variant="smooth"
icon="add-circle"
class="shadow-sm"
solid
teal
icon="i-lucide-plus-circle"
@click="$emit('addNewNode')"
>
{{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
</woot-button>
</NextButton>
</div>
</div>
<div class="macro__node">
<div>
<woot-label
:title="$t('MACROS.EDITOR.END_FLOW')"
color-scheme="primary"
/>
<span
class="bg-n-solid-blue text-n-blue-text py-1 px-1.5 leading-none text-sm rounded-md"
>
{{ $t('MACROS.EDITOR.END_FLOW') }}
</span>
</div>
</div>
</div>
@@ -133,10 +137,6 @@ export default {
padding-bottom: var(--space-large);
}
.macros__action-button {
box-shadow: var(--shadow);
}
.macros__node-action-container {
position: relative;
.drag-handle {

18
app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
View File

@@ -1,5 +1,10 @@
<script>
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
components: {
NextButton,
},
inject: ['v$'],
props: {
macroName: {
@@ -29,7 +34,9 @@ export default {
</script>
<template>
<div class="p-3 bg-n-background h-full flex flex-col">
<div
class="p-4 bg-n-solid-2 border border-n-weak rounded-lg shadow-sm h-full flex flex-col"
>
<div>
<woot-input
:model-value="macroName"
@@ -100,14 +107,9 @@ export default {
</div>
</div>
<div class="mt-auto w-full">
<woot-button
size="expanded"
color-scheme="success"
class="w-full"
@click="$emit('submit')"
>
<NextButton blue solid class="w-full" @click="$emit('submit')">
{{ $t('MACROS.HEADER_BTN_TXT_SAVE') }}
</woot-button>
</NextButton>
</div>
</div>
</template>

329
app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
View File

@@ -165,179 +165,176 @@ export default {
</script>
<template>
<div class="flex flex-col md:flex-row">
<div class="flex flex-col items-center w-full md:flex-row">
<div
v-if="type === 'agent'"
class="md:w-[240px] w-full multiselect-wrap--small"
<div class="grid grid-cols-1 md:grid-cols-3 gap-y-0.5 gap-x-2">
<div v-if="type === 'agent'" class="multiselect-wrap--small">
<p class="mb-2 text-xs font-medium">
{{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
</p>
<multiselect
v-model="currentSelectedFilter"
:placeholder="multiselectLabel"
label="name"
track-by="id"
:options="filterItemsList"
:option-height="24"
:show-labels="false"
@update:model-value="changeFilterSelection"
>
<p class="mb-2 text-xs font-medium">
{{ $t('AGENT_REPORTS.FILTER_DROPDOWN_LABEL') }}
</p>
<multiselect
v-model="currentSelectedFilter"
:placeholder="multiselectLabel"
label="name"
track-by="id"
:options="filterItemsList"
:option-height="24"
:show-labels="false"
@update:model-value="changeFilterSelection"
>
<template #singleLabel="props">
<div class="flex min-w-0 items-center gap-2">
<Thumbnail
:src="props.option.thumbnail"
:status="props.option.availability_status"
:username="props.option.name"
size="22px"
/>
<span class="my-0 text-slate-800 truncate dark:text-slate-75">{{
props.option.name
}}</span>
</div>
</template>
<template #options="props">
<div class="flex items-center gap-2">
<Thumbnail
:src="props.option.thumbnail"
:status="props.option.availability_status"
:username="props.option.name"
size="22px"
/>
<p class="my-0 text-slate-800 dark:text-slate-75">
{{ props.option.name }}
</p>
</div>
</template>
</multiselect>
</div>
<div
v-else-if="type === 'label'"
class="md:w-[240px] w-full multiselect-wrap--small"
>
<p class="mb-2 text-xs font-medium">
{{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
</p>
<multiselect
v-model="currentSelectedFilter"
:placeholder="multiselectLabel"
label="title"
track-by="id"
:options="filterItemsList"
:option-height="24"
:show-labels="false"
@update:model-value="changeFilterSelection"
>
<template #singleLabel="props">
<div class="flex items-center min-w-0 gap-2">
<div
:style="{ backgroundColor: props.option.color }"
class="w-5 h-5 rounded-full"
/>
<span class="my-0 text-slate-800 truncate dark:text-slate-75">
{{ props.option.title }}
</span>
</div>
</template>
<template #option="props">
<div class="flex items-center min-w-0 gap-2">
<div
:style="{ backgroundColor: props.option.color }"
class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
/>
<span class="my-0 text-slate-800 truncate dark:text-slate-75">
{{ props.option.title }}
</span>
</div>
</template>
</multiselect>
</div>
<div v-else class="md:w-[240px] w-full multiselect-wrap--small">
<p class="mb-2 text-xs font-medium">
<template v-if="type === 'inbox'">
{{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
</template>
<template v-else-if="type === 'team'">
{{ $t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL') }}
</template>
<!-- handle default condition because the prop is not limited to the given 4 values -->
<template v-else>
{{ $t('FORMS.MULTISELECT.SELECT_ONE') }}
</template>
</p>
<multiselect
v-model="currentSelectedFilter"
track-by="id"
label="name"
:placeholder="multiselectLabel"
selected-label
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
deselect-label=""
:options="filterItemsList"
:searchable="false"
:allow-empty="false"
@update:model-value="changeFilterSelection"
/>
</div>
<div class="mx-1 md:w-[240px] w-full multiselect-wrap--small">
<p class="mb-2 text-xs font-medium">
{{ $t('REPORT.DURATION_FILTER_LABEL') }}
</p>
<multiselect
v-model="currentDateRangeSelection"
track-by="name"
label="name"
:placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
selected-label
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
deselect-label=""
:options="dateRange"
:searchable="false"
:allow-empty="false"
@select="changeDateSelection"
/>
</div>
<div v-if="isDateRangeSelected" class="">
<p class="mb-2 text-xs font-medium">
{{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
</p>
<WootDateRangePicker
show-range
:value="customDateRange"
:confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
:placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
@change="onChange"
/>
</div>
<div
v-if="notLast7Days"
class="mx-1 md:w-[240px] w-full multiselect-wrap--small"
>
<p class="mb-2 text-xs font-medium">
{{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
</p>
<multiselect
v-model="currentSelectedGroupByFilter"
track-by="id"
label="groupBy"
:placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
:options="groupByFilterItemsList"
:allow-empty="false"
:show-labels="false"
@update:model-value="changeGroupByFilterSelection"
/>
</div>
<template #singleLabel="props">
<div class="flex min-w-0 items-center gap-2">
<Thumbnail
:src="props.option.thumbnail"
:status="props.option.availability_status"
:username="props.option.name"
size="22px"
/>
<span class="my-0 text-slate-800 truncate dark:text-slate-75">{{
props.option.name
}}</span>
</div>
</template>
<template #options="props">
<div class="flex items-center gap-2">
<Thumbnail
:src="props.option.thumbnail"
:status="props.option.availability_status"
:username="props.option.name"
size="22px"
/>
<p class="my-0 text-slate-800 dark:text-slate-75">
{{ props.option.name }}
</p>
</div>
</template>
</multiselect>
</div>
<div class="flex items-center my-2">
<span class="mx-2 text-sm whitespace-nowrap">
<div v-else-if="type === 'label'" class="multiselect-wrap--small">
<p class="mb-2 text-xs font-medium">
{{ $t('LABEL_REPORTS.FILTER_DROPDOWN_LABEL') }}
</p>
<multiselect
v-model="currentSelectedFilter"
:placeholder="multiselectLabel"
label="title"
track-by="id"
:options="filterItemsList"
:option-height="24"
:show-labels="false"
@update:model-value="changeFilterSelection"
>
<template #singleLabel="props">
<div class="flex items-center min-w-0 gap-2">
<div
:style="{ backgroundColor: props.option.color }"
class="w-5 h-5 rounded-full"
/>
<span class="my-0 text-slate-800 truncate dark:text-slate-75">
{{ props.option.title }}
</span>
</div>
</template>
<template #option="props">
<div class="flex items-center min-w-0 gap-2">
<div
:style="{ backgroundColor: props.option.color }"
class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
/>
<span class="my-0 text-slate-800 truncate dark:text-slate-75">
{{ props.option.title }}
</span>
</div>
</template>
</multiselect>
</div>
<div v-else class="multiselect-wrap--small">
<p class="mb-2 text-xs font-medium">
<template v-if="type === 'inbox'">
{{ $t('INBOX_REPORTS.FILTER_DROPDOWN_LABEL') }}
</template>
<template v-else-if="type === 'team'">
{{ $t('TEAM_REPORTS.FILTER_DROPDOWN_LABEL') }}
</template>
<template v-else>
{{ $t('FORMS.MULTISELECT.SELECT_ONE') }}
</template>
</p>
<multiselect
v-model="currentSelectedFilter"
track-by="id"
label="name"
:placeholder="multiselectLabel"
selected-label
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
deselect-label=""
:options="filterItemsList"
:searchable="false"
:allow-empty="false"
@update:model-value="changeFilterSelection"
/>
</div>
<div class="multiselect-wrap--small">
<p class="mb-2 text-xs font-medium">
{{ $t('REPORT.DURATION_FILTER_LABEL') }}
</p>
<multiselect
v-model="currentDateRangeSelection"
track-by="name"
label="name"
:placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
selected-label
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
deselect-label=""
:options="dateRange"
:searchable="false"
:allow-empty="false"
@select="changeDateSelection"
/>
</div>
<div
class="flex items-center h-10 self-center order-5 md:order-2 md:justify-self-end"
>
<span class="mr-2 text-sm whitespace-nowrap">
{{ $t('REPORT.BUSINESS_HOURS') }}
</span>
<span>
<woot-switch v-model="businessHoursSelected" />
</span>
</div>
<div v-if="isDateRangeSelected" class="order-3 md:order-4">
<p class="mb-2 text-xs font-medium">
{{ $t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER') }}
</p>
<WootDateRangePicker
show-range
:value="customDateRange"
:confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
:placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
class="auto-width"
@change="onChange"
/>
</div>
<div v-if="notLast7Days" class="multiselect-wrap--small order-4 md:order-5">
<p class="mb-2 text-xs font-medium">
{{ $t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL') }}
</p>
<multiselect
v-model="currentSelectedGroupByFilter"
track-by="id"
label="groupBy"
:placeholder="$t('REPORT.GROUP_BY_FILTER_DROPDOWN_LABEL')"
:options="groupByFilterItemsList"
:allow-empty="false"
:show-labels="false"
@update:model-value="changeGroupByFilterSelection"
/>
</div>
</div>
</template>

2
app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
View File

@@ -63,7 +63,7 @@
.mx-datepicker {
.mx-input {
@apply bg-n-alpha-3;
background-color: transparent !important;
}
.mx-input-wrapper input::placeholder {

2
app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue
View File

@@ -196,7 +196,7 @@ export default {
/>
<div
class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-slate-200 dark:border-slate-600 px-3 py-1.5 rounded-xl justify-between"
class="mt-3 flex h-10 items-center text-sm w-full gap-2 border border-solid border-n-strong px-3 py-1.5 rounded-xl justify-between"
>
<span for="sla_bh" class="text-slate-700 dark:text-slate-200">
{{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}

2
app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue
View File

@@ -104,7 +104,7 @@ export default {
<div class="mt-7">
<select
v-model="thresholdUnitValue"
class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 bg-slate-50 rounded-xl hover:cursor-pointer pr-7 text-slate-800 dark:text-slate-300"
class="px-4 py-1.5 min-w-[6.5rem] h-10 text-sm font-medium border-0 rounded-xl hover:cursor-pointer pr-7"
@change="onThresholdUnitChange"
>
<option

2
app/javascript/dashboard/routes/dashboard/settings/sla/components/SLAHeader.vue
View File

@@ -22,7 +22,7 @@ defineEmits(['add']);
<woot-button
color-scheme="primary"
icon="plus-sign"
class="rounded-xl"
class="rounded-md"
@click="$emit('add')"
>
{{ $t('SLA.ADD_ACTION') }}

2
app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue
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="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
>
<PageHeader
:header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"

2
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
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="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
>
<form
class="flex flex-wrap mx-0 overflow-x-auto"

2
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue
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="border border-slate-25 dark:border-slate-800/60 bg-n-background 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')"

2
app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue
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="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
>
<EmptyState
:title="$t('TEAMS_SETTINGS.FINISH.TITLE')"

2
app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue
View File

@@ -104,7 +104,7 @@ const confirmPlaceHolderText = computed(() =>
>
<tbody class="divide-y divide-slate-50 dark:divide-slate-800">
<tr v-for="team in teamsList" :key="team.id">
<td class="py-4 pr-4">
<td class="py-4 ltr:pr-4 rtl:pl-4">
<span class="block font-medium capitalize">{{ team.name }}</span>
<p class="mb-0">{{ team.description }}</p>
</td>