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

Merge branch 'develop' into feat/context-menu-snooze

Browse Source
This commit is contained in:
Sivin Varghese
2024-02-28 15:26:33 +05:30
committed by GitHub
parent 681373a248 dafedddc1a
commit c8d0d06d45
256 changed files with 1729 additions and 2729 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+2 -5
View File
@@ -1,7 +1,7 @@
<template>
<div
class="w-[25%] bg-white dark:bg-slate-900 contact--panel"
:class="{ 'border-left': showAvatar }"
class="w-1/4 bg-white dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 h-full text-sm overflow-y-auto relative"
:class="showAvatar ? 'border-l border-solid ' : 'border-r border-solid'"
>
<contact-info
:show-close-button="showCloseButton"
@@ -151,9 +151,6 @@ export default {
@apply pb-3 mb-4;
}
}
.contact--panel {
@apply border-r border-slate-50 dark:border-slate-800/50 h-full text-sm overflow-y-auto relative;
}
.list-group {
.list-group-item {
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+1 -1
View File
@@ -135,7 +135,7 @@ export default {
status={row.availability_status}
/>
<div class="user-block">
<h6 class="sub-block-title overflow-hidden whitespace-nowrap text-ellipsis">
<h6 class="text-base overflow-hidden whitespace-nowrap text-ellipsis">
<router-link
to={`/app/accounts/${this.$route.params.accountId}/contacts/${row.id}`}
class="user-name"
app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div class="wrap">
<div class="header">
<h5 class="block-title text-black-900 dark:text-slate-200">
<h5 class="text-lg text-black-900 dark:text-slate-200">
{{ $t('EVENTS.HEADER.TITLE') }}
</h5>
</div>
app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<div class="card-wrap">
<div class="header">
<div class="text-wrap">
<h6 class="text-block-title">
<h6 class="text-sm">
{{ eventType }}
</h6>
<span class="event-path">on {{ eventPath }}</span>
app/javascript/dashboard/routes/dashboard/contacts/pages/ContactManageView.vue
+1 -1
View File
@@ -30,7 +30,7 @@
:show-avatar="false"
:contact="contact"
/>
<div class="w-[75%] h-full">
<div class="w-3/4 h-full">
<woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
<woot-tabs-item
v-for="tab in tabs"
app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+1 -1
View File
@@ -7,7 +7,7 @@
<spinner v-if="watchersUiFlas.isFetching" size="tiny" />
{{ totalWatchersText }}
</p>
<p v-else class="text-muted m-0 text-sm">
<p v-else class="text-slate-400 dark:text-slate-700 m-0 text-sm">
{{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
</p>
</div>
app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue
+1 -2
View File
@@ -3,14 +3,13 @@
<span class="overflow-hidden whitespace-nowrap text-ellipsis">{{
macro.name
}}</span>
<div class="macros-actions">
<div class="macros-actions flex items-center gap-1">
<woot-button
v-tooltip.left-start="$t('MACROS.EXECUTE.PREVIEW')"
size="tiny"
variant="smooth"
color-scheme="secondary"
icon="info"
class="margin-right-smaller"
@click="toggleMacroPreview(macro)"
/>
<woot-button
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+9 -10
View File
@@ -1,6 +1,6 @@
<template>
<form
class="contact--form w-full pt-6 px-8 pb-8"
class="w-full px-8 pt-6 pb-8 contact--form"
@submit.prevent="handleSubmit"
>
<div>
@@ -76,7 +76,7 @@
</label>
<div
v-if="isPhoneNumberNotValid || !phoneNumber"
class="callout small warning text-sm dark:bg-yellow-200/20 dark:text-yellow-400"
class="relative mx-0 mt-0 mb-2.5 p-2 rounded-md text-sm border border-solid border-yellow-500 text-yellow-700 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 dark:text-yellow-400"
>
{{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
</div>
@@ -121,17 +121,20 @@
<div
v-for="socialProfile in socialProfileKeys"
:key="socialProfile.key"
class="input-group"
class="flex items-stretch w-full mb-4"
>
<span class="input-group-label">{{ socialProfile.prefixURL }}</span>
<span
class="flex items-center h-10 px-2 text-sm border-solid bg-slate-50 border-y ltr:border-l rtl:border-r ltr:rounded-l-md rtl:rounded-r-md dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600"
>{{ socialProfile.prefixURL }}</span
>
<input
v-model="socialProfileUserNames[socialProfile.key]"
class="input-group-field"
class="input-group-field ltr:rounded-l-none rtl:rounded-r-none !mb-0"
type="text"
/>
</div>
</div>
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
<div class="w-full">
<woot-submit-button
:loading="inProgress"
@@ -416,10 +419,6 @@ export default {
</script>
<style scoped lang="scss">
.input-group-label {
@apply text-sm bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border-slate-200 dark:border-slate-600;
}
::v-deep {
.multiselect .multiselect__tags .multiselect__single {
@apply pl-0;
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+8 -8
View File
@@ -1,6 +1,6 @@
<template>
<div class="relative items-center p-4 bg-white dark:bg-slate-900">
<div class="text-left rtl:text-right">
<div class="text-left rtl:text-right flex flex-col gap-2">
<div class="flex justify-between flex-row">
<thumbnail
v-if="showAvatar"
@@ -17,10 +17,10 @@
/>
</div>
<div class="mt-2 w-full">
<div v-if="showAvatar" class="flex items-start mb-2 gap-1.5">
<div class="flex flex-col items-start gap-1.5 min-w-0 w-full">
<div v-if="showAvatar" class="flex items-start gap-2 min-w-0 w-full">
<h3
class="text-base text-slate-800 dark:text-slate-100 capitalize whitespace-normal my-0"
class="flex-shrink min-w-0 text-base text-slate-800 dark:text-slate-100 capitalize my-0 max-w-full break-words"
>
{{ contact.name }}
</h3>
@@ -38,7 +38,7 @@
/>
<a
:href="contactProfileLink"
class="fs-default"
class="text-base"
target="_blank"
rel="noopener nofollow noreferrer"
>
@@ -52,10 +52,10 @@
</div>
</div>
<p v-if="additionalAttributes.description" class="break-words">
<p v-if="additionalAttributes.description" class="break-words mb-0.5">
{{ additionalAttributes.description }}
</p>
<div class="mb-3">
<div class="flex flex-col gap-2 items-start">
<contact-info-row
:href="contact.email ? `mailto:${contact.email}` : ''"
:value="contact.email"
@@ -95,7 +95,7 @@
<social-icons :social-profiles="socialProfiles" />
</div>
</div>
<div class="flex items-center w-full mt-2 gap-2">
<div class="flex items-center w-full mt-0.5 gap-2">
<woot-button
v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
title="$t('CONTACT_PANEL.NEW_MESSAGE')"
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue
+6 -11
View File
@@ -1,15 +1,15 @@
<template>
<div class="-ml-1">
<div class="ltr:-ml-1 rtl:-mr-1 h-5">
<a
v-if="href"
:href="href"
class="flex items-center mb-2 text-slate-800 dark:text-slate-100 hover:underline"
class="flex items-center gap-2 text-slate-800 dark:text-slate-100 hover:underline"
>
<emoji-or-icon
:icon="icon"
:emoji="emoji"
icon-size="14"
class="mr-2 ml-1 rtl:mr-1 rtl:ml-2"
class="ltr:ml-1 rtl:mr-1"
/>
<span
v-if="value"
@@ -29,20 +29,20 @@
size="tiny"
color-scheme="secondary"
icon="clipboard"
class-names="copy-button"
class-names="p-0"
@click="onCopy"
/>
</a>
<div
v-else
class="flex items-center mb-2 text-slate-800 dark:text-slate-100"
class="flex items-center gap-2 text-slate-800 dark:text-slate-100"
>
<emoji-or-icon
:icon="icon"
:emoji="emoji"
icon-size="14"
class="mr-2 ml-1 rtl:mr-1 rtl:ml-2"
class="ltr:ml-1 rtl:mr-1"
/>
<span
v-if="value"
@@ -97,8 +97,3 @@ export default {
},
};
</script>
<style scoped>
.copy-button {
@apply ml-1 rtl:ml-0 rtl:mr-1;
}
</style>
app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+6 -3
View File
@@ -1,7 +1,10 @@
<template>
<form class="conversation--form w-full" @submit.prevent="onFormSubmit">
<div v-if="showNoInboxAlert" class="callout warning">
<p>
<div
v-if="showNoInboxAlert"
class="relative mx-0 mt-0 mb-2.5 p-2 rounded-none text-sm border border-solid border-yellow-500 dark:border-yellow-700 bg-yellow-200/60 dark:bg-yellow-200/20 text-slate-700 dark:text-yellow-400"
>
<p class="mb-0">
{{ $t('NEW_CONVERSATION.NO_INBOX') }}
</p>
</div>
@@ -226,7 +229,7 @@
class="flex top-0 bottom-0 z-30 gap-2 right-0 left-0 items-center justify-center flex-col absolute w-full h-full bg-white/80 dark:bg-slate-700/80"
>
<fluent-icon icon="cloud-backup" size="40" />
<h4 class="page-sub-title text-slate-600 dark:text-slate-200">
<h4 class="text-2xl break-words text-slate-600 dark:text-slate-200">
{{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
</h4>
</div>
app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+1
View File
@@ -18,6 +18,7 @@
:show-close="true"
:color="label.color"
variant="smooth"
class="max-w-[calc(100%-0.5rem)]"
@click="removeLabelFromConversation"
/>
app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+3 -3
View File
@@ -40,7 +40,7 @@
</span>
<span class="article-column article-category">
<router-link
class="fs-small button clear link secondary"
class="text-sm button clear link secondary"
:to="getCategoryRoute(category.slug)"
>
<span
@@ -52,7 +52,7 @@
</router-link>
</span>
<span class="article-column article-read-count">
<span class="fs-small" :title="formattedViewCount">
<span class="text-sm" :title="formattedViewCount">
{{ readableViewCount }}
</span>
</span>
@@ -67,7 +67,7 @@
</div>
</span>
<span class="article-column article-last-edited">
<span class="fs-small">
<span class="text-sm">
{{ lastUpdatedAt }}
</span>
</span>
app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
+1 -1
View File
@@ -4,7 +4,7 @@
@click="handlePreview"
>
<h4
class="text-block-title text-left mb-0 text-slate-900 dark:text-slate-25 px-1 -mx-1 rounded-sm width-auto hover:underline group-hover:underline"
class="text-sm text-left mb-0 text-slate-900 dark:text-slate-25 px-1 -mx-1 rounded-sm width-auto hover:underline group-hover:underline"
>
{{ title }}
</h4>
app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col py-1">
<div class="flex-container align-middle align-justify py-2">
<h3 class="sub-block-title text-slate-900 dark:text-slate-25">
<div class="flex align-middle align-justify py-2">
<h3 class="text-base text-slate-900 dark:text-slate-25">
{{ title }}
</h3>
<woot-button
app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+3 -1
View File
@@ -5,7 +5,9 @@
<div class="flex items-center">
<woot-sidemenu-icon />
<div class="flex items-center my-0 mx-2">
<h3 class="text-2xl text-slate-800 dark:text-slate-100 mb-0">
<h3
class="text-2xl text-slate-800 dark:text-slate-100 font-medium mb-0"
>
{{ headerTitle }}
</h3>
<span class="text-sm text-slate-600 dark:text-slate-300 my-0 mx-2">{{
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+1 -1
View File
@@ -85,7 +85,7 @@
size="tiny"
variant="smooth"
icon="delete"
color-scheme="secondary"
color-scheme="alert"
:disabled="locale.code === selectedLocaleCode"
@click="deleteLocale(locale.code)"
/>
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+5 -7
View File
@@ -1,7 +1,9 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<div
class="pt-3 bg-white dark:bg-slate-900 h-full border border-solid border-transparent px-6 pb-6 dark:border-transparent w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<div class="w-full">
<h3 class="block-title text-black-900 dark:text-slate-200">
<h3 class="text-lg text-black-900 dark:text-slate-200">
{{
$t(
'HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.BASIC_SETTINGS_PAGE.TITLE'
@@ -75,7 +77,7 @@
</div>
</div>
</div>
<div class="flex-end">
<div class="flex justify-end">
<woot-button
:is-loading="isSubmitting"
:is-disabled="$v.$invalid"
@@ -243,10 +245,6 @@ export default {
};
</script>
<style lang="scss" scoped>
.wizard-body {
@apply pt-3 border border-solid border-transparent dark:border-transparent;
}
::v-deep {
input {
@apply mb-1;
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+5 -7
View File
@@ -1,7 +1,9 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
<div
class="pt-3 bg-white dark:bg-slate-900 h-full border border-solid border-transparent px-6 pb-6 dark:border-transparent w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<div class="w-full">
<h3 class="block-title text-black-900 dark:text-slate-200">
<h3 class="text-lg text-black-900 dark:text-slate-200">
{{
$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.CUSTOMIZATION_PAGE.TITLE')
}}
@@ -57,7 +59,7 @@
</div>
</div>
</div>
<div class="flex-end">
<div class="flex justify-end">
<woot-button
:is-loading="isSubmitting"
:is-disabled="$v.$invalid"
@@ -150,10 +152,6 @@ export default {
};
</script>
<style lang="scss" scoped>
.wizard-body {
@apply pt-3 border border-solid border-transparent dark:border-transparent;
}
::v-deep {
input {
@apply mb-1;
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+1 -1
View File
@@ -44,7 +44,7 @@
</span>
<span
v-if="isLocaleDefault(locale.code)"
class="fs-small text-slate-300 dark:text-slate-200"
class="text-sm text-slate-300 dark:text-slate-200"
>
{{ `(${$t('HELP_CENTER.PORTAL.DEFAULT')})` }}
</span>
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue
+1 -1
View File
@@ -15,7 +15,7 @@
@show="showArticleInPortal"
@update-meta="updateMeta"
/>
<div v-if="isFetching" class="text-center p-normal fs-default h-full">
<div v-if="isFetching" class="text-center p-4 text-base h-full">
<spinner size="" />
<span>{{ $t('HELP_CENTER.EDIT_ARTICLE.LOADING') }}</span>
</div>
app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="flex items-center relative">
<woot-button
variant="hollow"
class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[25px] h-[2.45rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"
color-scheme="secondary"
@click="toggleEmojiPicker"
>
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
+3 -1
View File
@@ -3,7 +3,9 @@
<div class="flex justify-between items-center mt-0 mb-2 mx-0 h-12">
<div class="flex items-center">
<woot-sidemenu-icon />
<h1 class="my-0 mx-2 text-2xl text-slate-800 dark:text-slate-100">
<h1
class="my-0 mx-2 text-2xl text-slate-800 dark:text-slate-100 font-medium"
>
{{ $t('HELP_CENTER.PORTAL.HEADER') }}
</h1>
</div>
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue
+1 -1
View File
@@ -13,7 +13,7 @@
class="flex flex-row overflow-auto py-4 pl-4 rtl:pl-0 rtl:pr-4 h-full bg-slate-50 dark:bg-slate-800"
>
<woot-wizard
class="hide-for-small-only w-[25%]"
class="hidden md:block w-1/4"
:global-config="globalConfig"
:items="items"
/>
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue
+4 -7
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
<div
class="pt-3 bg-white dark:bg-slate-900 h-full border border-solid border-transparent px-6 pb-6 dark:border-transparent w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
>
<empty-state
:title="$t('HELP_CENTER.PORTAL.ADD.CREATE_FLOW_PAGE.FINISH_PAGE.TITLE')"
:message="
@@ -8,7 +10,7 @@
>
<div class="w-full text-center">
<router-link
class="button success nice"
class="button success nice rounded"
:to="{
name: 'list_all_portals',
}"
@@ -35,8 +37,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.wizard-body {
@apply pb-3;
}
</style>
app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanel.vue
+1 -3
View File
@@ -139,9 +139,7 @@ export default {
uiFlags: 'notifications/getUIFlags',
}),
notificationPanelFooterIconClass() {
return this.isRTLView
? 'margin-right-minus-slab'
: 'margin-left-minus-slab';
return this.isRTLView ? '-mr-3' : '-ml-3';
},
totalUnreadNotifications() {
return this.meta.unreadCount;
app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue
+2 -1
View File
@@ -1,9 +1,10 @@
<template>
<div>
<div class="w-full">
<woot-button
size="expanded"
color-scheme="secondary"
variant="link"
class="w-full"
@click="onClickOpenNotification()"
>
<div
app/javascript/dashboard/routes/dashboard/notifications/components/NotificationTable.vue
+3 -5
View File
@@ -1,5 +1,7 @@
<template>
<section class="notification--table-wrap bg-white dark:bg-slate-900">
<section
class="h-full flex-shrink flex-grow overflow-hidden py-8 px-4 bg-white dark:bg-slate-900"
>
<woot-submit-button
v-if="notificationMetadata.unreadCount"
class="button nice success button--fixed-top"
@@ -136,10 +138,6 @@ export default {
@apply text-sm m-0 text-slate-800 dark:text-slate-100;
}
.notification--table-wrap {
@apply overflow-hidden hover:overflow-y-auto flex-shrink flex-grow h-full py-8 px-12;
}
.notifications-table {
> tbody {
> tr {
app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="columns notification--page">
<div class="notification--content medium-12">
<div class="overflow-y-auto h-full">
<div class="flex flex-col h-full">
<notification-table
:notifications="records"
:is-loading="uiFlags.isFetching"
app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+5 -3
View File
@@ -15,15 +15,17 @@
v-if="icon"
:icon="icon"
:class="iconClass"
class="mr-2 ml-4 rtl:ml-2 rtl:mr-4"
class="mr-2 ml-1 rtl:ml-2 rtl:mr-1 hidden md:block"
/>
<slot />
<span class="text-slate-900 dark:text-slate-100">{{ headerTitle }}</span>
<span class="text-slate-900 font-medium text-2xl dark:text-slate-100">
{{ headerTitle }}
</span>
</h1>
<router-link
v-if="showNewButton && isAdmin"
:to="buttonRoute"
class="button success button--fixed-top"
class="button success button--fixed-top 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/SettingsSubPageHeader.vue
+3 -1
View File
@@ -1,6 +1,8 @@
<template>
<div class="flex flex-col w-full items-start">
<h2 class="text-xl text-slate-800 dark:text-slate-100 break-words">
<h2
class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100 break-words"
>
{{ headerTitle }}
</h2>
<p
app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div
class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900"
class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900 overflow-auto"
>
<settings-header
button-route="new"
app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+3 -3
View File
@@ -7,7 +7,7 @@
<div
class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
>
<h4 class="block-title text-black-900 dark:text-slate-200">
<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>
@@ -87,12 +87,12 @@
</div>
<div
class="p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300 row"
class="p-4 border-slate-25 dark:border-slate-700 text-black-900 dark:text-slate-300 flex flex-row"
>
<div
class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"
>
<h4 class="block-title text-black-900 dark:text-slate-200">
<h4 class="text-lg font-medium text-black-900 dark:text-slate-200">
{{ $t('GENERAL_SETTINGS.FORM.ACCOUNT_ID.TITLE') }}
</h4>
<p>
app/javascript/dashboard/routes/dashboard/settings/agentBots/Index.vue
+4 -2
View File
@@ -1,7 +1,7 @@
<template>
<div class="flex-1 overflow-auto p-4">
<div class="flex flex-row gap-4">
<div class="w-[60%]">
<div class="w-full lg:w-3/5">
<woot-loading-state
v-if="uiFlags.isFetching"
:message="$t('AGENT_BOTS.LIST.LOADING')"
@@ -23,7 +23,7 @@
</p>
</div>
<div class="w-[34%]">
<div class="hidden lg:block w-1/3">
<p v-html="$t('AGENT_BOTS.SIDEBAR_TXT')" />
</div>
</div>
@@ -94,9 +94,11 @@ export default {
.bots-list {
list-style: none;
}
.nowrap {
white-space: nowrap;
}
.white-text {
color: white;
}
app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotRow.vue
+2 -11
View File
@@ -1,5 +1,5 @@
<template>
<tr>
<tr class="space-x-2">
<td class="agent-bot--details">
<div class="agent-bot--link">
{{ agentBot.name }}
@@ -9,7 +9,7 @@
<show-more :text="agentBot.description" :limit="120" />
</div>
</td>
<td class="button-wrapper">
<td class="flex justify-end gap-1">
<woot-button
v-if="isACSMLTypeBot"
v-tooltip.top="$t('AGENT_BOTS.EDIT.BUTTON_TEXT')"
@@ -75,13 +75,4 @@ export default {
.agent-bot--details {
width: 90%;
}
.button-wrapper {
max-width: var(--space-mega);
min-width: auto;
button:nth-child(2) {
margin-left: var(--space-normal);
}
}
</style>
app/javascript/dashboard/routes/dashboard/settings/agentBots/components/AgentBotType.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<span>
<span class="inline-flex items-center gap-1">
<img
v-tooltip="botTypeConfig[botType].label"
class="agent-bot-type--thumbnail"
app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
+2 -3
View File
@@ -11,7 +11,7 @@
<!-- List Agents -->
<div class="flex flex-row gap-4">
<div class="w-[60%]">
<div class="w-full lg:w-3/5">
<woot-loading-state
v-if="uiFlags.isFetching"
:message="$t('AGENT_MGMT.LOADING')"
@@ -27,7 +27,6 @@
<td>
<thumbnail
:src="agent.thumbnail"
class="columns"
:username="agent.name"
size="40px"
:status="agent.availability_status"
@@ -85,7 +84,7 @@
</table>
</div>
</div>
<div class="w-[34%]">
<div class="w-1/3 hidden lg:block">
<span
v-dompurify-html="
useInstallationName(
app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
+4 -3
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex flex-row gap-4 pl-2">
<div class="w-[60%]">
<div class="flex flex-row gap-4 p-8">
<div class="w-full lg:w-3/5">
<woot-tabs :index="selectedTabIndex" @change="onClickTabChange">
<woot-tabs-item
v-for="tab in tabs"
@@ -81,7 +81,7 @@
</table>
</div>
</div>
<div class="w-[34%]">
<div class="hidden lg:block w-1/3">
<span v-dompurify-html="$t('ATTRIBUTES_MGMT.SIDEBAR_TXT')" />
</div>
<woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
@@ -224,6 +224,7 @@ export default {
@apply p-0;
}
}
.tabs-title a {
font-weight: var(--font-weight-medium);
padding-top: 0;
app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="flex-1 overflow-auto p-4">
<div class="flex-1 overflow-auto">
<woot-button
color-scheme="success"
class-names="button--fixed-top"
app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue
+1 -1
View File
@@ -19,7 +19,7 @@
class="woot-table w-full"
>
<colgroup>
<col class="w-[60%]" />
<col class="w-3/5" />
<col />
<col />
</colgroup>
app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue
+2 -2
View File
@@ -9,7 +9,7 @@
{{ $t('AUTOMATION.HEADER_BTN_TXT') }}
</woot-button>
<div class="flex flex-row gap-4">
<div class="w-[60%]">
<div class="w-full lg:w-3/5">
<p
v-if="!uiFlags.isFetching && !records.length"
class="flex h-full items-center flex-col justify-center"
@@ -77,7 +77,7 @@
</table>
</div>
<div class="w-[34%]">
<div class="hidden lg:block w-1/3">
<span v-dompurify-html="$t('AUTOMATION.SIDEBAR_TXT')" />
</div>
</div>
app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+2 -2
View File
@@ -61,7 +61,7 @@
</label>
<label
v-if="isOnOffType"
v-if="isOneOffType"
class="multiselect-wrap--small"
:class="{ error: $v.selectedAudience.$error }"
>
@@ -106,7 +106,7 @@
</span>
</label>
<label v-if="isOnOffType">
<label v-if="isOneOffType">
{{ $t('CAMPAIGN.ADD.FORM.SCHEDULED_AT.LABEL') }}
<woot-date-time-picker
:value="scheduledAt"
app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue
+9 -7
View File
@@ -1,10 +1,12 @@
<template>
<div
class="bg-white dark:bg-slate-800 mb-2 border border-slate-50 dark:border-slate-900 rounded-md px-5 py-4"
class="px-5 py-4 mb-2 bg-white border rounded-md dark:bg-slate-800 border-slate-50 dark:border-slate-900"
>
<div class="flex flex-row items-start justify-between">
<div class="flex flex-col">
<div class="text-base font-medium -mt-1 mb-1">
<div
class="mb-1 -mt-1 text-base font-medium text-slate-900 dark:text-slate-100"
>
{{ campaign.title }}
</div>
<div
@@ -35,14 +37,14 @@
</div>
</div>
<div class="flex flex-row mt-5 items-center space-x-3">
<div class="flex flex-row items-center mt-5 space-x-3">
<woot-label
small
:title="campaignStatus"
:color-scheme="colorScheme"
class="text-xs mr-3"
class="mr-3 text-xs"
/>
<inbox-name :inbox="campaign.inbox" class="ltr:ml-0 rtl:mr-0 mb-1" />
<inbox-name :inbox="campaign.inbox" class="mb-1 ltr:ml-0 rtl:mr-0" />
<user-avatar-with-name
v-if="campaign.sender"
:user="campaign.sender"
@@ -50,13 +52,13 @@
/>
<div
v-if="campaign.trigger_rules.url"
class="text-xs text-woot-600 mb-1 text-truncate w-1/4"
class="w-1/4 mb-1 text-xs text-woot-600 text-truncate"
>
{{ campaign.trigger_rules.url }}
</div>
<div
v-if="campaign.scheduled_at"
class="text-xs text-slate-700 dark:text-slate-500 mb-1"
class="mb-1 text-xs text-slate-700 dark:text-slate-500"
>
{{ messageStamp(new Date(campaign.scheduled_at), 'LLL d, h:mm a') }}
</div>
app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js
+1 -1
View File
@@ -18,7 +18,7 @@ export default {
},
{
path: 'ongoing',
name: 'settings_account_campaigns',
name: 'ongoing_campaigns',
roles: ['administrator'],
component: Index,
},
app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+1 -1
View File
@@ -25,7 +25,7 @@
<div class="editor-wrap">
<woot-message-editor
v-model="content"
class="message-editor"
class="message-editor [&>div]:px-1"
:class="{ editor_warning: $v.content.$error }"
:enable-variables="true"
:enable-canned-responses="false"
app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+1 -1
View File
@@ -22,7 +22,7 @@
<div class="editor-wrap">
<woot-message-editor
v-model="content"
class="message-editor"
class="message-editor [&>div]:px-1"
:class="{ editor_warning: $v.content.$error }"
:enable-variables="true"
:enable-canned-responses="false"
app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
+11 -7
View File
@@ -1,5 +1,5 @@
<template>
<div class="flex-1 overflow-auto p-4">
<div class="flex-1 overflow-auto">
<woot-button
color-scheme="success"
class-names="button--fixed-top"
@@ -10,11 +10,11 @@
</woot-button>
<!-- List Canned Response -->
<div class="flex flex-row gap-4">
<div class="w-[60%]">
<div class="flex flex-row gap-4 p-8">
<div class="w-full xl:w-3/5">
<p
v-if="!uiFlags.fetchingList && !records.length"
class="flex h-full items-center flex-col justify-center"
class="flex flex-col items-center justify-center h-full"
>
{{ $t('CANNED_MGMT.LIST.404') }}
</p>
@@ -32,6 +32,7 @@
<th
v-for="thHeader in $t('CANNED_MGMT.LIST.TABLE_HEADER')"
:key="thHeader"
class="last:text-right"
>
{{ thHeader }}
</th>
@@ -42,7 +43,10 @@
:key="cannedItem.short_code"
>
<!-- Short Code -->
<td class="w-[8.75rem]">
<td
class="w-[8.75rem] truncate max-w-[8.75rem]"
:title="cannedItem.short_code"
>
{{ cannedItem.short_code }}
</td>
<!-- Content -->
@@ -50,7 +54,7 @@
{{ cannedItem.content }}
</td>
<!-- Action Buttons -->
<td class="button-wrapper">
<td class="flex justify-end gap-1 min-w-[12.5rem]">
<woot-button
v-tooltip.top="$t('CANNED_MGMT.EDIT.BUTTON_TEXT')"
variant="smooth"
@@ -75,7 +79,7 @@
</table>
</div>
<div class="w-[34%]">
<div class="hidden w-1/3 xl:block">
<span v-dompurify-html="$t('CANNED_MGMT.SIDEBAR_TXT')" />
</div>
</div>
app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+4 -2
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<form class="mx-0 flex flex-wrap" @submit.prevent="addAgents()">
<div class="w-full">
<page-header
@@ -7,7 +9,7 @@
:header-content="$t('INBOX_MGMT.ADD.AGENTS.DESC')"
/>
</div>
<div class="w-[60%]">
<div class="w-3/5">
<div class="w-full">
<label :class="{ error: $v.selectedAgents.$error }">
{{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue
+3 -10
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
<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"
>
<page-header
:header-title="$t('INBOX_MGMT.ADD.AUTH.TITLE')"
:header-content="
@@ -82,12 +84,3 @@ export default {
},
};
</script>
<style scoped>
.height-auto {
height: auto;
}
.channel-list {
margin-top: var(--space-medium);
}
</style>
app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+5 -3
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<empty-state
:title="$t('INBOX_MGMT.FINISH.TITLE')"
:message="message"
@@ -58,7 +60,7 @@
</div>
<div class="flex justify-center gap-2 mt-4">
<router-link
class="button hollow primary"
class="button hollow primary rounded"
:to="{
name: 'settings_inbox_show',
params: { inboxId: $route.params.inbox_id },
@@ -67,7 +69,7 @@
{{ $t('INBOX_MGMT.FINISH.MORE_SETTINGS') }}
</router-link>
<router-link
class="button success"
class="button success rounded"
:to="{
name: 'inbox_dashboard',
params: { inboxId: $route.params.inbox_id },
app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+8 -11
View File
@@ -1,5 +1,5 @@
<template>
<div class="settings--content">
<div class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.IMAP.TITLE')"
:sub-title="$t('INBOX_MGMT.IMAP.SUBTITLE')"
@@ -10,16 +10,17 @@
<input
v-model="isIMAPEnabled"
type="checkbox"
class="ltr:mr-2 rtl:ml-2"
name="toggle-imap-enable"
/>
{{ $t('INBOX_MGMT.IMAP.TOGGLE_AVAILABILITY') }}
</label>
<p>{{ $t('INBOX_MGMT.IMAP.TOGGLE_HELP') }}</p>
<div v-if="isIMAPEnabled" class="imap-details-wrap">
<div v-if="isIMAPEnabled" class="mb-6">
<woot-input
v-model.trim="address"
:class="{ error: $v.address.$error }"
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
:placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
@blur="$v.address.$touch"
@@ -28,7 +29,7 @@
v-model="port"
type="number"
:class="{ error: $v.port.$error }"
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
:placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
@blur="$v.port.$touch"
@@ -36,7 +37,7 @@
<woot-input
v-model="login"
:class="{ error: $v.login.$error }"
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.IMAP.LOGIN.LABEL')"
:placeholder="$t('INBOX_MGMT.IMAP.LOGIN.PLACE_HOLDER')"
@blur="$v.login.$touch"
@@ -44,7 +45,7 @@
<woot-input
v-model="password"
:class="{ error: $v.password.$error }"
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
:placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
type="password"
@@ -54,6 +55,7 @@
<input
v-model="isSSLEnabled"
type="checkbox"
class="ltr:mr-2 rtl:ml-2"
name="toggle-enable-ssl"
/>
{{ $t('INBOX_MGMT.IMAP.ENABLE_SSL') }}
@@ -159,8 +161,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.imap-details-wrap {
margin-bottom: var(--space-medium);
}
</style>
app/javascript/dashboard/routes/dashboard/settings/inbox/InboxChannels.vue
+1 -1
View File
@@ -3,7 +3,7 @@
class="flex flex-row overflow-auto p-4 h-full bg-slate-25 dark:bg-slate-800"
>
<woot-wizard
class="hide-for-small-only w-[25%]"
class="hidden md:block w-1/4"
:global-config="globalConfig"
:items="items"
/>
app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue
+4 -5
View File
@@ -1,8 +1,7 @@
<template>
<div class="flex-1 overflow-auto p-4">
<!-- List Canned Response -->
<div class="flex flex-row gap-4">
<div class="w-[60%]">
<div class="flex-1 overflow-auto">
<div class="flex flex-row gap-4 p-8">
<div class="w-full lg:w-3/5">
<p
v-if="!inboxesList.length"
class="flex h-full items-center flex-col justify-center"
@@ -99,7 +98,7 @@
</table>
</div>
<div class="w-[34%]">
<div class="w-1/3 hidden lg:block">
<span
v-dompurify-html="
useInstallationName(
app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/Settings.vue
+1 -1
View File
@@ -4,7 +4,7 @@
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.DESCRIPTION') }}
</div>
<form class="flex flex-col" @submit.prevent="updateInbox">
<label class="w-[25%]">
<label class="w-1/4">
{{ $t('INBOX_MGMT.PRE_CHAT_FORM.ENABLE.LABEL') }}
<select v-model="preChatFormEnabled">
<option :value="true">
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+25 -27
View File
@@ -21,7 +21,7 @@
</woot-tabs>
</setting-intro-banner>
<div v-if="selectedTabKey === 'inbox_settings'" class="settings--content">
<div v-if="selectedTabKey === 'inbox_settings'" class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
@@ -37,7 +37,7 @@
/>
<woot-input
v-model.trim="selectedInboxName"
class="w-[75%] pb-4"
class="w-3/4 pb-4"
:class="{ error: $v.selectedInboxName.$error }"
:label="inboxNameLabel"
:placeholder="inboxNamePlaceHolder"
@@ -51,7 +51,7 @@
<woot-input
v-if="isAPIInbox"
v-model.trim="webhookUrl"
class="w-[75%] pb-4"
class="w-3/4 pb-4"
:class="{ error: $v.webhookUrl.$error }"
:label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
@@ -69,7 +69,7 @@
<woot-input
v-if="isAWebWidgetInbox"
v-model.trim="channelWebsiteUrl"
class="w-[75%] pb-4"
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')
@@ -78,7 +78,7 @@
<woot-input
v-if="isAWebWidgetInbox"
v-model.trim="channelWelcomeTitle"
class="w-[75%] pb-4"
class="w-3/4 pb-4"
:label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TITLE.LABEL')
"
@@ -92,7 +92,7 @@
<woot-input
v-if="isAWebWidgetInbox"
v-model.trim="channelWelcomeTagline"
class="w-[75%] pb-4"
class="w-3/4 pb-4"
:label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WELCOME_TAGLINE.LABEL')
"
@@ -103,17 +103,17 @@
"
/>
<label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
<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-[75%] pb-4">
<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-[75%] pb-4">
<label class="w-3/4 pb-4">
{{
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
}}
@@ -157,7 +157,7 @@
:richtext="!textAreaChannels"
/>
</div>
<label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
<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">
@@ -180,7 +180,7 @@
</p>
</label>
<label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
<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">
@@ -197,7 +197,7 @@
</p>
</label>
<label class="w-[75%] pb-4">
<label class="w-3/4 pb-4">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.ENABLE_CSAT') }}
<select v-model="csatSurveyEnabled">
<option :value="true">
@@ -212,7 +212,7 @@
</p>
</label>
<label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
<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">
@@ -231,7 +231,7 @@
</p>
</label>
<label v-if="isAWebWidgetInbox" class="w-[75%] pb-4">
<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">
@@ -249,7 +249,7 @@
}}
</p>
</label>
<div class="w-[75%] pb-4">
<div class="w-3/4 pb-4">
<label>
{{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
</label>
@@ -265,7 +265,7 @@
{{ $t('INBOX_MGMT.HELP_CENTER.SUB_TEXT') }}
</p>
</div>
<label v-if="canLocktoSingleConversation" class="w-[75%] pb-4">
<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">
@@ -287,7 +287,7 @@
<label v-if="isAWebWidgetInbox">
{{ $t('INBOX_MGMT.FEATURES.LABEL') }}
</label>
<div v-if="isAWebWidgetInbox" class="pt-2 pb-4">
<div v-if="isAWebWidgetInbox" class="pt-2 pb-4 flex gap-2">
<input
v-model="selectedFeatureFlags"
type="checkbox"
@@ -298,7 +298,7 @@
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
</label>
</div>
<div v-if="isAWebWidgetInbox" class="pb-4">
<div v-if="isAWebWidgetInbox" class="pb-4 flex gap-2">
<input
v-model="selectedFeatureFlags"
type="checkbox"
@@ -309,7 +309,7 @@
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
</label>
</div>
<div v-if="isAWebWidgetInbox" class="pb-4">
<div v-if="isAWebWidgetInbox" class="pb-4 flex gap-2">
<input
v-model="selectedFeatureFlags"
type="checkbox"
@@ -320,7 +320,7 @@
{{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
</label>
</div>
<div v-if="isAWebWidgetInbox" class="pb-4">
<div v-if="isAWebWidgetInbox" class="pb-4 flex gap-2">
<input
v-model="selectedFeatureFlags"
type="checkbox"
@@ -338,7 +338,7 @@
:sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
:show-border="false"
>
<div class="w-[75%] pb-4">
<div class="w-3/4 pb-4">
<sender-name-example-preview
:sender-name-type="senderNameType"
:business-name="businessName"
@@ -400,7 +400,7 @@
<facebook-reauthorize v-if="isAFacebookInbox" :inbox-id="inbox.id" />
</div>
<div v-if="selectedTabKey === 'collaborators'" class="settings--content">
<div v-if="selectedTabKey === 'collaborators'" class="mx-8">
<collaborators-page :inbox="inbox" />
</div>
<div v-if="selectedTabKey === 'configuration'">
@@ -757,11 +757,9 @@ export default {
</script>
<style scoped lang="scss">
.settings {
.settings--tabs {
::v-deep .tabs {
@apply p-0;
}
.settings--tabs {
::v-deep .tabs {
@apply p-0;
}
}
</style>
app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+9 -14
View File
@@ -1,5 +1,5 @@
<template>
<div class="settings--content">
<div class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.SMTP.TITLE')"
:sub-title="$t('INBOX_MGMT.SMTP.SUBTITLE')"
@@ -14,11 +14,11 @@
{{ $t('INBOX_MGMT.SMTP.TOGGLE_AVAILABILITY') }}
</label>
<p>{{ $t('INBOX_MGMT.SMTP.TOGGLE_HELP') }}</p>
<div v-if="isSMTPEnabled" class="smtp-details-wrap">
<div v-if="isSMTPEnabled" class="mb-6">
<woot-input
v-model.trim="address"
:class="{ error: $v.address.$error }"
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
:placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
@blur="$v.address.$touch"
@@ -27,7 +27,7 @@
v-model="port"
type="number"
:class="{ error: $v.port.$error }"
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
:placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
@blur="$v.port.$touch"
@@ -35,7 +35,7 @@
<woot-input
v-model="login"
:class="{ error: $v.login.$error }"
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.SMTP.LOGIN.LABEL')"
:placeholder="$t('INBOX_MGMT.SMTP.LOGIN.PLACE_HOLDER')"
@blur="$v.login.$touch"
@@ -43,7 +43,7 @@
<woot-input
v-model="password"
:class="{ error: $v.password.$error }"
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
:placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
type="password"
@@ -52,7 +52,7 @@
<woot-input
v-model.trim="domain"
:class="{ error: $v.domain.$error }"
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
:placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
@blur="$v.domain.$touch"
@@ -63,14 +63,14 @@
:action="handleEncryptionChange"
/>
<single-select-dropdown
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.SMTP.OPEN_SSL_VERIFY_MODE')"
:selected="openSSLVerifyMode"
:options="openSSLVerifyModes"
:action="handleSSLModeChange"
/>
<single-select-dropdown
class="medium-9 columns"
class="max-w-[75%] w-full"
:label="$t('INBOX_MGMT.SMTP.AUTH_MECHANISM')"
:selected="authMechanism"
:options="authMechanisms"
@@ -237,8 +237,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.smtp-details-wrap {
margin-bottom: var(--space-medium);
}
</style>
app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+9 -8
View File
@@ -1,5 +1,5 @@
<template>
<div class="settings--content">
<div class="mx-8">
<div class="widget-builder-container">
<div class="settings-container w-100 lg:w-[40%]">
<div class="settings-content">
@@ -123,7 +123,7 @@
</form>
</div>
</div>
<div class="widget-container w-100 lg:w-[60%]">
<div class="widget-container w-100 lg:w-3/5">
<input-radio-group
name="widget-view-options"
:items="getWidgetViewOptions"
@@ -422,9 +422,9 @@ export default {
display: flex;
flex-direction: row;
padding: var(--space-one);
@include breakpoint(900px down) {
flex-direction: column;
}
// @include breakpoint(900px down) {
// flex-direction: column;
// }
}
.settings-container {
@@ -450,10 +450,11 @@ export default {
padding: var(--space-one) var(--space-one) var(--space-one) var(--space-one);
@apply bg-slate-50 dark:bg-slate-700;
@include breakpoint(500px down) {
background: none;
}
// @include breakpoint(500px down) {
// background: none;
// }
}
.widget-script {
@apply mx-5 p-2.5 bg-slate-50 dark:bg-slate-700;
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
+3 -1
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<page-header
:header-title="$t('INBOX_MGMT.ADD.API_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.API_CHANNEL.DESC')"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+2 -8
View File
@@ -1,13 +1,13 @@
<template>
<div
v-if="!provider"
class="wizard-body small-12 medium-9 columns height-auto"
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"
>
<page-header
:header-title="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.EMAIL_PROVIDER.DESCRIPTION')"
/>
<div class="row channel-list">
<div class="flex flex-row flex-wrap mx-0 mt-6">
<channel-selector
v-for="emailProvider in emailProviderList"
:key="emailProvider.key"
@@ -63,9 +63,3 @@ export default {
},
};
</script>
<style scoped>
.channel-list {
margin-top: var(--space-medium);
}
</style>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+17 -2
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<div v-if="!hasLoginStarted" class="login-init h-full">
<a href="#" @click="startLogin()">
<img
@@ -41,7 +43,7 @@
"
/>
</div>
<div class="w-[60%]">
<div class="w-3/5">
<div class="w-full">
<div class="input-wrap" :class="{ error: $v.selectedPage.$error }">
{{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
@@ -283,3 +285,16 @@ export default {
},
};
</script>
<style scoped lang="scss">
.login-init {
@apply pt-[30%] text-center;
p {
@apply p-6;
}
> a > img {
@apply w-60;
}
}
</style>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+3 -1
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<page-header
:header-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.LINE_CHANNEL.DESC')"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue
+3 -1
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<page-header
:header-title="$t('INBOX_MGMT.ADD.SMS.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.SMS.DESC')"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
+3 -1
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<page-header
:header-title="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.DESC')"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+2 -2
View File
@@ -54,7 +54,7 @@
</label>
</div>
<div class="medium-8 columns messagingServiceHelptext">
<div class="max-w-[65%] w-full messagingServiceHelptext">
<label for="useMessagingService">
<input
id="useMessagingService"
@@ -84,7 +84,7 @@
}}</span>
</label>
</div>
<div class="medium-8 columns messagingServiceHelptext">
<div class="max-w-[65%] w-full messagingServiceHelptext">
<label for="useAPIKey">
<input
id="useAPIKey"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue
+14 -1
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<div class="login-init h-full text-center">
<form @submit.prevent="requestAuthorization">
<woot-submit-button
@@ -40,3 +42,14 @@ export default {
},
};
</script>
<style scoped lang="scss">
.login-init {
@apply pt-[30%] text-center;
p {
@apply p-6;
}
> a > img {
@apply w-60;
}
}
</style>
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+3 -1
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%] h-auto">
<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"
>
<page-header
:header-title="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.DESC')"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue
+3 -1
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<page-header
:header-title="$t('INBOX_MGMT.ADD.WHATSAPP.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.WHATSAPP.DESC')"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
+3 -1
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<page-header
:header-title="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.DESC')"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
+3 -1
View File
@@ -1,5 +1,7 @@
<template>
<div class="wizard-body w-[75%] flex-shrink-0 flex-grow-0 max-w-[75%]">
<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"
>
<settings-sub-page-header
:header-title="$t('INBOX_MGMT.ADD.MICROSOFT.TITLE')"
:header-content="$t('INBOX_MGMT.ADD.MICROSOFT.DESCRIPTION')"
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/microsoft/Reauthorize.vue
+2 -2
View File
@@ -1,10 +1,10 @@
<template>
<div class="settings--content">
<div class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.MICROSOFT.TITLE')"
:sub-title="$t('INBOX_MGMT.MICROSOFT.SUBTITLE')"
>
<div class="smtp-details-wrap">
<div class="mb-6">
<form @submit.prevent="requestAuthorization">
<woot-submit-button
icon="brand-twitter"
app/javascript/dashboard/routes/dashboard/settings/inbox/components/BotConfiguration.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template>
<div class="settings--content">
<div class="mx-8">
<loading-state v-if="uiFlags.isFetching || uiFlags.isFetchingAgentBot" />
<form
v-else
@@ -10,7 +10,7 @@
:title="$t('AGENT_BOTS.BOT_CONFIGURATION.TITLE')"
:sub-title="$t('AGENT_BOTS.BOT_CONFIGURATION.DESC')"
>
<div class="w-[60%]">
<div class="w-3/5">
<label>
<select v-model="selectedAgentBotId">
<option value="" disabled selected>
app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue
+1 -1
View File
@@ -248,7 +248,7 @@ export default {
}
.label {
@apply bg-woot-50 dark:bg-woot-600 text-woot-700 dark:text-woot-100 text-xs;
@apply bg-woot-50 dark:bg-woot-600 text-woot-700 dark:text-woot-100 text-xs inline-block px-2 py-1 rounded-sm cursor-default whitespace-nowrap;
}
.date-error {
app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<button
v-for="keyOption in senderNameKeyOptions"
:key="keyOption.key"
class="text-slate-800 dark:text-slate-100 cursor-pointer"
class="text-slate-800 dark:text-slate-100 cursor-pointer p-0"
@click="toggleSenderNameType(keyOption.key)"
>
<preview-card
app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+5 -2
View File
@@ -1,5 +1,5 @@
<template>
<div class="my-2 mx-8">
<div class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.BUSINESS_HOURS.TITLE')"
:sub-title="$t('INBOX_MGMT.BUSINESS_HOURS.SUBTITLE')"
@@ -9,11 +9,14 @@
<input
v-model="isBusinessHoursEnabled"
type="checkbox"
class="ltr:mr-2 rtl:ml-2"
name="toggle-business-hours"
/>
{{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
</label>
<p>{{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}</p>
<p class="text-slate-700 dark:text-slate-300 mb-4">
{{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
</p>
<div v-if="isBusinessHoursEnabled" class="mb-6">
<div class="max-w-[37.5rem]">
<label class="unavailable-input-wrap">
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+2 -2
View File
@@ -31,8 +31,8 @@
:title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.AGENT_ASSIGNMENT_SUB_TEXT')"
>
<label class="w-[75%] settings-item">
<div class="enter-to-send--checkbox">
<label class="w-3/4 settings-item">
<div class="flex items-center gap-2">
<input
id="enableAutoAssignment"
v-model="enableAutoAssignment"
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+14 -26
View File
@@ -1,5 +1,5 @@
<template>
<div v-if="isATwilioChannel" class="settings--content">
<div v-if="isATwilioChannel" class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.TITLE')"
:sub-title="$t('INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE')"
@@ -7,7 +7,7 @@
<woot-code :script="inbox.callback_webhook_url" lang="html" />
</settings-section>
</div>
<div v-else-if="isALineChannel" class="settings--content">
<div v-else-if="isALineChannel" class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.TITLE')"
:sub-title="$t('INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE')"
@@ -16,7 +16,7 @@
</settings-section>
</div>
<div v-else-if="isAWebWidgetInbox">
<div class="settings--content">
<div class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD')"
@@ -48,7 +48,7 @@
:title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
>
<div class="enter-to-send--checkbox">
<div class="flex items-center gap-2">
<input
id="hmacMandatory"
v-model="hmacMandatory"
@@ -62,7 +62,7 @@
</settings-section>
</div>
</div>
<div v-else-if="isAPIInbox" class="settings--content">
<div v-else-if="isAPIInbox" class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_IDENTIFIER_SUB_TEXT')"
@@ -80,7 +80,7 @@
:title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_VERIFICATION')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.HMAC_MANDATORY_DESCRIPTION')"
>
<div class="enter-to-send--checkbox">
<div class="flex items-center gap-2">
<input
id="hmacMandatory"
v-model="hmacMandatory"
@@ -94,7 +94,7 @@
</settings-section>
</div>
<div v-else-if="isAnEmailChannel">
<div class="settings--content">
<div class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')"
@@ -110,7 +110,7 @@
/>
</div>
<div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
<div v-if="inbox.provider_config" class="settings--content">
<div v-if="inbox.provider_config" class="mx-8">
<settings-section
:title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_TITLE')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_WEBHOOK_SUBHEADER')"
@@ -129,11 +129,13 @@
$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
"
>
<div class="whatsapp-settings--content">
<div
class="whatsapp-settings--content items-center flex flex-1 justify-between mt-2"
>
<woot-input
v-model.trim="whatsAppInboxAPIKey"
type="text"
class="input"
class="flex-1 mr-2"
:placeholder="
$t(
'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_PLACEHOLDER'
@@ -238,22 +240,8 @@ export default {
</script>
<style lang="scss" scoped>
.whatsapp-settings--content {
align-items: center;
display: flex;
flex: 1;
justify-content: space-between;
margin-top: var(--space-small);
.input {
flex: 1;
margin-right: var(--space-small);
::v-deep input {
margin-bottom: 0;
}
::v-deep input {
margin-bottom: 0;
}
}
.hmac-link-to-docs {
margin-top: var(--space-small);
}
</style>
app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue
+7 -3
View File
@@ -7,10 +7,10 @@
/>
</div>
<div class="flex flex-col justify-center m-0 mx-4 flex-1">
<h3 class="text-xl text-slate-800 dark:text-slate-100">
<h3 class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100">
{{ integrationName }}
</h3>
<p>
<p class="text-slate-700 dark:text-slate-200">
{{
useInstallationName(
integrationDescription,
@@ -20,7 +20,11 @@
</p>
</div>
<div class="flex justify-center items-center mb-0 w-[15%]">
<woot-label :title="labelText" :color-scheme="labelColor" />
<woot-label
:title="labelText"
:color-scheme="labelColor"
class="text-xs rounded-sm"
/>
</div>
<div class="flex justify-center items-center mb-0 w-[15%]">
<router-link
app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex flex-row gap-4">
<div class="w-[60%]">
<div class="w-full lg:w-3/5">
<table v-if="hasConnectedHooks" class="woot-table">
<thead>
<th v-for="hookHeader in hookHeaders" :key="hookHeader">
@@ -22,7 +22,7 @@
<td v-if="isHookTypeInbox" class="break-words">
{{ inboxName(hook) }}
</td>
<td class="button-wrapper">
<td class="flex justify-end gap-1">
<woot-button
v-tooltip.top="$t('INTEGRATION_APPS.LIST.DELETE.BUTTON_TEXT')"
variant="smooth"
@@ -36,7 +36,7 @@
</tr>
</tbody>
</table>
<p v-else class="flex h-full items-center flex-col justify-center">
<p v-else class="flex flex-col items-center justify-center h-full">
{{
$t('INTEGRATION_APPS.NO_HOOK_CONFIGURED', {
integrationId: integration.id,
@@ -44,7 +44,7 @@
}}
</p>
</div>
<div class="w-[34%]">
<div class="hidden w-1/3 lg:block">
<p>
<b>{{ integration.name }}</b>
</p>
app/javascript/dashboard/routes/dashboard/settings/integrationapps/SingleIntegrationHooks.vue
+4 -2
View File
@@ -12,10 +12,12 @@
/>
</div>
<div class="flex flex-col justify-center m-0 mx-4 flex-1">
<h3 class="text-xl text-slate-800 dark:text-slate-100">
<h3
class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100"
>
{{ integration.name }}
</h3>
<p>
<p class="text-slate-700 dark:text-slate-200">
{{ integration.description }}
</p>
</div>
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
+3 -4
View File
@@ -1,9 +1,8 @@
<template>
<woot-modal :show="show" :on-close="closeModal">
<div class="h-auto overflow-auto flex flex-col">
<div class="flex flex-col h-auto overflow-auto">
<woot-modal-header :header-title="header" />
<form class="mx-0 flex flex-wrap" @submit.prevent="submit">
<form class="w-full" @submit.prevent="submit">
<woot-input
v-model.trim="app.title"
:class="{ error: $v.app.title.$error }"
@@ -36,7 +35,7 @@
data-testid="app-url"
@input="$v.app.content.url.$touch"
/>
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
<woot-button
:is-loading="isLoading"
:is-disabled="$v.$invalid"
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppsRow.vue
+4 -6
View File
@@ -1,14 +1,12 @@
<template>
<tr>
<td>
<td class="w-40 max-w-[10rem] truncate" :title="app.title">
{{ app.title }}
</td>
<td class="dashboard-app-label-url">
<span class="overflow-hidden whitespace-nowrap text-ellipsis">
{{ app.content[0].url }}
</span>
<td class="max-w-xs truncate" :title="app.content[0].url">
{{ app.content[0].url }}
</td>
<td class="button-wrapper">
<td class="flex justify-end gap-1">
<woot-button
v-tooltip.top="
$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.LIST.EDIT_TOOLTIP')
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/Index.vue
+2 -2
View File
@@ -9,7 +9,7 @@
{{ $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.HEADER_BTN_TXT') }}
</woot-button>
<div class="flex flex-row gap-4">
<div class="w-[60%]">
<div class="w-full lg:w-3/5">
<p
v-if="!uiFlags.isFetching && !records.length"
class="flex h-full items-center flex-col justify-center"
@@ -44,7 +44,7 @@
</table>
</div>
<div class="w-[34%]">
<div class="w-1/3 hidden lg:block">
<span
v-dompurify-html="
useInstallationName(
app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue
+3 -3
View File
@@ -8,10 +8,10 @@
class="p-2 h-16 w-16 mr-4"
/>
<div>
<h3 class="text-xl text-slate-800 dark:text-slate-100">
<h3 class="text-xl font-medium mb-1 text-slate-800 dark:text-slate-100">
{{ integrationName }}
</h3>
<p>
<p class="text-slate-700 dark:text-slate-200">
{{
useInstallationName(
integrationDescription,
@@ -49,7 +49,7 @@
</div>
</router-link>
<div v-if="!integrationEnabled">
<a :href="integrationAction" class="button success nice">
<a :href="integrationAction" class="button success nice rounded">
{{ $t('INTEGRATION_SETTINGS.CONNECT.BUTTON_TEXT') }}
</a>
</div>
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/Index.vue
+5 -4
View File
@@ -1,5 +1,5 @@
<template>
<div class="flex-1 overflow-auto p-4">
<div class="flex-1 p-4 overflow-auto">
<woot-button
color-scheme="success"
class-names="button--fixed-top"
@@ -10,10 +10,10 @@
</woot-button>
<div class="flex flex-row gap-4">
<div class="w-[60%]">
<div class="w-full lg:w-3/5">
<p
v-if="!uiFlags.fetchingList && !records.length"
class="flex h-full items-center flex-col justify-center"
class="flex flex-col items-center justify-center h-full"
>
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404') }}
</p>
@@ -32,6 +32,7 @@
'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
)"
:key="thHeader"
class="last:text-right"
>
{{ thHeader }}
</th>
@@ -49,7 +50,7 @@
</table>
</div>
<div class="w-[34%]">
<div class="hidden w-1/3 lg:block">
<span
v-dompurify-html="
useInstallationName(
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
+18 -12
View File
@@ -17,18 +17,24 @@
<label :class="{ error: $v.url.$error }" class="mb-2">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.LABEL') }}
</label>
<div v-for="event in supportedWebhookEvents" :key="event">
<input
:id="event"
v-model="subscriptions"
type="checkbox"
:value="event"
name="subscriptions"
class="checkbox"
/>
<span class="text-sm">
{{ `${getEventLabel(event)} (${event})` }}
</span>
<div class="flex flex-col gap-2.5 mb-4">
<div
v-for="event in supportedWebhookEvents"
:key="event"
class="flex items-center"
>
<input
:id="event"
v-model="subscriptions"
type="checkbox"
:value="event"
name="subscriptions"
class="checkbox"
/>
<label :for="event" class="text-sm">
{{ `${getEventLabel(event)} (${event})` }}
</label>
</div>
</div>
</div>
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookRow.vue
+5 -5
View File
@@ -1,17 +1,17 @@
<template>
<tr>
<td>
<div class="text-slate-700 dark:text-slate-100 font-medium break-words">
<tr class="space-x-2">
<td class="max-w-2xl">
<div class="font-medium break-words text-slate-700 dark:text-slate-100">
{{ webhook.url }}
</div>
<span class="text-slate-500 dark:text-slate-400 text-xs">
<span class="text-xs text-slate-500 dark:text-slate-400">
<span class="font-medium">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.SUBSCRIBED_EVENTS') }}:
</span>
<show-more :text="subscribedEvents" :limit="60" />
</span>
</td>
<td class="max-w-[6.25rem] min-w-[auto] flex gap-3">
<td class="min-w-[7rem] flex gap-1 justify-end flex-shrink-0">
<woot-button
v-tooltip.top="$t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT')"
variant="smooth"
app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+1 -1
View File
@@ -32,7 +32,7 @@
<woot-color-picker v-model="color" />
</label>
</div>
<div class="w-full">
<div class="w-full flex items-center gap-2">
<input v-model="showOnSidebar" type="checkbox" :value="true" />
<label for="conversation_creation">
{{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
+1 -1
View File
@@ -26,7 +26,7 @@
<woot-color-picker v-model="color" />
</label>
</div>
<div class="w-full">
<div class="w-full flex items-center gap-2">
<input v-model="showOnSidebar" type="checkbox" :value="true" />
<label for="conversation_creation">
{{ $t('LABEL_MGMT.FORM.SHOW_ON_SIDEBAR.LABEL') }}
app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue
+5 -4
View File
@@ -1,5 +1,5 @@
<template>
<div class="flex-1 overflow-auto p-4">
<div class="flex-1 overflow-auto">
<woot-button
color-scheme="success"
class-names="button--fixed-top"
@@ -8,8 +8,8 @@
>
{{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
</woot-button>
<div class="flex flex-row gap-4">
<div class="w-[60%]">
<div class="flex flex-row gap-4 p-8">
<div class="w-full xl:w-3/5">
<p
v-if="!uiFlags.isFetching && !records.length"
class="flex h-full items-center flex-col justify-center"
@@ -73,7 +73,7 @@
</table>
</div>
<div class="w-[34%]">
<div class="w-1/3 hidden xl:block">
<span v-dompurify-html="$t('LABEL_MGMT.SIDEBAR_TXT')" />
</div>
</div>
@@ -197,6 +197,7 @@ export default {
.label-color--display {
@apply rounded h-4 w-4 mr-1 rtl:mr-0 rtl:ml-1 border border-solid border-slate-50 dark:border-slate-700;
}
.label-title {
span {
@apply w-60 inline-block;
app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
+5 -5
View File
@@ -1,16 +1,16 @@
<template>
<div class="flex-1 overflow-auto p-4">
<div class="flex-1 overflow-auto">
<router-link
:to="addAccountScoping('settings/macros/new')"
class="button success button--fixed-top flex gap-1"
class="button success button--fixed-top button success button--fixed-top px-3.5 py-1 rounded-[5px] flex gap-2"
>
<fluent-icon icon="add-circle" />
<span class="button__content">
{{ $t('MACROS.HEADER_BTN_TXT') }}
</span>
</router-link>
<div class="flex flex-row gap-4">
<div class="w-[60%]">
<div class="flex flex-row gap-4 p-8">
<div class="w-full lg:w-3/5">
<div v-if="!uiFlags.isFetching && !records.length" class="p-3">
<p class="flex h-full items-center flex-col justify-center">
{{ $t('MACROS.LIST.404') }}
@@ -39,7 +39,7 @@
</tbody>
</table>
</div>
<div class="w-[34%]">
<div class="hidden lg:block w-1/3">
<span v-dompurify-html="$t('MACROS.SIDEBAR_TXT')" />
</div>
</div>
app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+2 -1
View File
@@ -71,10 +71,11 @@
</p>
</div>
</div>
<div class="mt-auto">
<div class="mt-auto w-full">
<woot-button
size="expanded"
color-scheme="success"
class="w-full"
@click="$emit('submit')"
>
{{ $t('MACROS.HEADER_BTN_TXT_SAVE') }}
app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
+6 -4
View File
@@ -1,13 +1,15 @@
<template>
<form @submit.prevent="changePassword()">
<div class="profile--settings--row text-black-900 dark:text-slate-300 row">
<div class="columns small-3">
<h4 class="block-title text-black-900 dark:text-slate-200">
<div
class="profile--settings--row text-black-900 dark:text-slate-300 flex items-center"
>
<div class="w-1/4">
<h4 class="text-lg text-black-900 dark:text-slate-200">
{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.TITLE') }}
</h4>
<p>{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.NOTE') }}</p>
</div>
<div class="columns small-9 medium-5">
<div class="w-[45%] p-4">
<woot-input
v-model="currentPassword"
type="password"
app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+8 -8
View File
@@ -4,8 +4,8 @@
<div
class="flex flex-row border-b border-slate-50 dark:border-slate-700 items-center flex p-4"
>
<div class="w-[25%] py-4 pr-6 ml-0">
<h4 class="block-title text-black-900 dark:text-slate-200">
<div class="w-1/4 py-4 pr-6 ml-0">
<h4 class="text-lg text-black-900 dark:text-slate-200">
{{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.TITLE') }}
</h4>
<p>{{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.NOTE') }}</p>
@@ -75,19 +75,19 @@
<div
class="border-b border-slate-50 dark:border-slate-700 items-center flex p-4 text-black-900 dark:text-slate-300 row"
>
<div class="w-[25%] py-4 pr-6 ml-0">
<h4 class="block-title text-black-900 dark:text-slate-200">
<div class="w-1/4 py-4 pr-6 ml-0">
<h4 class="text-lg text-black-900 dark:text-slate-200">
{{ $t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.TITLE') }}
</h4>
<p>
{{ $t('PROFILE_SETTINGS.FORM.SEND_MESSAGE.NOTE') }}
</p>
</div>
<div class="p-4 w-[45%] flex flex-row">
<div class="p-4 w-[45%] flex gap-4 flex-row">
<button
v-for="keyOption in keyOptions"
:key="keyOption.key"
class="cursor-pointer mr-4"
class="cursor-pointer p-0"
@click="toggleEditorMessageKey(keyOption.key)"
>
<preview-card
@@ -104,8 +104,8 @@
<div
class="border-b border-slate-50 dark:border-slate-700 items-center flex p-4 text-black-900 dark:text-slate-300 row"
>
<div class="w-[25%] py-4 pr-6 ml-0">
<h4 class="block-title text-black-900 dark:text-slate-200">
<div class="w-1/4 py-4 pr-6 ml-0">
<h4 class="text-lg text-black-900 dark:text-slate-200">
{{ $t('PROFILE_SETTINGS.FORM.ACCESS_TOKEN.TITLE') }}
</h4>
<p>
app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+5 -3
View File
@@ -1,7 +1,9 @@
<template>
<div class="profile--settings--row text-black-900 dark:text-slate-300 row">
<div class="w-[25%] py-4 pr-6 ml-0">
<h4 class="block-title text-black-900 dark:text-slate-200">
<div
class="profile--settings--row text-black-900 dark:text-slate-300 flex items-center"
>
<div class="w-1/4 py-4 pr-6 ml-0">
<h4 class="text-lg text-black-900 dark:text-slate-200">
{{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.TITLE') }}
</h4>
<p>{{ $t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.NOTE') }}</p>
app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
+38 -38
View File
@@ -1,24 +1,26 @@
<template>
<div id="profile-settings-notifications">
<div class="profile--settings--row text-black-900 dark:text-slate-300 row">
<div class="columns small-3">
<h4 class="block-title text-black-900 dark:text-slate-200">
<div
class="profile--settings--row text-black-900 dark:text-slate-300 flex items-center"
>
<div class="w-1/4">
<h4 class="text-lg text-black-900 dark:text-slate-200">
{{ $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE') }}
</h4>
<p>
{{ $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NOTE') }}
</p>
</div>
<div class="columns small-9">
<div class="notification-items--wrapper">
<span class="text-block-title notification-label">
<div class="w-[45%] p-4">
<div class="mb-4">
<span class="text-sm notification-label">
{{
$t(
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALERT_TYPE.TITLE'
)
}}
</span>
<div>
<div class="flex items-center gap-2 mb-1">
<input
id="audio_enable_alert_none"
v-model="enableAudioAlerts"
@@ -35,7 +37,7 @@
}}
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
id="audio_enable_alert_mine"
v-model="enableAudioAlerts"
@@ -52,7 +54,7 @@
}}
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
id="audio_enable_alert_all"
v-model="enableAudioAlerts"
@@ -70,8 +72,8 @@
</label>
</div>
</div>
<div class="notification-items--wrapper">
<span class="text-block-title notification-label">
<div class="mb-4">
<span class="text-sm notification-label">
{{
$t(
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.DEFAULT_TONE.TITLE'
@@ -81,7 +83,7 @@
<div>
<select
v-model="notificationTone"
class="tone-selector"
class="tone-selector mb-0"
@change="handleAudioToneChange"
>
<option
@@ -94,15 +96,15 @@
</select>
</div>
</div>
<div class="notification-items--wrapper">
<span class="text-block-title notification-label">
<div class="mb-1">
<span class="text-sm notification-label">
{{
$t(
'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.TITLE'
)
}}
</span>
<div>
<div class="flex items-center gap-2 mb-1">
<input
id="audio_alert_when_tab_is_inactive"
v-model="playAudioWhenTabIsInactive"
@@ -119,7 +121,7 @@
}}
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
id="audio_alert_until_all_conversations_are_read"
v-model="alertIfUnreadConversationExist"
@@ -139,17 +141,19 @@
</div>
</div>
</div>
<div class="profile--settings--row text-black-900 dark:text-slate-300 row">
<div class="columns small-3">
<h4 class="block-title text-black-900 dark:text-slate-200">
<div
class="profile--settings--row text-black-900 dark:text-slate-300 flex items-center"
>
<div class="w-1/4">
<h4 class="text-lg text-black-900 dark:text-slate-200">
{{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.TITLE') }}
</h4>
<p>
{{ $t('PROFILE_SETTINGS.FORM.EMAIL_NOTIFICATIONS_SECTION.NOTE') }}
</p>
</div>
<div class="columns small-9">
<div>
<div class="w-[45%] p-4">
<div class="flex items-center gap-2 mb-1">
<input
v-model="selectedEmailFlags"
class="notification--checkbox"
@@ -166,7 +170,7 @@
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
v-model="selectedEmailFlags"
class="notification--checkbox"
@@ -183,7 +187,7 @@
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
v-model="selectedEmailFlags"
class="notification--checkbox"
@@ -200,7 +204,7 @@
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
v-model="selectedEmailFlags"
class="notification--checkbox"
@@ -216,7 +220,7 @@
}}
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
v-model="selectedEmailFlags"
class="notification--checkbox"
@@ -236,15 +240,15 @@
</div>
<div
v-if="vapidPublicKey && hasPushAPISupport"
class="profile--settings--row text-black-900 dark:text-slate-300 row push-row"
class="profile--settings--row text-black-900 dark:text-slate-300 flex items-center push-row"
>
<div class="columns small-3">
<h4 class="block-title text-black-900 dark:text-slate-200">
<div class="w-1/4">
<h4 class="text-lg text-black-900 dark:text-slate-200">
{{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.TITLE') }}
</h4>
<p>{{ $t('PROFILE_SETTINGS.FORM.PUSH_NOTIFICATIONS_SECTION.NOTE') }}</p>
</div>
<div class="columns small-9">
<div class="w-[45%] p-4">
<p v-if="hasEnabledPushPermissions">
{{
$t(
@@ -264,7 +268,7 @@
@click="onRequestPermissions"
/>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
v-model="selectedPushFlags"
class="notification--checkbox"
@@ -281,7 +285,7 @@
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
v-model="selectedPushFlags"
class="notification--checkbox"
@@ -298,7 +302,7 @@
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
v-model="selectedPushFlags"
class="notification--checkbox"
@@ -315,7 +319,7 @@
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
v-model="selectedPushFlags"
class="notification--checkbox"
@@ -332,7 +336,7 @@
</label>
</div>
<div>
<div class="flex items-center gap-2 mb-1">
<input
v-model="selectedPushFlags"
class="notification--checkbox"
@@ -525,10 +529,6 @@ export default {
margin-bottom: var(--space-one);
}
.notification-items--wrapper {
margin-bottom: var(--space-smaller);
}
.notification-label {
display: flex;
font-weight: var(--font-weight-bold);
app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+9 -7
View File
@@ -1,7 +1,9 @@
<template>
<div class="flex-1 overflow-auto p-4">
<div class="row">
<div class="column small-12 medium-8 conversation-metric">
<div class="flex flex-col md:flex-row items-center">
<div
class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
>
<metric-card
:header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
:is-loading="uiFlags.isFetchingAccountConversationMetric"
@@ -12,7 +14,7 @@
<div
v-for="(metric, name, index) in conversationMetrics"
:key="index"
class="metric-content column"
class="metric-content flex-1 min-w-0"
>
<h3 class="heading">
{{ name }}
@@ -21,12 +23,12 @@
</div>
</metric-card>
</div>
<div class="column small-12 medium-4">
<div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%]">
<metric-card :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')">
<div
v-for="(metric, name, index) in agentStatusMetrics"
:key="index"
class="metric-content column"
class="metric-content flex-1 min-w-0"
>
<h3 class="heading">
{{ name }}
@@ -36,7 +38,7 @@
</metric-card>
</div>
</div>
<div class="row">
<div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
<metric-card :header="$t('OVERVIEW_REPORTS.CONVERSATION_HEATMAP.HEADER')">
<template #control>
<woot-button
@@ -55,7 +57,7 @@
/>
</metric-card>
</div>
<div class="row">
<div class="max-w-full flex flex-wrap flex-row ml-auto mr-auto">
<metric-card :header="$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')">
<agent-table
:agents="agents"
app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue
+15 -20
View File
@@ -37,15 +37,6 @@ import format from 'date-fns/format';
import { formatTime } from '@chatwoot/utils';
import reportMixin from 'dashboard/mixins/reportMixin';
import ChartStats from './components/ChartElements/ChartStats.vue';
const REPORTS_KEYS = {
CONVERSATIONS: 'conversations_count',
INCOMING_MESSAGES: 'incoming_messages_count',
OUTGOING_MESSAGES: 'outgoing_messages_count',
FIRST_RESPONSE_TIME: 'avg_first_response_time',
RESOLUTION_TIME: 'avg_resolution_time',
RESOLUTION_COUNT: 'resolutions_count',
REPLY_TIME: 'reply_time',
};
export default {
components: { ChartStats },
@@ -55,18 +46,22 @@ export default {
type: Object,
default: () => ({}),
},
reportKeys: {
type: Object,
default: () => ({
CONVERSATIONS: 'conversations_count',
INCOMING_MESSAGES: 'incoming_messages_count',
OUTGOING_MESSAGES: 'outgoing_messages_count',
FIRST_RESPONSE_TIME: 'avg_first_response_time',
RESOLUTION_TIME: 'avg_resolution_time',
RESOLUTION_COUNT: 'resolutions_count',
REPLY_TIME: 'reply_time',
}),
},
},
computed: {
metrics() {
const reportKeys = [
'CONVERSATIONS',
'FIRST_RESPONSE_TIME',
'REPLY_TIME',
'RESOLUTION_TIME',
'RESOLUTION_COUNT',
'INCOMING_MESSAGES',
'OUTGOING_MESSAGES',
];
const reportKeys = Object.keys(this.reportKeys);
const infoText = {
FIRST_RESPONSE_TIME: this.$t(
`REPORT.METRICS.FIRST_RESPONSE_TIME.INFO_TEXT`
@@ -75,11 +70,11 @@ export default {
};
return reportKeys.map(key => ({
NAME: this.$t(`REPORT.METRICS.${key}.NAME`),
KEY: REPORTS_KEYS[key],
KEY: this.reportKeys[key],
DESC: this.$t(`REPORT.METRICS.${key}.DESC`),
INFO_TEXT: infoText[key],
TOOLTIP_TEXT: `REPORT.METRICS.${key}.TOOLTIP_TEXT`,
trend: this.calculateTrend(REPORTS_KEYS[key]),
trend: this.calculateTrend(this.reportKeys[key]),
}));
},
},
app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
-77
View File
@@ -1,77 +0,0 @@
<template>
<div
class="md:w-[16%] sm:w-[50%] sm:max-w-[50%] md:max-w-[16%] csat--metric-card"
:class="{
disabled: disabled,
}"
>
<h3 class="heading">
<span>{{ label }}</span>
<fluent-icon
v-tooltip="infoText"
size="14"
icon="info"
class="csat--icon"
/>
</h3>
<h4 class="metric">
{{ value }}
</h4>
</div>
</template>
<script>
export default {
props: {
label: {
type: String,
required: true,
},
value: {
type: String,
required: true,
},
infoText: {
type: String,
required: true,
},
disabled: {
type: Boolean,
default: false,
},
},
};
</script>
<style lang="scss" scoped>
.csat--metric-card {
margin: 0;
padding: var(--space-normal);
&.disabled {
// grayscale everything
filter: grayscale(100%);
opacity: 0.3;
pointer-events: none;
}
.heading {
align-items: center;
display: flex;
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
margin: 0;
@apply text-slate-800 dark:text-slate-100;
}
.metric {
font-size: var(--font-size-bigger);
font-weight: var(--font-weight-feather);
margin-bottom: 0;
margin-top: var(--space-smaller);
@apply text-slate-700 dark:text-slate-100;
}
}
.csat--icon {
@apply text-slate-500 dark:text-slate-200 my-0 mx-0.5;
}
</style>
app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+9 -5
View File
@@ -1,6 +1,6 @@
<template>
<div
class="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 bg-white dark:bg-slate-800 rounded-[4px] p-4 mb-5 border border-solid border-slate-75 dark:border-slate-700"
>
<csat-metric-card
:label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
@@ -18,16 +18,20 @@
:info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
:value="formatToPercent(responseRate)"
/>
<div
v-if="metrics.totalResponseCount && !ratingFilterEnabled"
class="w-[50%] max-w-[50%] flex-[50%] report-card rtl:[direction:initial]"
ref="csatHorizontalBarChart"
class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial] p-4"
>
<h3 class="heading text-slate-800 dark:text-slate-100">
<h3
class="flex items-center text-xs md:text-sm font-medium m-0 text-slate-800 dark:text-slate-100"
>
<div class="flex justify-end flex-row-reverse">
<div
v-for="(rating, key, index) in ratingPercentage"
:key="rating + key + index"
class="pl-4"
class="ltr:pr-4 rtl:pl-4"
>
<span class="my-0 mx-0.5">{{ ratingToEmoji(key) }}</span>
<span>{{ formatToPercent(rating) }}</span>
@@ -42,7 +46,7 @@
</template>
<script>
import { mapGetters } from 'vuex';
import CsatMetricCard from './CsatMetricCard.vue';
import CsatMetricCard from './ReportMetricCard.vue';
import { CSAT_RATINGS } from 'shared/constants/messages';
export default {
app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
+6 -6
View File
@@ -12,26 +12,26 @@
@input="handleInput"
>
<template slot="singleLabel" slot-scope="props">
<div class="reports-option__wrap">
<div class="flex items-center gap-2">
<div
:style="{ backgroundColor: props.option.color }"
class="reports-option__rounded--item"
class="rounded-full h-5 w-5"
/>
<span class="reports-option__desc">
<span class="reports-option__title">
<span class="my-0 text-slate-800 dark:text-slate-75">
{{ props.option.title }}
</span>
</span>
</div>
</template>
<template slot="option" slot-scope="props">
<div class="reports-option__wrap">
<div class="flex items-center gap-2">
<div
:style="{ backgroundColor: props.option.color }"
class="reports-option__rounded--item reports-option__item reports-option__label--swatch"
class="rounded-full h-5 w-5 flex-shrink-0 border border-solid border-slate-100 dark:border-slate-800"
/>
<span class="reports-option__desc">
<span class="reports-option__title">
<span class="my-0 text-slate-800 dark:text-slate-75">
{{ props.option.title }}
</span>
</span>

Some files were not shown because too many files have changed in this diff Show More