Merge branch 'develop' into fix/show-error-on-clipboard-errors
This commit is contained in:
Muhsin Keloth
@@ -1,27 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="globalConfig.brandName && !disableBranding"
|
||||
class="px-0 py-3 flex justify-center"
|
||||
>
|
||||
<a
|
||||
:href="brandRedirectURL"
|
||||
rel="noreferrer noopener nofollow"
|
||||
target="_blank"
|
||||
class="branding--link justify-center items-center leading-3"
|
||||
>
|
||||
<img
|
||||
class="branding--image"
|
||||
:alt="globalConfig.brandName"
|
||||
:src="globalConfig.logoThumbnail"
|
||||
/>
|
||||
<span>
|
||||
{{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div v-else class="p-3" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||
|
||||
@@ -68,6 +44,30 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="globalConfig.brandName && !disableBranding"
|
||||
class="px-0 py-3 flex justify-center"
|
||||
>
|
||||
<a
|
||||
:href="brandRedirectURL"
|
||||
rel="noreferrer noopener nofollow"
|
||||
target="_blank"
|
||||
class="branding--link justify-center items-center leading-3"
|
||||
>
|
||||
<img
|
||||
class="branding--image"
|
||||
:alt="globalConfig.brandName"
|
||||
:src="globalConfig.logoThumbnail"
|
||||
/>
|
||||
<span>
|
||||
{{ useInstallationName($t('POWERED_BY'), globalConfig.brandName) }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div v-else class="p-3" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
<template>
|
||||
<button
|
||||
:class="buttonClassName"
|
||||
:style="buttonStyles"
|
||||
:disabled="disabled"
|
||||
@click="onClick"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
@@ -65,3 +55,14 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
:class="buttonClassName"
|
||||
:style="buttonStyles"
|
||||
:disabled="disabled"
|
||||
@click="onClick"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@@ -1,29 +1,3 @@
|
||||
<template>
|
||||
<a
|
||||
v-if="isLink"
|
||||
:key="action.uri"
|
||||
class="action-button button"
|
||||
:href="action.uri"
|
||||
:style="{
|
||||
background: widgetColor,
|
||||
borderColor: widgetColor,
|
||||
color: textColor,
|
||||
}"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>
|
||||
{{ action.text }}
|
||||
</a>
|
||||
<button
|
||||
v-else
|
||||
:key="action.payload"
|
||||
class="action-button button"
|
||||
:style="{ borderColor: widgetColor, color: widgetColor }"
|
||||
@click="onClick"
|
||||
>
|
||||
{{ action.text }}
|
||||
</button>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getContrastingTextColor } from '@chatwoot/utils';
|
||||
@@ -54,6 +28,33 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a
|
||||
v-if="isLink"
|
||||
:key="action.uri"
|
||||
class="action-button button"
|
||||
:href="action.uri"
|
||||
:style="{
|
||||
background: widgetColor,
|
||||
borderColor: widgetColor,
|
||||
color: textColor,
|
||||
}"
|
||||
target="_blank"
|
||||
rel="noopener nofollow noreferrer"
|
||||
>
|
||||
{{ action.text }}
|
||||
</a>
|
||||
<button
|
||||
v-else
|
||||
:key="action.payload"
|
||||
class="action-button button"
|
||||
:style="{ borderColor: widgetColor, color: widgetColor }"
|
||||
@click="onClick"
|
||||
>
|
||||
{{ action.text }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
@import '~dashboard/assets/scss/mixins.scss';
|
||||
|
||||
@@ -1,25 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="card-message chat-bubble agent"
|
||||
:class="$dm('bg-white', 'dark:bg-slate-700')"
|
||||
>
|
||||
<img class="media" :src="mediaUrl" />
|
||||
<div class="card-body">
|
||||
<h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
|
||||
{{ title }}
|
||||
</h4>
|
||||
<p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
|
||||
{{ description }}
|
||||
</p>
|
||||
<card-button
|
||||
v-for="action in actions"
|
||||
:key="action.id"
|
||||
:action="action"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CardButton from 'shared/components/CardButton.vue';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin.js';
|
||||
@@ -46,12 +24,29 @@ export default {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
showAvatar: Boolean,
|
||||
},
|
||||
computed: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="card-message chat-bubble agent"
|
||||
:class="$dm('bg-white', 'dark:bg-slate-700')"
|
||||
>
|
||||
<img class="media" :src="mediaUrl" />
|
||||
<div class="card-body">
|
||||
<h4 class="title" :class="$dm('text-black-900', 'dark:text-slate-50')">
|
||||
{{ title }}
|
||||
</h4>
|
||||
<p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
|
||||
{{ description }}
|
||||
</p>
|
||||
<CardButton v-for="action in actions" :key="action.id" :action="action" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
@import '~dashboard/assets/scss/mixins.scss';
|
||||
|
||||
@@ -1,3 +1,82 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getContrastingTextColor } from '@chatwoot/utils';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin';
|
||||
|
||||
export default {
|
||||
mixins: [darkModeMixin],
|
||||
props: {
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
submittedValues: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formValues: {},
|
||||
hasSubmitted: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
widgetColor: 'appConfig/getWidgetColor',
|
||||
}),
|
||||
textColor() {
|
||||
return getContrastingTextColor(this.widgetColor);
|
||||
},
|
||||
inputColor() {
|
||||
return `${this.$dm('bg-white', 'dark:bg-slate-600')}
|
||||
${this.$dm('text-black-900', 'dark:text-slate-50')}`;
|
||||
},
|
||||
isFormValid() {
|
||||
return this.items.reduce((acc, { name }) => {
|
||||
return !!this.formValues[name] && acc;
|
||||
}, true);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.submittedValues.length) {
|
||||
this.updateFormValues();
|
||||
} else {
|
||||
this.setFormDefaults();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmitClick() {
|
||||
this.hasSubmitted = true;
|
||||
},
|
||||
onSubmit() {
|
||||
if (!this.isFormValid) {
|
||||
return;
|
||||
}
|
||||
this.$emit('submit', this.formValues);
|
||||
},
|
||||
buildFormObject(formObjectArray) {
|
||||
return formObjectArray.reduce((acc, obj) => {
|
||||
return {
|
||||
...acc,
|
||||
[obj.name]: obj.value || obj.default,
|
||||
};
|
||||
}, {});
|
||||
},
|
||||
updateFormValues() {
|
||||
this.formValues = this.buildFormObject(this.submittedValues);
|
||||
},
|
||||
setFormDefaults() {
|
||||
this.formValues = this.buildFormObject(this.items);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="form chat-bubble agent"
|
||||
@@ -84,85 +163,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { getContrastingTextColor } from '@chatwoot/utils';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin';
|
||||
|
||||
export default {
|
||||
mixins: [darkModeMixin],
|
||||
props: {
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
submittedValues: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formValues: {},
|
||||
hasSubmitted: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
widgetColor: 'appConfig/getWidgetColor',
|
||||
}),
|
||||
textColor() {
|
||||
return getContrastingTextColor(this.widgetColor);
|
||||
},
|
||||
inputColor() {
|
||||
return `${this.$dm('bg-white', 'dark:bg-slate-600')}
|
||||
${this.$dm('text-black-900', 'dark:text-slate-50')}`;
|
||||
},
|
||||
isFormValid() {
|
||||
return this.items.reduce((acc, { name }) => {
|
||||
return !!this.formValues[name] && acc;
|
||||
}, true);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (this.submittedValues.length) {
|
||||
this.updateFormValues();
|
||||
} else {
|
||||
this.setFormDefaults();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmitClick() {
|
||||
this.hasSubmitted = true;
|
||||
},
|
||||
onSubmit() {
|
||||
if (!this.isFormValid) {
|
||||
return;
|
||||
}
|
||||
this.$emit('submit', this.formValues);
|
||||
},
|
||||
buildFormObject(formObjectArray) {
|
||||
return formObjectArray.reduce((acc, obj) => {
|
||||
return {
|
||||
...acc,
|
||||
[obj.name]: obj.value || obj.default,
|
||||
};
|
||||
}, {});
|
||||
},
|
||||
updateFormValues() {
|
||||
this.formValues = this.buildFormObject(this.submittedValues);
|
||||
},
|
||||
setFormDefaults() {
|
||||
this.formValues = this.buildFormObject(this.items);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,15 +1,3 @@
|
||||
<template>
|
||||
<li
|
||||
class="option"
|
||||
:class="{ 'is-selected': isSelected }"
|
||||
:style="{ borderColor: widgetColor }"
|
||||
>
|
||||
<button class="option-button button" @click="onClick">
|
||||
<span :style="{ color: widgetColor }">{{ action.title }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
@@ -38,6 +26,18 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
class="option"
|
||||
:class="{ 'is-selected': isSelected }"
|
||||
:style="{ borderColor: widgetColor }"
|
||||
>
|
||||
<button class="option-button button" @click="onClick">
|
||||
<span :style="{ color: widgetColor }">{{ action.title }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,38 +1,11 @@
|
||||
<template>
|
||||
<div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
|
||||
<div class="card-body">
|
||||
<h4 class="title text-black-900 dark:text-slate-50">
|
||||
<div
|
||||
v-dompurify-html="formatMessage(title, false)"
|
||||
class="message-content text-black-900 dark:text-slate-50"
|
||||
/>
|
||||
</h4>
|
||||
<ul
|
||||
v-if="!hideFields"
|
||||
class="options"
|
||||
:class="{ 'has-selected': !!selected }"
|
||||
>
|
||||
<chat-option
|
||||
v-for="option in options"
|
||||
:key="option.id"
|
||||
:action="option"
|
||||
:is-selected="isSelected(option)"
|
||||
@click="onClick"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChatOption from 'shared/components/ChatOption.vue';
|
||||
import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
|
||||
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChatOption,
|
||||
},
|
||||
mixins: [messageFormatterMixin],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
@@ -51,6 +24,12 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const { formatMessage } = useMessageFormatter();
|
||||
return {
|
||||
formatMessage,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
isSelected(option) {
|
||||
return this.selected === option.id;
|
||||
@@ -62,6 +41,32 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="options-message chat-bubble agent bg-white dark:bg-slate-700">
|
||||
<div class="card-body">
|
||||
<h4 class="title text-black-900 dark:text-slate-50">
|
||||
<div
|
||||
v-dompurify-html="formatMessage(title, false)"
|
||||
class="message-content text-black-900 dark:text-slate-50"
|
||||
/>
|
||||
</h4>
|
||||
<ul
|
||||
v-if="!hideFields"
|
||||
class="options"
|
||||
:class="{ 'has-selected': !!selected }"
|
||||
>
|
||||
<ChatOption
|
||||
v-for="option in options"
|
||||
:key="option.id"
|
||||
:action="option"
|
||||
:is-selected="isSelected(option)"
|
||||
@click="onClick"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~dashboard/assets/scss/variables.scss';
|
||||
.has-selected {
|
||||
@@ -71,6 +76,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
@@ -1,50 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="customer-satisfaction"
|
||||
:class="$dm('bg-white', 'dark:bg-slate-700')"
|
||||
:style="{ borderColor: widgetColor }"
|
||||
>
|
||||
<h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
|
||||
{{ title }}
|
||||
</h6>
|
||||
<div class="ratings">
|
||||
<button
|
||||
v-for="rating in ratings"
|
||||
:key="rating.key"
|
||||
:class="buttonClass(rating)"
|
||||
@click="selectRating(rating)"
|
||||
>
|
||||
{{ rating.emoji }}
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
v-if="!isFeedbackSubmitted"
|
||||
class="feedback-form"
|
||||
@submit.prevent="onSubmit()"
|
||||
>
|
||||
<input
|
||||
v-model="feedback"
|
||||
class="form-input"
|
||||
:class="inputColor"
|
||||
:placeholder="$t('CSAT.PLACEHOLDER')"
|
||||
@keydown.enter="onSubmit"
|
||||
/>
|
||||
<button
|
||||
class="button small"
|
||||
:disabled="isButtonDisabled"
|
||||
:style="{
|
||||
background: widgetColor,
|
||||
borderColor: widgetColor,
|
||||
color: textColor,
|
||||
}"
|
||||
>
|
||||
<spinner v-if="isUpdating && feedback" />
|
||||
<fluent-icon v-else icon="chevron-right" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
@@ -149,6 +102,53 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="customer-satisfaction"
|
||||
:class="$dm('bg-white', 'dark:bg-slate-700')"
|
||||
:style="{ borderColor: widgetColor }"
|
||||
>
|
||||
<h6 class="title" :class="$dm('text-slate-900', 'dark:text-slate-50')">
|
||||
{{ title }}
|
||||
</h6>
|
||||
<div class="ratings">
|
||||
<button
|
||||
v-for="rating in ratings"
|
||||
:key="rating.key"
|
||||
:class="buttonClass(rating)"
|
||||
@click="selectRating(rating)"
|
||||
>
|
||||
{{ rating.emoji }}
|
||||
</button>
|
||||
</div>
|
||||
<form
|
||||
v-if="!isFeedbackSubmitted"
|
||||
class="feedback-form"
|
||||
@submit.prevent="onSubmit()"
|
||||
>
|
||||
<input
|
||||
v-model="feedback"
|
||||
class="form-input"
|
||||
:class="inputColor"
|
||||
:placeholder="$t('CSAT.PLACEHOLDER')"
|
||||
@keydown.enter="onSubmit"
|
||||
/>
|
||||
<button
|
||||
class="button small"
|
||||
:disabled="isButtonDisabled"
|
||||
:style="{
|
||||
background: widgetColor,
|
||||
borderColor: widgetColor,
|
||||
color: textColor,
|
||||
}"
|
||||
>
|
||||
<Spinner v-if="isUpdating && feedback" />
|
||||
<FluentIcon v-else icon="chevron-right" />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
@import '~widget/assets/scss/mixins.scss';
|
||||
|
||||
@@ -1,12 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
class="date--separator"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-200')"
|
||||
>
|
||||
{{ formattedDate }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { formatDate } from 'shared/helpers/DateHelper';
|
||||
import darkModeMixin from 'widget/mixins/darkModeMixin.js';
|
||||
@@ -31,6 +22,15 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="date--separator"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-200')"
|
||||
>
|
||||
{{ formattedDate }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~widget/assets/scss/variables';
|
||||
|
||||
|
||||
@@ -1,14 +1,3 @@
|
||||
<template>
|
||||
<i v-if="showEmoji" :class="className">{{ iconContent }}</i>
|
||||
<fluent-icon
|
||||
v-else-if="showIcon"
|
||||
:size="iconSize"
|
||||
:icon="icon"
|
||||
class="flex-shrink-0"
|
||||
:class="className"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 🚨 This component is deprecated. Please use fluent-icon instead.
|
||||
import { hasEmojiSupport } from 'shared/helpers/emoji';
|
||||
@@ -46,6 +35,17 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<i v-if="showEmoji" :class="className">{{ iconContent }}</i>
|
||||
<fluent-icon
|
||||
v-else-if="showIcon"
|
||||
:size="iconSize"
|
||||
:icon="icon"
|
||||
class="flex-shrink-0"
|
||||
:class="className"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon--emoji {
|
||||
font-style: normal;
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
<template>
|
||||
<base-icon
|
||||
:size="size"
|
||||
:icon="icon"
|
||||
:type="type"
|
||||
:icons="icons"
|
||||
:view-box="viewBox"
|
||||
:icon-lib="iconLib"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import BaseIcon from './Icon.vue';
|
||||
import icons from './dashboard-icons.json';
|
||||
@@ -44,3 +34,14 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseIcon
|
||||
:size="size"
|
||||
:icon="icon"
|
||||
:type="type"
|
||||
:icons="icons"
|
||||
:view-box="viewBox"
|
||||
:icon-lib="iconLib"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -1,37 +1,3 @@
|
||||
<template>
|
||||
<svg
|
||||
v-if="iconLib === 'fluent'"
|
||||
:width="size"
|
||||
:height="size"
|
||||
fill="none"
|
||||
:viewBox="viewBox"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
v-for="source in pathSource"
|
||||
:key="source"
|
||||
:d="source"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
:width="size"
|
||||
:height="size"
|
||||
fill="none"
|
||||
:viewBox="viewBox"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g v-for="(pathData, index) in pathSource" :key="index">
|
||||
<path
|
||||
:key="pathData"
|
||||
:d="pathData"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.66667"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
@@ -73,3 +39,38 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
v-if="iconLib === 'fluent'"
|
||||
:width="size"
|
||||
:height="size"
|
||||
fill="none"
|
||||
:viewBox="viewBox"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
v-for="source in pathSource"
|
||||
:key="source"
|
||||
:d="source"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
:width="size"
|
||||
:height="size"
|
||||
fill="none"
|
||||
:viewBox="viewBox"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g v-for="(pathData, index) in pathSource" :key="index">
|
||||
<path
|
||||
:key="pathData"
|
||||
:d="pathData"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.66667"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
<template>
|
||||
<base-icon
|
||||
:size="size"
|
||||
:icon="icon"
|
||||
:type="type"
|
||||
:icons="icons"
|
||||
:view-box="viewBox"
|
||||
:icon-lib="iconLib"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
import BaseIcon from './Icon.vue';
|
||||
import icons from './icons.json';
|
||||
@@ -44,3 +34,14 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseIcon
|
||||
:size="size"
|
||||
:icon="icon"
|
||||
:type="type"
|
||||
:icons="icons"
|
||||
:view-box="viewBox"
|
||||
:icon-lib="iconLib"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -271,13 +271,24 @@
|
||||
"M11.1667 17.8333C14.8486 17.8333 17.8333 14.8486 17.8333 11.1667C17.8333 7.48477 14.8486 4.5 11.1667 4.5C7.48477 4.5 4.5 7.48477 4.5 11.1667C4.5 14.8486 7.48477 17.8333 11.1667 17.8333Z",
|
||||
"M19.5001 19.5001L15.9167 15.9167"
|
||||
],
|
||||
"chevrons-left-outline": ["m11 17-5-5 5-5", "m18 17-5-5 5-5"],
|
||||
"chevrons-left-outline": [
|
||||
"m11 17-5-5 5-5",
|
||||
"m18 17-5-5 5-5"
|
||||
],
|
||||
"chevron-left-single-outline": "m15 18-6-6 6-6",
|
||||
"chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
|
||||
"chevrons-right-outline": [
|
||||
"m6 17 5-5-5-5",
|
||||
"m13 17 5-5-5-5"
|
||||
],
|
||||
"chevron-right-single-outline": "m9 18 6-6-6-6",
|
||||
"avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z",
|
||||
"text-copy-outline": "M5.503 4.627L5.5 6.75v10.504a3.25 3.25 0 0 0 3.25 3.25h8.616a2.25 2.25 0 0 1-2.122 1.5H8.75A4.75 4.75 0 0 1 4 17.254V6.75c0-.98.627-1.815 1.503-2.123M17.75 2A2.25 2.25 0 0 1 20 4.25v13a2.25 2.25 0 0 1-2.25 2.25h-9a2.25 2.25 0 0 1-2.25-2.25v-13A2.25 2.25 0 0 1 8.75 2zm0 1.5h-9a.75.75 0 0 0-.75.75v13c0 .414.336.75.75.75h9a.75.75 0 0 0 .75-.75v-13a.75.75 0 0 0-.75-.75",
|
||||
"linear-outline": "M1.17156 10.4618C1.14041 10.329 1.2986 10.2454 1.39505 10.3418L6.50679 15.4536C6.60323 15.55 6.5196 15.7082 6.38681 15.6771C3.80721 15.0719 1.77669 13.0414 1.17156 10.4618ZM1.00026 8.4131C0.997795 8.45277 1.01271 8.49149 1.0408 8.51959L8.32904 15.8078C8.35714 15.8359 8.39586 15.8509 8.43553 15.8484C8.76721 15.8277 9.09266 15.784 9.41026 15.7187C9.51729 15.6968 9.55447 15.5653 9.47721 15.488L1.36063 7.37142C1.28337 7.29416 1.15187 7.33134 1.12989 7.43837C1.06466 7.75597 1.02092 8.08142 1.00026 8.4131ZM1.58953 6.00739C1.56622 6.05972 1.57809 6.12087 1.6186 6.16139L10.6872 15.23C10.7278 15.2705 10.7889 15.2824 10.8412 15.2591C11.0913 15.1477 11.3336 15.0221 11.5672 14.8833C11.6445 14.8374 11.6564 14.7312 11.5929 14.6676L2.18099 5.25577C2.11742 5.1922 2.01121 5.20412 1.96529 5.28142C1.8265 5.51499 1.70091 5.75733 1.58953 6.00739ZM2.77222 4.37899C2.7204 4.32718 2.7172 4.24407 2.76602 4.18942C4.04913 2.75294 5.9156 1.84863 7.99327 1.84863C11.863 1.84863 15 4.98565 15 8.85536C15 10.933 14.0957 12.7995 12.6592 14.0826C12.6046 14.1314 12.5215 14.1282 12.4696 14.0764L2.77222 4.37899Z",
|
||||
"status-outline": "m8.462 6.81l3.284 13.616c.178.737 1.211.775 1.443.054l3.257-10.122l.586 2.095a.75.75 0 0 0 .722.548h3.494a.75.75 0 0 0 0-1.5h-2.925l-1.105-3.95c-.2-.717-1.208-.736-1.436-.028l-3.203 9.957L9.224 3.574c-.182-.757-1.255-.769-1.454-.016l-2.1 7.943H2.75a.75.75 0 0 0 0 1.5h3.496a.75.75 0 0 0 .725-.558z",
|
||||
"unlink-outline": "m18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07a5.006 5.006 0 0 0-6.95 0l-1.72 1.71m-6.58 6.57l-1.71 1.71a5.004 5.004 0 0 0 .12 7.07a5.006 5.006 0 0 0 6.95 0l1.71-1.71M8 2v3M2 8h3m11 11v3m3-6h3"
|
||||
"unlink-outline": "m18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07a5.006 5.006 0 0 0-6.95 0l-1.72 1.71m-6.58 6.57l-1.71 1.71a5.004 5.004 0 0 0 .12 7.07a5.006 5.006 0 0 0 6.95 0l1.71-1.71M8 2v3M2 8h3m11 11v3m3-6h3",
|
||||
"captain-outline": [
|
||||
"M6.49573 9.20645C6.49573 8.67008 6.93058 8.23523 7.46695 8.23523C8.00337 8.23523 8.43817 8.67008 8.43817 9.20645V11.4511C8.43817 11.9875 8.00337 12.4223 7.46695 12.4223C6.93058 12.4223 6.49573 11.9875 6.49573 11.4511V9.20645Z",
|
||||
"M9.60364 9.20645C9.60364 8.67008 10.0385 8.23523 10.5749 8.23523C11.1113 8.23523 11.5461 8.67008 11.5461 9.20645V11.4511C11.5461 11.9875 11.1113 12.4223 10.5749 12.4223C10.0385 12.4223 9.60364 11.9875 9.60364 11.4511V9.20645Z",
|
||||
"M17.1442 5.57049C13.5275 5.06019 10.5793 5.04007 6.88135 5.56825C5.9466 5.70176 5.32812 5.79197 4.85654 5.92976C4.41928 6.05757 4.17061 6.20994 3.96492 6.43984C3.539 6.91583 3.48286 7.45419 3.4248 9.33184C3.36775 11.1772 3.48076 12.831 3.69481 14.6918C3.80887 15.6834 3.88736 16.3526 4.01268 16.8613C4.13155 17.3439 4.27532 17.6034 4.47513 17.802C4.67654 18.0023 4.93467 18.1435 5.40841 18.2581C5.90952 18.3793 6.56702 18.4526 7.5442 18.5592C10.7045 18.904 13.0702 18.9022 16.2423 18.561C17.2313 18.4546 17.8995 18.3813 18.4081 18.2609C18.8913 18.1465 19.1511 18.0063 19.3497 17.8118C19.5442 17.6213 19.6928 17.3587 19.8217 16.852C19.9561 16.3234 20.0476 15.624 20.18 14.5966C20.4162 12.7633 20.5863 11.1533 20.5929 9.3896C20.5999 7.50391 20.5613 6.96737 20.1306 6.46971C19.9226 6.22932 19.6696 6.0713 19.2224 5.93968C18.7395 5.79754 18.1042 5.70594 17.1442 5.57049ZM6.65555 3.98715C10.5078 3.43695 13.6072 3.45849 17.3674 3.98902L17.4224 3.99678C18.3127 4.12235 19.0648 4.22844 19.6733 4.40753C20.33 4.60078 20.8792 4.89417 21.3382 5.4245C22.2041 6.42482 22.1984 7.6117 22.1909 9.18858C22.1905 9.25686 22.1902 9.32584 22.19 9.3956C22.183 11.2604 22.0026 12.949 21.764 14.8006L21.7577 14.8496C21.6332 15.8159 21.5307 16.6121 21.3695 17.2458C21.2 17.9121 20.9467 18.4833 20.4672 18.9529C19.9919 19.4183 19.4302 19.6602 18.776 19.8151C18.1582 19.9613 17.3895 20.044 16.4629 20.1436L16.4131 20.149C13.1283 20.5023 10.6472 20.5043 7.37097 20.1469L7.32043 20.1414C6.40679 20.0417 5.64604 19.9587 5.03292 19.8104C4.38112 19.6527 3.82317 19.406 3.34911 18.9347C2.87346 18.4618 2.62363 17.8999 2.46191 17.2433C2.30938 16.6241 2.22071 15.8531 2.11393 14.9246L2.10815 14.8743C1.88863 12.9659 1.76823 11.23 1.82845 9.28246C1.83063 9.2118 1.83272 9.14191 1.83479 9.07281C1.8816 7.50776 1.91671 6.33374 2.7747 5.37486C3.22992 4.86612 3.76798 4.58399 4.40853 4.39678C5.00257 4.22316 5.73505 4.11858 6.60207 3.99479C6.61981 3.99225 6.63764 3.9897 6.65555 3.98715Z"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,32 +1,3 @@
|
||||
<template>
|
||||
<section class="w-3/4">
|
||||
<div
|
||||
v-if="richtext"
|
||||
class="py-0 px-4 rounded-md border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 mt-0 mx-0 mb-4"
|
||||
>
|
||||
<woot-message-editor
|
||||
v-model="greetingsMessage"
|
||||
:is-format-mode="true"
|
||||
:enable-variables="true"
|
||||
class="input bg-white dark:bg-slate-900"
|
||||
:placeholder="placeholder"
|
||||
:min-height="4"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</div>
|
||||
<resizable-text-area
|
||||
v-else
|
||||
v-model="greetingsMessage"
|
||||
:rows="4"
|
||||
type="text"
|
||||
class="greetings--textarea"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
|
||||
import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
|
||||
@@ -71,3 +42,32 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="w-3/4">
|
||||
<div
|
||||
v-if="richtext"
|
||||
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"
|
||||
>
|
||||
<WootMessageEditor
|
||||
v-model="greetingsMessage"
|
||||
is-format-mode
|
||||
enable-variables
|
||||
class="bg-white input dark:bg-slate-900"
|
||||
:placeholder="placeholder"
|
||||
:min-height="4"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</div>
|
||||
<ResizableTextArea
|
||||
v-else
|
||||
v-model="greetingsMessage"
|
||||
:rows="4"
|
||||
type="text"
|
||||
class="greetings--textarea"
|
||||
:label="label"
|
||||
:placeholder="placeholder"
|
||||
@input="handleInput"
|
||||
/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -1,25 +1,3 @@
|
||||
<template>
|
||||
<div class="relative overflow-hidden pb-1/2 h-full">
|
||||
<iframe
|
||||
v-if="url"
|
||||
:src="url"
|
||||
class="absolute w-full h-full top-0 left-0"
|
||||
@load="handleIframeLoad"
|
||||
@error="handleIframeError"
|
||||
/>
|
||||
<article-skeleton-loader
|
||||
v-if="isLoading"
|
||||
class="absolute w-full h-full top-0 left-0"
|
||||
/>
|
||||
<div
|
||||
v-if="showEmptyState"
|
||||
class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
|
||||
>
|
||||
<p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ArticleSkeletonLoader from 'shared/components/ArticleSkeletonLoader.vue';
|
||||
|
||||
@@ -53,3 +31,25 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative overflow-hidden pb-1/2 h-full">
|
||||
<iframe
|
||||
v-if="url"
|
||||
:src="url"
|
||||
class="absolute w-full h-full top-0 left-0"
|
||||
@load="handleIframeLoad"
|
||||
@error="handleIframeError"
|
||||
/>
|
||||
<ArticleSkeletonLoader
|
||||
v-if="isLoading"
|
||||
class="absolute w-full h-full top-0 left-0"
|
||||
/>
|
||||
<div
|
||||
v-if="showEmptyState"
|
||||
class="absolute w-full h-full top-0 left-0 flex justify-center items-center"
|
||||
>
|
||||
<p>{{ $t('PORTAL.IFRAME_ERROR') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,16 +1,3 @@
|
||||
<template>
|
||||
<textarea
|
||||
ref="textarea"
|
||||
:placeholder="placeholder"
|
||||
:rows="rows"
|
||||
:value="value"
|
||||
@input="onInput"
|
||||
@focus="onFocus"
|
||||
@keyup="onKeyup"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
appendSignature,
|
||||
@@ -42,7 +29,7 @@ export default {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
// add this as a prop, so that we won't have to include uiSettingsMixin
|
||||
// add this as a prop, so that we won't have to add useUISettings
|
||||
sendWithSignature: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
@@ -57,10 +44,10 @@ export default {
|
||||
return {
|
||||
typingIndicator: createTypingIndicator(
|
||||
() => {
|
||||
this.$emit('typing-on');
|
||||
this.$emit('typingOn');
|
||||
},
|
||||
() => {
|
||||
this.$emit('typing-off');
|
||||
this.$emit('typingOff');
|
||||
},
|
||||
TYPING_INDICATOR_IDLE_TIME
|
||||
),
|
||||
@@ -162,3 +149,16 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<textarea
|
||||
ref="textarea"
|
||||
:placeholder="placeholder"
|
||||
:rows="rows"
|
||||
:value="value"
|
||||
@input="onInput"
|
||||
@focus="onFocus"
|
||||
@keyup="onKeyup"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
<template>
|
||||
<span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
@@ -32,6 +29,11 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables';
|
||||
|
||||
|
||||
@@ -1,31 +1,3 @@
|
||||
<template>
|
||||
<label class="block">
|
||||
<div
|
||||
v-if="label"
|
||||
class="mb-2 text-xs font-medium"
|
||||
:class="{
|
||||
'text-black-800': !error,
|
||||
'text-red-400': error,
|
||||
}"
|
||||
>
|
||||
{{ label }}
|
||||
</div>
|
||||
<textarea
|
||||
class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
|
||||
:class="{
|
||||
'border-black-200 hover:border-black-300 focus:border-black-300':
|
||||
!error,
|
||||
'border-red-200 hover:border-red-300 focus:border-red-300': error,
|
||||
}"
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
@change="onChange"
|
||||
/>
|
||||
<div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
|
||||
{{ error }}
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
@@ -33,10 +5,6 @@ export default {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
@@ -57,6 +25,36 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label class="block">
|
||||
<div
|
||||
v-if="label"
|
||||
class="mb-2 text-xs font-medium"
|
||||
:class="{
|
||||
'text-black-800': !error,
|
||||
'text-red-400': error,
|
||||
}"
|
||||
>
|
||||
{{ label }}
|
||||
</div>
|
||||
<textarea
|
||||
class="w-full px-3 py-2 leading-tight border rounded outline-none resize-none text-slate-700"
|
||||
:class="{
|
||||
'border-black-200 hover:border-black-300 focus:border-black-300':
|
||||
!error,
|
||||
'border-red-200 hover:border-red-300 focus:border-red-300': error,
|
||||
}"
|
||||
:placeholder="placeholder"
|
||||
:value="value"
|
||||
@change="onChange"
|
||||
/>
|
||||
<div v-if="error" class="mt-2 text-xs font-medium text-red-400">
|
||||
{{ error }}
|
||||
</div>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
textarea {
|
||||
min-height: 8rem;
|
||||
|
||||
@@ -1,102 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
role="dialog"
|
||||
class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex gap-2 emoji-search--wrap">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0"
|
||||
:placeholder="$t('EMOJI.PLACEHOLDER')"
|
||||
/>
|
||||
<woot-button
|
||||
v-if="showRemoveButton"
|
||||
size="small"
|
||||
variant="smooth"
|
||||
class="dark:!bg-slate-800 dark:!hover:bg-slate-700"
|
||||
color-scheme="secondary"
|
||||
@click="onClick('')"
|
||||
>
|
||||
{{ $t('EMOJI.REMOVE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
|
||||
<h5 class="emoji-category--title">
|
||||
{{ selectedKey }}
|
||||
</h5>
|
||||
<div class="emoji--row">
|
||||
<button
|
||||
v-for="item in filterEmojisByCategory"
|
||||
:key="item.slug"
|
||||
v-dompurify-html="item.emoji"
|
||||
class="emoji--item"
|
||||
track-by="$index"
|
||||
@click="onClick(item.emoji)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else ref="emojiItem" class="emoji-item">
|
||||
<div v-for="category in filterAllEmojisBySearch" :key="category.slug">
|
||||
<h5 v-if="category.emojis.length > 0" class="emoji-category--title">
|
||||
{{ category.name }}
|
||||
</h5>
|
||||
<div v-if="category.emojis.length > 0" class="emoji--row">
|
||||
<button
|
||||
v-for="item in category.emojis"
|
||||
:key="item.slug"
|
||||
v-dompurify-html="item.emoji"
|
||||
class="emoji--item"
|
||||
track-by="$index"
|
||||
@click="onClick(item.emoji)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="hasEmptySearchResult" class="empty-message">
|
||||
<div class="emoji-icon">
|
||||
<fluent-icon icon="emoji" size="48" />
|
||||
</div>
|
||||
<span class="empty-message--text">
|
||||
{{ $t('EMOJI.NOT_FOUND') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emoji-dialog--footer" role="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<button
|
||||
class="emoji--item"
|
||||
:class="{ active: selectedKey === 'Search' }"
|
||||
@click="changeCategory('Search')"
|
||||
>
|
||||
<fluent-icon
|
||||
icon="search"
|
||||
size="16"
|
||||
class="text-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
v-for="category in categories"
|
||||
:key="category.slug"
|
||||
@click="changeCategory(category.name)"
|
||||
>
|
||||
<button
|
||||
v-dompurify-html="getFirstEmojiByCategoryName(category.name)"
|
||||
class="emoji--item"
|
||||
:class="{ active: selectedKey === category.name }"
|
||||
@click="changeCategory(category.name)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emojis from './emojisGroup.json';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
@@ -181,6 +82,106 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
role="dialog"
|
||||
class="emoji-dialog bg-white shadow-lg dark:bg-slate-900 rounded-md border border-solid border-slate-75 dark:border-slate-800/50 box-content h-[300px] absolute right-0 -top-[95px] w-80 z-20"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex gap-2 emoji-search--wrap">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm"
|
||||
:placeholder="$t('EMOJI.PLACEHOLDER')"
|
||||
/>
|
||||
<woot-button
|
||||
v-if="showRemoveButton"
|
||||
size="small"
|
||||
variant="smooth"
|
||||
class="dark:!bg-slate-800 dark:!hover:bg-slate-700"
|
||||
color-scheme="secondary"
|
||||
@click="onClick('')"
|
||||
>
|
||||
{{ $t('EMOJI.REMOVE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div v-if="hasNoSearch" ref="emojiItem" class="emoji-item">
|
||||
<h5 class="emoji-category--title">
|
||||
{{ selectedKey }}
|
||||
</h5>
|
||||
<div class="emoji--row">
|
||||
<button
|
||||
v-for="item in filterEmojisByCategory"
|
||||
:key="item.slug"
|
||||
v-dompurify-html="item.emoji"
|
||||
class="emoji--item"
|
||||
track-by="$index"
|
||||
@click="onClick(item.emoji)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else ref="emojiItem" class="emoji-item">
|
||||
<div v-for="category in filterAllEmojisBySearch" :key="category.slug">
|
||||
<h5 v-if="category.emojis.length > 0" class="emoji-category--title">
|
||||
{{ category.name }}
|
||||
</h5>
|
||||
<div v-if="category.emojis.length > 0" class="emoji--row">
|
||||
<button
|
||||
v-for="item in category.emojis"
|
||||
:key="item.slug"
|
||||
v-dompurify-html="item.emoji"
|
||||
class="emoji--item"
|
||||
track-by="$index"
|
||||
@click="onClick(item.emoji)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="hasEmptySearchResult" class="empty-message">
|
||||
<div class="emoji-icon">
|
||||
<FluentIcon icon="emoji" size="48" />
|
||||
</div>
|
||||
<span class="empty-message--text">
|
||||
{{ $t('EMOJI.NOT_FOUND') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="emoji-dialog--footer" role="menu">
|
||||
<ul>
|
||||
<li>
|
||||
<button
|
||||
class="emoji--item"
|
||||
:class="{ active: selectedKey === 'Search' }"
|
||||
@click="changeCategory('Search')"
|
||||
>
|
||||
<FluentIcon
|
||||
icon="search"
|
||||
size="16"
|
||||
class="text-slate-700 dark:text-slate-100"
|
||||
/>
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
v-for="category in categories"
|
||||
:key="category.slug"
|
||||
@click="changeCategory(category.name)"
|
||||
>
|
||||
<button
|
||||
v-dompurify-html="getFirstEmojiByCategoryName(category.name)"
|
||||
class="emoji--item"
|
||||
:class="{ active: selectedKey === category.name }"
|
||||
@click="changeCategory(category.name)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@tailwind components;
|
||||
@layer components {
|
||||
@@ -197,6 +198,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~dashboard/assets/scss/mixins';
|
||||
|
||||
|
||||
@@ -1,76 +1,3 @@
|
||||
<template>
|
||||
<div
|
||||
v-on-clickaway="onCloseDropdown"
|
||||
class="relative w-full mb-2"
|
||||
@keyup.esc="onCloseDropdown"
|
||||
>
|
||||
<woot-button
|
||||
variant="hollow"
|
||||
color-scheme="secondary"
|
||||
class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
|
||||
@click="toggleDropdown"
|
||||
>
|
||||
<div class="flex gap-1">
|
||||
<Thumbnail
|
||||
v-if="hasValue && hasThumbnail"
|
||||
:src="selectedItem.thumbnail"
|
||||
size="24px"
|
||||
:status="selectedItem.availability_status"
|
||||
:username="selectedItem.name"
|
||||
/>
|
||||
<div class="flex justify-between w-full min-w-0 items-center">
|
||||
<h4
|
||||
v-if="!hasValue"
|
||||
class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
|
||||
>
|
||||
{{ multiselectorPlaceholder }}
|
||||
</h4>
|
||||
<h4
|
||||
v-else
|
||||
class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
|
||||
:title="selectedItem.name"
|
||||
>
|
||||
{{ selectedItem.name }}
|
||||
</h4>
|
||||
<i
|
||||
v-if="showSearchDropdown"
|
||||
class="icon ion-chevron-up text-slate-600 mr-1"
|
||||
/>
|
||||
<i v-else class="icon ion-chevron-down text-slate-600 mr-1" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
<div
|
||||
:class="{ 'dropdown-pane--open': showSearchDropdown }"
|
||||
class="dropdown-pane"
|
||||
>
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h4
|
||||
class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ multiselectorTitle }}
|
||||
</h4>
|
||||
<woot-button
|
||||
icon="dismiss"
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
variant="clear"
|
||||
@click="onCloseDropdown"
|
||||
/>
|
||||
</div>
|
||||
<multiselect-dropdown-items
|
||||
v-if="showSearchDropdown"
|
||||
:options="options"
|
||||
:selected-items="[selectedItem]"
|
||||
:has-thumbnail="hasThumbnail"
|
||||
:input-placeholder="inputPlaceholder"
|
||||
:no-search-result="noSearchResult"
|
||||
@click="onClickSelectItem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
import MultiselectDropdownItems from 'shared/components/ui/MultiselectDropdownItems.vue';
|
||||
@@ -139,6 +66,79 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-clickaway="onCloseDropdown"
|
||||
class="relative w-full mb-2"
|
||||
@keyup.esc="onCloseDropdown"
|
||||
>
|
||||
<woot-button
|
||||
variant="hollow"
|
||||
color-scheme="secondary"
|
||||
class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
|
||||
@click="toggleDropdown"
|
||||
>
|
||||
<div class="flex gap-1">
|
||||
<Thumbnail
|
||||
v-if="hasValue && hasThumbnail"
|
||||
:src="selectedItem.thumbnail"
|
||||
size="24px"
|
||||
:status="selectedItem.availability_status"
|
||||
:username="selectedItem.name"
|
||||
/>
|
||||
<div class="flex justify-between w-full min-w-0 items-center">
|
||||
<h4
|
||||
v-if="!hasValue"
|
||||
class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
|
||||
>
|
||||
{{ multiselectorPlaceholder }}
|
||||
</h4>
|
||||
<h4
|
||||
v-else
|
||||
class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
|
||||
:title="selectedItem.name"
|
||||
>
|
||||
{{ selectedItem.name }}
|
||||
</h4>
|
||||
<i
|
||||
v-if="showSearchDropdown"
|
||||
class="icon ion-chevron-up text-slate-600 mr-1"
|
||||
/>
|
||||
<i v-else class="icon ion-chevron-down text-slate-600 mr-1" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
<div
|
||||
:class="{ 'dropdown-pane--open': showSearchDropdown }"
|
||||
class="dropdown-pane"
|
||||
>
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h4
|
||||
class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ multiselectorTitle }}
|
||||
</h4>
|
||||
<woot-button
|
||||
icon="dismiss"
|
||||
size="tiny"
|
||||
color-scheme="secondary"
|
||||
variant="clear"
|
||||
@click="onCloseDropdown"
|
||||
/>
|
||||
</div>
|
||||
<MultiselectDropdownItems
|
||||
v-if="showSearchDropdown"
|
||||
:options="options"
|
||||
:selected-items="[selectedItem]"
|
||||
:has-thumbnail="hasThumbnail"
|
||||
:input-placeholder="inputPlaceholder"
|
||||
:no-search-result="noSearchResult"
|
||||
@click="onClickSelectItem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-pane {
|
||||
@apply box-border top-[2.625rem] w-full;
|
||||
|
||||
@@ -1,66 +1,3 @@
|
||||
<template>
|
||||
<div class="dropdown-wrap">
|
||||
<div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="search-input"
|
||||
autofocus="true"
|
||||
:placeholder="inputPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-start items-start flex-auto overflow-auto">
|
||||
<div class="w-full max-h-[10rem]">
|
||||
<woot-dropdown-menu>
|
||||
<woot-dropdown-item
|
||||
v-for="option in filteredOptions"
|
||||
:key="option.id"
|
||||
>
|
||||
<woot-button
|
||||
class="multiselect-dropdown--item"
|
||||
:variant="isActive(option) ? 'hollow' : 'clear'"
|
||||
color-scheme="secondary"
|
||||
:class="{
|
||||
active: isActive(option),
|
||||
}"
|
||||
@click="() => onclick(option)"
|
||||
>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Thumbnail
|
||||
v-if="hasThumbnail"
|
||||
:src="option.thumbnail"
|
||||
size="24px"
|
||||
:username="option.name"
|
||||
:status="option.availability_status"
|
||||
has-border
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-between w-full min-w-0 gap-2"
|
||||
>
|
||||
<span
|
||||
class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
:title="option.name"
|
||||
>
|
||||
{{ option.name }}
|
||||
</span>
|
||||
<fluent-icon v-if="isActive(option)" icon="checkmark" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
</woot-dropdown-item>
|
||||
</woot-dropdown-menu>
|
||||
<h4
|
||||
v-if="noResult"
|
||||
class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
>
|
||||
{{ noSearchResult }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
|
||||
import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
|
||||
@@ -131,6 +68,66 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dropdown-wrap">
|
||||
<div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="search-input"
|
||||
autofocus="true"
|
||||
:placeholder="inputPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-start items-start flex-auto overflow-auto">
|
||||
<div class="w-full max-h-[10rem]">
|
||||
<WootDropdownMenu>
|
||||
<WootDropdownItem v-for="option in filteredOptions" :key="option.id">
|
||||
<woot-button
|
||||
class="multiselect-dropdown--item"
|
||||
:variant="isActive(option) ? 'hollow' : 'clear'"
|
||||
color-scheme="secondary"
|
||||
:class="{
|
||||
active: isActive(option),
|
||||
}"
|
||||
@click="() => onclick(option)"
|
||||
>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Thumbnail
|
||||
v-if="hasThumbnail"
|
||||
:src="option.thumbnail"
|
||||
size="24px"
|
||||
:username="option.name"
|
||||
:status="option.availability_status"
|
||||
has-border
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-between w-full min-w-0 gap-2"
|
||||
>
|
||||
<span
|
||||
class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
:title="option.name"
|
||||
>
|
||||
{{ option.name }}
|
||||
</span>
|
||||
<fluent-icon v-if="isActive(option)" icon="checkmark" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
</WootDropdownItem>
|
||||
</WootDropdownMenu>
|
||||
<h4
|
||||
v-if="noResult"
|
||||
class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
>
|
||||
{{ noSearchResult }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-wrap {
|
||||
@apply w-full flex flex-col max-h-[12.5rem];
|
||||
|
||||
@@ -1,3 +1,13 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
addLabel() {
|
||||
this.$emit('add');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<woot-button
|
||||
variant="smooth"
|
||||
@@ -10,16 +20,6 @@
|
||||
</woot-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
addLabel() {
|
||||
this.$emit('add');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.label--add {
|
||||
margin-bottom: var(--space-micro);
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
class="list-none my-1 mx-0 border-b border-slate-50 dark:border-slate-700"
|
||||
@@ -5,6 +9,3 @@
|
||||
:aria-disabled="true"
|
||||
/>
|
||||
</template>
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
<template>
|
||||
<li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
|
||||
<span
|
||||
class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
|
||||
>
|
||||
{{ title }}
|
||||
</span>
|
||||
<slot />
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
componentName: 'WootDropdownMenu',
|
||||
@@ -19,3 +9,14 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li class="inline-flex list-none" :tabindex="null" :aria-disabled="true">
|
||||
<span
|
||||
class="text-xs text-slate-600 dark:text-slate-100 mt-1 font-medium w-full block text-left rtl:text-right whitespace-nowrap p-2"
|
||||
>
|
||||
{{ title }}
|
||||
</span>
|
||||
<slot />
|
||||
</li>
|
||||
</template>
|
||||
|
||||
@@ -1,15 +1,3 @@
|
||||
<template>
|
||||
<li
|
||||
class="dropdown-menu__item list-none mb-1"
|
||||
:class="{
|
||||
'is-disabled': disabled,
|
||||
}"
|
||||
:tabindex="disabled ? null : -1"
|
||||
:aria-disabled="disabled"
|
||||
>
|
||||
<slot />
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'WootDropdownItem',
|
||||
@@ -19,13 +7,23 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
class="mb-1 list-none dropdown-menu__item"
|
||||
:class="{
|
||||
'is-disabled': disabled,
|
||||
}"
|
||||
:tabindex="disabled ? null : -1"
|
||||
:aria-disabled="disabled"
|
||||
>
|
||||
<slot />
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-menu__item {
|
||||
::v-deep {
|
||||
|
||||
@@ -1,61 +1,66 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
|
||||
|
||||
defineProps({
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'top',
|
||||
},
|
||||
});
|
||||
|
||||
const dropdownMenuRef = ref(null);
|
||||
|
||||
const dropdownMenuButtons = () => {
|
||||
return dropdownMenuRef.value.querySelectorAll(
|
||||
'ul.dropdown li.dropdown-menu__item .button'
|
||||
);
|
||||
};
|
||||
|
||||
const getActiveButtonIndex = menuButtons => {
|
||||
const focusedButton = dropdownMenuRef.value.querySelector(
|
||||
'ul.dropdown li.dropdown-menu__item .button:focus'
|
||||
);
|
||||
return Array.from(menuButtons).indexOf(focusedButton);
|
||||
};
|
||||
|
||||
const focusButton = (menuButtons, newIndex) => {
|
||||
if (menuButtons.length === 0) return;
|
||||
menuButtons[newIndex].focus();
|
||||
};
|
||||
|
||||
const focusPreviousButton = menuButtons => {
|
||||
const activeIndex = getActiveButtonIndex(menuButtons);
|
||||
const newIndex = activeIndex >= 1 ? activeIndex - 1 : menuButtons.length - 1;
|
||||
focusButton(menuButtons, newIndex);
|
||||
};
|
||||
|
||||
const focusNextButton = menuButtons => {
|
||||
const activeIndex = getActiveButtonIndex(menuButtons);
|
||||
const newIndex = activeIndex === menuButtons.length - 1 ? 0 : activeIndex + 1;
|
||||
focusButton(menuButtons, newIndex);
|
||||
};
|
||||
|
||||
const keyboardEvents = {
|
||||
ArrowUp: {
|
||||
action: () => focusPreviousButton(dropdownMenuButtons()),
|
||||
allowOnFocusedInput: true,
|
||||
},
|
||||
ArrowDown: {
|
||||
action: () => focusNextButton(dropdownMenuButtons()),
|
||||
allowOnFocusedInput: true,
|
||||
},
|
||||
};
|
||||
|
||||
useKeyboardEvents(keyboardEvents);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul
|
||||
ref="dropdownMenu"
|
||||
ref="dropdownMenuRef"
|
||||
class="dropdown menu vertical"
|
||||
:class="[placement && `dropdown--${placement}`]"
|
||||
>
|
||||
<slot />
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
|
||||
export default {
|
||||
name: 'WootDropdownMenu',
|
||||
componentName: 'WootDropdownMenu',
|
||||
|
||||
mixins: [keyboardEventListenerMixins],
|
||||
|
||||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'top',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
dropdownMenuButtons() {
|
||||
return this.$refs.dropdownMenu.querySelectorAll(
|
||||
'ul.dropdown li.dropdown-menu__item .button'
|
||||
);
|
||||
},
|
||||
getActiveButtonIndex(menuButtons) {
|
||||
const focusedButton = this.$refs.dropdownMenu.querySelector(
|
||||
'ul.dropdown li.dropdown-menu__item .button:focus'
|
||||
);
|
||||
return Array.from(menuButtons).indexOf(focusedButton);
|
||||
},
|
||||
getKeyboardEvents() {
|
||||
const menuButtons = this.dropdownMenuButtons();
|
||||
return {
|
||||
ArrowUp: () => this.focusPreviousButton(menuButtons),
|
||||
ArrowDown: () => this.focusNextButton(menuButtons),
|
||||
};
|
||||
},
|
||||
focusPreviousButton(menuButtons) {
|
||||
const activeIndex = this.getActiveButtonIndex(menuButtons);
|
||||
const newIndex =
|
||||
activeIndex >= 1 ? activeIndex - 1 : menuButtons.length - 1;
|
||||
this.focusButton(menuButtons, newIndex);
|
||||
},
|
||||
focusNextButton(menuButtons) {
|
||||
const activeIndex = this.getActiveButtonIndex(menuButtons);
|
||||
const newIndex =
|
||||
activeIndex === menuButtons.length - 1 ? 0 : activeIndex + 1;
|
||||
this.focusButton(menuButtons, newIndex);
|
||||
},
|
||||
focusButton(menuButtons, newIndex) {
|
||||
if (menuButtons.length === 0) return;
|
||||
menuButtons[newIndex].focus();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
<template>
|
||||
<li class="sub-menu-container">
|
||||
<ul class="sub-menu-li-container">
|
||||
<woot-dropdown-header v-if="title" :title="title" />
|
||||
<slot />
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
|
||||
|
||||
@@ -24,6 +16,16 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li class="sub-menu-container">
|
||||
<ul class="sub-menu-li-container">
|
||||
<WootDropdownHeader v-if="title" :title="title" />
|
||||
<slot />
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sub-menu-container {
|
||||
margin-top: var(--space-micro);
|
||||
|
||||
@@ -1,80 +1,3 @@
|
||||
<template>
|
||||
<div class="flex flex-col w-full max-h-[12.5rem]">
|
||||
<div class="flex items-center justify-center mb-1">
|
||||
<h4
|
||||
class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis flex-grow"
|
||||
>
|
||||
{{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
|
||||
</h4>
|
||||
<hotkey
|
||||
custom-class="text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border border-solid border-slate-75 dark:border-slate-600"
|
||||
>
|
||||
L
|
||||
</hotkey>
|
||||
</div>
|
||||
<div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="search-input"
|
||||
autofocus="true"
|
||||
:placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-start items-start flex-grow flex-shrink flex-auto overflow-auto"
|
||||
>
|
||||
<div class="w-full">
|
||||
<woot-dropdown-menu>
|
||||
<label-dropdown-item
|
||||
v-for="label in filteredActiveLabels"
|
||||
:key="label.title"
|
||||
:title="label.title"
|
||||
:color="label.color"
|
||||
:selected="selectedLabels.includes(label.title)"
|
||||
@click="onAddRemove(label)"
|
||||
/>
|
||||
</woot-dropdown-menu>
|
||||
<div
|
||||
v-if="noResult"
|
||||
class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
|
||||
>
|
||||
{{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="allowCreation && shouldShowCreate"
|
||||
class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
|
||||
>
|
||||
<woot-button
|
||||
size="small"
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
icon="add"
|
||||
is-expanded
|
||||
class="button-new-label"
|
||||
:is-disabled="hasExactMatchInResults"
|
||||
@click="showCreateModal"
|
||||
>
|
||||
{{ createLabelPlaceholder }}
|
||||
{{ parsedSearch }}
|
||||
</woot-button>
|
||||
|
||||
<woot-modal
|
||||
:show.sync="createModalVisible"
|
||||
:on-close="hideCreateModal"
|
||||
>
|
||||
<add-label-modal
|
||||
:prefill-title="parsedSearch"
|
||||
@close="hideCreateModal"
|
||||
/>
|
||||
</woot-modal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LabelDropdownItem from './LabelDropdownItem.vue';
|
||||
import Hotkey from 'dashboard/components/base/Hotkey.vue';
|
||||
@@ -184,6 +107,83 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col w-full max-h-[12.5rem]">
|
||||
<div class="flex items-center justify-center mb-1">
|
||||
<h4
|
||||
class="flex-grow m-0 overflow-hidden text-sm text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
|
||||
>
|
||||
{{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
|
||||
</h4>
|
||||
<Hotkey
|
||||
custom-class="border border-solid text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border-slate-75 dark:border-slate-600"
|
||||
>
|
||||
{{ 'L' }}
|
||||
</Hotkey>
|
||||
</div>
|
||||
<div class="flex-auto flex-grow-0 flex-shrink-0 mb-2 max-h-8">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="search-input"
|
||||
autofocus="true"
|
||||
:placeholder="$t('CONTACT_PANEL.LABELS.LABEL_SELECT.PLACEHOLDER')"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-start justify-start flex-auto flex-grow flex-shrink overflow-auto"
|
||||
>
|
||||
<div class="w-full">
|
||||
<woot-dropdown-menu>
|
||||
<LabelDropdownItem
|
||||
v-for="label in filteredActiveLabels"
|
||||
:key="label.title"
|
||||
:title="label.title"
|
||||
:color="label.color"
|
||||
:selected="selectedLabels.includes(label.title)"
|
||||
@click="onAddRemove(label)"
|
||||
/>
|
||||
</woot-dropdown-menu>
|
||||
<div
|
||||
v-if="noResult"
|
||||
class="flex justify-center py-4 px-2.5 font-medium text-xs text-slate-700 dark:text-slate-200"
|
||||
>
|
||||
{{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.NO_RESULT') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="allowCreation && shouldShowCreate"
|
||||
class="flex pt-1 border-t border-solid border-slate-100 dark:border-slate-900"
|
||||
>
|
||||
<woot-button
|
||||
size="small"
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
icon="add"
|
||||
is-expanded
|
||||
class="button-new-label"
|
||||
:is-disabled="hasExactMatchInResults"
|
||||
@click="showCreateModal"
|
||||
>
|
||||
{{ createLabelPlaceholder }}
|
||||
{{ parsedSearch }}
|
||||
</woot-button>
|
||||
|
||||
<woot-modal
|
||||
:show.sync="createModalVisible"
|
||||
:on-close="hideCreateModal"
|
||||
>
|
||||
<AddLabelModal
|
||||
:prefill-title="parsedSearch"
|
||||
@close="hideCreateModal"
|
||||
/>
|
||||
</woot-modal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hotkey {
|
||||
@apply flex-shrink-0;
|
||||
|
||||
@@ -1,25 +1,3 @@
|
||||
<template>
|
||||
<woot-dropdown-item>
|
||||
<div class="item-wrap">
|
||||
<woot-button variant="clear" @click="onClick">
|
||||
<div class="button-wrap">
|
||||
<div class="name-label-wrap">
|
||||
<div
|
||||
v-if="color"
|
||||
class="label-color--display"
|
||||
:style="{ backgroundColor: color }"
|
||||
/>
|
||||
<span class="label-text" :title="title">{{ title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<i v-if="selected" class="icon ion-checkmark-round" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
</div>
|
||||
</woot-dropdown-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
@@ -45,6 +23,28 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<woot-dropdown-item>
|
||||
<div class="item-wrap">
|
||||
<woot-button variant="clear" @click="onClick">
|
||||
<div class="button-wrap">
|
||||
<div class="name-label-wrap">
|
||||
<div
|
||||
v-if="color"
|
||||
class="label-color--display"
|
||||
:style="{ backgroundColor: color }"
|
||||
/>
|
||||
<span class="label-text" :title="title">{{ title }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<i v-if="selected" class="icon ion-checkmark-round" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
</div>
|
||||
</woot-dropdown-item>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item-wrap {
|
||||
@apply flex;
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
import { useMessageFormatter } from '../useMessageFormatter';
|
||||
|
||||
describe('useMessageFormatter', () => {
|
||||
let messageFormatter;
|
||||
|
||||
beforeEach(() => {
|
||||
messageFormatter = useMessageFormatter();
|
||||
});
|
||||
|
||||
describe('formatMessage', () => {
|
||||
it('should format a regular message correctly', () => {
|
||||
const message = 'This is a [test](https://example.com) message';
|
||||
const result = messageFormatter.formatMessage(message, false, false);
|
||||
expect(result).toContain('<a href="https://example.com"');
|
||||
expect(result).toContain('class="link"');
|
||||
});
|
||||
|
||||
it('should format a tweet correctly', () => {
|
||||
const message = '@user #hashtag';
|
||||
const result = messageFormatter.formatMessage(message, true, false);
|
||||
expect(result).toContain('<a href="http://twitter.com/user"');
|
||||
expect(result).toContain('<a href="https://twitter.com/hashtag/hashtag"');
|
||||
});
|
||||
|
||||
it('should not format mentions and hashtags for private notes', () => {
|
||||
const message = '@user #hashtag';
|
||||
const result = messageFormatter.formatMessage(message, false, true);
|
||||
expect(result).not.toContain('<a href="http://twitter.com/user"');
|
||||
expect(result).not.toContain(
|
||||
'<a href="https://twitter.com/hashtag/hashtag"'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('truncateMessage', () => {
|
||||
it('should not truncate short messages', () => {
|
||||
const message = 'Short message';
|
||||
const result = messageFormatter.truncateMessage(message);
|
||||
expect(result).toBe(message);
|
||||
});
|
||||
|
||||
it('should truncate long messages', () => {
|
||||
const message = 'A'.repeat(150);
|
||||
const result = messageFormatter.truncateMessage(message);
|
||||
expect(result.length).toBe(100);
|
||||
expect(result.endsWith('...')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('highlightContent', () => {
|
||||
it('should highlight search term in content', () => {
|
||||
const content = 'This is a test message';
|
||||
const searchTerm = 'test';
|
||||
const highlightClass = 'highlight';
|
||||
const result = messageFormatter.highlightContent(
|
||||
content,
|
||||
searchTerm,
|
||||
highlightClass
|
||||
);
|
||||
expect(result.trim()).toBe(
|
||||
'This is a <span class="highlight">test</span> message'
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle special characters in search term', () => {
|
||||
const content = 'This (message) contains [special] characters';
|
||||
const searchTerm = '(message)';
|
||||
const highlightClass = 'highlight';
|
||||
const result = messageFormatter.highlightContent(
|
||||
content,
|
||||
searchTerm,
|
||||
highlightClass
|
||||
);
|
||||
expect(result.trim()).toBe(
|
||||
'This <span class="highlight">(message)</span> contains [special] characters'
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,82 @@
|
||||
import MessageFormatter from '../helpers/MessageFormatter';
|
||||
|
||||
/**
|
||||
* A composable providing utility functions for message formatting.
|
||||
*
|
||||
* @returns {Object} A set of functions for message formatting.
|
||||
*/
|
||||
export const useMessageFormatter = () => {
|
||||
/**
|
||||
* Formats a message based on specified conditions.
|
||||
*
|
||||
* @param {string} message - The message to be formatted.
|
||||
* @param {boolean} isATweet - Whether the message is a tweet.
|
||||
* @param {boolean} isAPrivateNote - Whether the message is a private note.
|
||||
* @returns {string} - The formatted message.
|
||||
*/
|
||||
const formatMessage = (message, isATweet, isAPrivateNote) => {
|
||||
const messageFormatter = new MessageFormatter(
|
||||
message,
|
||||
isATweet,
|
||||
isAPrivateNote
|
||||
);
|
||||
return messageFormatter.formattedMessage;
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts a message to plain text.
|
||||
*
|
||||
* @param {string} message - The message to be converted.
|
||||
* @param {boolean} isATweet - Whether the message is a tweet.
|
||||
* @returns {string} - The plain text message.
|
||||
*/
|
||||
const getPlainText = (message, isATweet) => {
|
||||
const messageFormatter = new MessageFormatter(message, isATweet);
|
||||
return messageFormatter.plainText;
|
||||
};
|
||||
|
||||
/**
|
||||
* Truncates a description to a maximum length of 100 characters.
|
||||
*
|
||||
* @param {string} [description=''] - The description to be truncated.
|
||||
* @returns {string} - The truncated description.
|
||||
*/
|
||||
const truncateMessage = (description = '') => {
|
||||
if (description.length < 100) {
|
||||
return description;
|
||||
}
|
||||
|
||||
return `${description.slice(0, 97)}...`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Highlights occurrences of a search term within given content.
|
||||
*
|
||||
* @param {string} [content=''] - The content in which to search.
|
||||
* @param {string} [searchTerm=''] - The term to search for.
|
||||
* @param {string} [highlightClass=''] - The CSS class to apply to the highlighted term.
|
||||
* @returns {string} - The content with highlighted terms.
|
||||
*/
|
||||
const highlightContent = (
|
||||
content = '',
|
||||
searchTerm = '',
|
||||
highlightClass = ''
|
||||
) => {
|
||||
const plainTextContent = getPlainText(content);
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
|
||||
const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
|
||||
return plainTextContent.replace(
|
||||
new RegExp(`(${escapedSearchTerm})`, 'ig'),
|
||||
`<span class="${highlightClass}">$1</span>`
|
||||
);
|
||||
};
|
||||
|
||||
return {
|
||||
formatMessage,
|
||||
getPlainText,
|
||||
truncateMessage,
|
||||
highlightContent,
|
||||
};
|
||||
};
|
||||
@@ -22,6 +22,14 @@ export const hasPressedCommandAndEnter = e => {
|
||||
return hasPressedCommand(e) && isEnter(e);
|
||||
};
|
||||
|
||||
// If layout is QWERTZ then we add the Shift+keysToModify to fix an known issue
|
||||
// https://github.com/chatwoot/chatwoot/issues/9492
|
||||
export const keysToModifyInQWERTZ = new Set(['Alt+KeyP', 'Alt+KeyL']);
|
||||
|
||||
export const LAYOUT_QWERTY = 'QWERTY';
|
||||
export const LAYOUT_QWERTZ = 'QWERTZ';
|
||||
export const LAYOUT_AZERTY = 'AZERTY';
|
||||
|
||||
/**
|
||||
* Determines whether the active element is typeable.
|
||||
*
|
||||
|
||||
@@ -1,22 +1,58 @@
|
||||
/**
|
||||
* Checks if a string is a valid E.164 phone number format.
|
||||
* @param {string} value - The phone number to validate.
|
||||
* @returns {boolean} True if the number is in E.164 format, false otherwise.
|
||||
*/
|
||||
export const isPhoneE164 = value => !!value.match(/^\+[1-9]\d{1,14}$/);
|
||||
|
||||
/**
|
||||
* Validates a phone number after removing the dial code.
|
||||
* @param {string} value - The full phone number including dial code.
|
||||
* @param {string} dialCode - The dial code to remove before validation.
|
||||
* @returns {boolean} True if the number (without dial code) is valid, false otherwise.
|
||||
*/
|
||||
export const isPhoneNumberValid = (value, dialCode) => {
|
||||
const number = value.replace(dialCode, '');
|
||||
return !!number.match(/^[0-9]{1,14}$/);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a string is either a valid E.164 phone number or empty.
|
||||
* @param {string} value - The phone number to validate.
|
||||
* @returns {boolean} True if the number is in E.164 format or empty, false otherwise.
|
||||
*/
|
||||
export const isPhoneE164OrEmpty = value => isPhoneE164(value) || value === '';
|
||||
|
||||
/**
|
||||
* Validates a phone number with dial code, requiring at least 5 digits.
|
||||
* @param {string} value - The full phone number including dial code.
|
||||
* @returns {boolean} True if the number is valid, false otherwise.
|
||||
*/
|
||||
export const isPhoneNumberValidWithDialCode = value => {
|
||||
const number = value.replace(/^\+/, ''); // Remove the '+' sign
|
||||
return !!number.match(/^[1-9]\d{4,}$/); // Validate the phone number with minimum 5 digits
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a string starts with a plus sign.
|
||||
* @param {string} value - The string to check.
|
||||
* @returns {boolean} True if the string starts with '+', false otherwise.
|
||||
*/
|
||||
export const startsWithPlus = value => value.startsWith('+');
|
||||
|
||||
/**
|
||||
* Checks if a string is a valid URL (starts with 'http') or is empty.
|
||||
* @param {string} [value=''] - The string to check.
|
||||
* @returns {boolean} True if the string is a valid URL or empty, false otherwise.
|
||||
*/
|
||||
export const shouldBeUrl = (value = '') =>
|
||||
value ? value.startsWith('http') : true;
|
||||
|
||||
/**
|
||||
* Validates a password for complexity requirements.
|
||||
* @param {string} value - The password to validate.
|
||||
* @returns {boolean} True if the password meets all requirements, false otherwise.
|
||||
*/
|
||||
export const isValidPassword = value => {
|
||||
const containsUppercase = /[A-Z]/.test(value);
|
||||
const containsLowercase = /[a-z]/.test(value);
|
||||
@@ -32,8 +68,18 @@ export const isValidPassword = value => {
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a string consists only of digits.
|
||||
* @param {string} value - The string to check.
|
||||
* @returns {boolean} True if the string contains only digits, false otherwise.
|
||||
*/
|
||||
export const isNumber = value => /^\d+$/.test(value);
|
||||
|
||||
/**
|
||||
* Validates a domain name.
|
||||
* @param {string} value - The domain name to validate.
|
||||
* @returns {boolean} True if the domain is valid or empty, false otherwise.
|
||||
*/
|
||||
export const isDomain = value => {
|
||||
if (value !== '') {
|
||||
const domainRegex = /^([\p{L}0-9]+(-[\p{L}0-9]+)*\.)+[a-z]{2,}$/gmu;
|
||||
@@ -41,3 +87,16 @@ export const isDomain = value => {
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a RegExp object from a string representation of a regular expression.
|
||||
* @param {string} regexPatternValue - The string representation of the regex (e.g., '/pattern/flags').
|
||||
* @returns {RegExp} A RegExp object created from the input string.
|
||||
*/
|
||||
export const getRegexp = regexPatternValue => {
|
||||
let lastSlash = regexPatternValue.lastIndexOf('/');
|
||||
return new RegExp(
|
||||
regexPatternValue.slice(1, lastSlash),
|
||||
regexPatternValue.slice(lastSlash + 1)
|
||||
);
|
||||
};
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
isPhoneNumberValid,
|
||||
isNumber,
|
||||
isDomain,
|
||||
getRegexp,
|
||||
} from '../Validators';
|
||||
|
||||
describe('#shouldBeUrl', () => {
|
||||
@@ -115,3 +116,40 @@ describe('#startsWithPlus', () => {
|
||||
expect(startsWithPlus('123456789')).toEqual(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getRegexp', () => {
|
||||
it('should create a correct RegExp object', () => {
|
||||
const regexPattern = '/^[a-z]+$/i';
|
||||
const regex = getRegexp(regexPattern);
|
||||
|
||||
expect(regex).toBeInstanceOf(RegExp);
|
||||
expect(regex.toString()).toBe(regexPattern);
|
||||
|
||||
expect(regex.test('abc')).toBe(true);
|
||||
expect(regex.test('ABC')).toBe(true);
|
||||
expect(regex.test('123')).toBe(false);
|
||||
});
|
||||
|
||||
it('should handle regex with flags', () => {
|
||||
const regexPattern = '/hello/gi';
|
||||
const regex = getRegexp(regexPattern);
|
||||
|
||||
expect(regex).toBeInstanceOf(RegExp);
|
||||
expect(regex.toString()).toBe(regexPattern);
|
||||
|
||||
expect(regex.test('hello')).toBe(true);
|
||||
expect(regex.test('HELLO')).toBe(false);
|
||||
expect(regex.test('Hello World')).toBe(true);
|
||||
});
|
||||
|
||||
it('should handle regex with special characters', () => {
|
||||
const regexPattern = '/\\d{3}-\\d{2}-\\d{4}/';
|
||||
const regex = getRegexp(regexPattern);
|
||||
|
||||
expect(regex).toBeInstanceOf(RegExp);
|
||||
expect(regex.toString()).toBe(regexPattern);
|
||||
|
||||
expect(regex.test('123-45-6789')).toBe(true);
|
||||
expect(regex.test('12-34-5678')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import { emitter } from 'shared/helpers/mitt';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showAlert(message, action) {
|
||||
emitter.emit('newToastMessage', message, action);
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
export default {
|
||||
computed: {
|
||||
hostURL() {
|
||||
return window.chatwootConfig.hostURL;
|
||||
},
|
||||
vapidPublicKey() {
|
||||
return window.chatwootConfig.vapidPublicKey;
|
||||
},
|
||||
enabledLanguages() {
|
||||
return window.chatwootConfig.enabledLanguages;
|
||||
},
|
||||
isEnterprise() {
|
||||
return window.chatwootConfig.isEnterprise === 'true';
|
||||
},
|
||||
enterprisePlanName() {
|
||||
// returns "community" or "enterprise"
|
||||
return window.chatwootConfig?.enterprisePlanName;
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,8 +1,12 @@
|
||||
export const useInstallationName = (str, installationName) => {
|
||||
if (str && installationName) {
|
||||
return str.replace(/Chatwoot/g, installationName);
|
||||
}
|
||||
return str;
|
||||
};
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
// eslint-disable-next-line default-param-last
|
||||
useInstallationName(str = '', installationName) {
|
||||
return str.replace(/Chatwoot/g, installationName);
|
||||
},
|
||||
useInstallationName,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
import MessageFormatter from '../helpers/MessageFormatter';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
formatMessage(message, isATweet, isAPrivateNote) {
|
||||
const messageFormatter = new MessageFormatter(
|
||||
message,
|
||||
isATweet,
|
||||
isAPrivateNote
|
||||
);
|
||||
return messageFormatter.formattedMessage;
|
||||
},
|
||||
getPlainText(message, isATweet) {
|
||||
const messageFormatter = new MessageFormatter(message, isATweet);
|
||||
return messageFormatter.plainText;
|
||||
},
|
||||
truncateMessage(description = '') {
|
||||
if (description.length < 100) {
|
||||
return description;
|
||||
}
|
||||
|
||||
return `${description.slice(0, 97)}...`;
|
||||
},
|
||||
|
||||
highlightContent(content = '', searchTerm = '', highlightClass = '') {
|
||||
const plainTextContent = this.getPlainText(content);
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
|
||||
const escapedSearchTerm = searchTerm.replace(
|
||||
/[.*+?^${}()|[\]\\]/g,
|
||||
'\\$&'
|
||||
);
|
||||
|
||||
return plainTextContent.replace(
|
||||
new RegExp(`(${escapedSearchTerm})`, 'ig'),
|
||||
`<span class="${highlightClass}">$1</span>`
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
|
||||
import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
|
||||
|
||||
export default {
|
||||
mixins: [uiSettingsMixin],
|
||||
computed: {
|
||||
isRTLView() {
|
||||
const { rtl_view: isRTLView } = this.uiSettings;
|
||||
return isRTLView;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateRTLDirectionView(locale) {
|
||||
const isRTLSupported = getLanguageDirection(locale);
|
||||
this.updateUISettings({
|
||||
rtl_view: isRTLSupported,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="test" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MockComponent',
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="test" />
|
||||
</template>
|
||||
|
||||
@@ -1,806 +0,0 @@
|
||||
import allLanguages from '../../../dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
|
||||
|
||||
import allCountries from '../../../shared/constants/countries.js';
|
||||
|
||||
export const customAttributes = [
|
||||
{
|
||||
id: 1,
|
||||
attribute_display_name: 'Signed Up At',
|
||||
attribute_display_type: 'date',
|
||||
attribute_description: 'This is a test',
|
||||
attribute_key: 'signed_up_at',
|
||||
attribute_values: [],
|
||||
attribute_model: 'conversation_attribute',
|
||||
default_value: null,
|
||||
created_at: '2022-01-26T08:06:39.470Z',
|
||||
updated_at: '2022-01-26T08:06:39.470Z',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
attribute_display_name: 'Prime User',
|
||||
attribute_display_type: 'checkbox',
|
||||
attribute_description: 'Test',
|
||||
attribute_key: 'prime_user',
|
||||
attribute_values: [],
|
||||
attribute_model: 'contact_attribute',
|
||||
default_value: null,
|
||||
created_at: '2022-01-26T08:07:29.664Z',
|
||||
updated_at: '2022-01-26T08:07:29.664Z',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
attribute_display_name: 'Test',
|
||||
attribute_display_type: 'text',
|
||||
attribute_description: 'Test',
|
||||
attribute_key: 'test',
|
||||
attribute_values: [],
|
||||
attribute_model: 'conversation_attribute',
|
||||
default_value: null,
|
||||
created_at: '2022-01-26T08:07:58.325Z',
|
||||
updated_at: '2022-01-26T08:07:58.325Z',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
attribute_display_name: 'Link',
|
||||
attribute_display_type: 'link',
|
||||
attribute_description: 'Test',
|
||||
attribute_key: 'link',
|
||||
attribute_values: [],
|
||||
attribute_model: 'conversation_attribute',
|
||||
default_value: null,
|
||||
created_at: '2022-02-07T07:31:51.562Z',
|
||||
updated_at: '2022-02-07T07:31:51.562Z',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
attribute_display_name: 'My List',
|
||||
attribute_display_type: 'list',
|
||||
attribute_description: 'This is a sample list',
|
||||
attribute_key: 'my_list',
|
||||
attribute_values: ['item1', 'item2', 'item3'],
|
||||
attribute_model: 'conversation_attribute',
|
||||
default_value: null,
|
||||
created_at: '2022-02-21T20:31:34.175Z',
|
||||
updated_at: '2022-02-21T20:31:34.175Z',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
attribute_display_name: 'My Check',
|
||||
attribute_display_type: 'checkbox',
|
||||
attribute_description: 'Test Checkbox',
|
||||
attribute_key: 'my_check',
|
||||
attribute_values: [],
|
||||
attribute_model: 'conversation_attribute',
|
||||
default_value: null,
|
||||
created_at: '2022-02-21T20:31:53.385Z',
|
||||
updated_at: '2022-02-21T20:31:53.385Z',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
attribute_display_name: 'ConList',
|
||||
attribute_display_type: 'list',
|
||||
attribute_description: 'This is a test list\n',
|
||||
attribute_key: 'conlist',
|
||||
attribute_values: ['Hello', 'Test', 'Test2'],
|
||||
attribute_model: 'contact_attribute',
|
||||
default_value: null,
|
||||
created_at: '2022-02-28T12:58:05.005Z',
|
||||
updated_at: '2022-02-28T12:58:05.005Z',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
attribute_display_name: 'asdf',
|
||||
attribute_display_type: 'link',
|
||||
attribute_description: 'This is a some text',
|
||||
attribute_key: 'asdf',
|
||||
attribute_values: [],
|
||||
attribute_model: 'contact_attribute',
|
||||
default_value: null,
|
||||
created_at: '2022-04-21T05:48:16.168Z',
|
||||
updated_at: '2022-04-21T05:48:16.168Z',
|
||||
},
|
||||
];
|
||||
export const emptyAutomation = {
|
||||
name: null,
|
||||
description: null,
|
||||
event_name: 'conversation_created',
|
||||
conditions: [
|
||||
{
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
action_name: 'assign_team',
|
||||
action_params: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
export const filterAttributes = [
|
||||
{
|
||||
key: 'status',
|
||||
name: 'Status',
|
||||
attributeI18nKey: 'STATUS',
|
||||
inputType: 'multi_select',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'browser_language',
|
||||
name: 'Browser Language',
|
||||
attributeI18nKey: 'BROWSER_LANGUAGE',
|
||||
inputType: 'search_select',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'country_code',
|
||||
name: 'Country',
|
||||
attributeI18nKey: 'COUNTRY_NAME',
|
||||
inputType: 'search_select',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'referer',
|
||||
name: 'Referrer Link',
|
||||
attributeI18nKey: 'REFERER_LINK',
|
||||
inputType: 'plain_text',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
{ value: 'contains', label: 'Contains' },
|
||||
{ value: 'does_not_contain', label: 'Does not contain' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'inbox_id',
|
||||
name: 'Inbox',
|
||||
attributeI18nKey: 'INBOX',
|
||||
inputType: 'multi_select',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'conversation_custom_attribute',
|
||||
name: 'Conversation Custom Attributes',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: 'signed_up_at',
|
||||
name: 'Signed Up At',
|
||||
inputType: 'date',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
{ value: 'is_present', label: 'Is present' },
|
||||
{ value: 'is_not_present', label: 'Is not present' },
|
||||
{ value: 'is_greater_than', label: 'Is greater than' },
|
||||
{ value: 'is_less_than', label: 'Is less than' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'test',
|
||||
name: 'Test',
|
||||
inputType: 'plain_text',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
{ value: 'is_present', label: 'Is present' },
|
||||
{ value: 'is_not_present', label: 'Is not present' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'link',
|
||||
name: 'Link',
|
||||
inputType: 'plain_text',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'my_list',
|
||||
name: 'My List',
|
||||
inputType: 'search_select',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'my_check',
|
||||
name: 'My Check',
|
||||
inputType: 'search_select',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'contact_custom_attribute',
|
||||
name: 'Contact Custom Attributes',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: 'prime_user',
|
||||
name: 'Prime User',
|
||||
inputType: 'search_select',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'conlist',
|
||||
name: 'ConList',
|
||||
inputType: 'search_select',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'asdf',
|
||||
name: 'asdf',
|
||||
inputType: 'plain_text',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
];
|
||||
export const automation = {
|
||||
id: 164,
|
||||
account_id: 1,
|
||||
name: 'Attachment',
|
||||
description: 'Yo',
|
||||
event_name: 'conversation_created',
|
||||
conditions: [
|
||||
{
|
||||
values: [{ id: 'open', name: 'Open' }],
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
query_operator: 'and',
|
||||
},
|
||||
],
|
||||
actions: [{ action_name: 'send_attachment', action_params: [59] }],
|
||||
created_on: 1652717181,
|
||||
active: true,
|
||||
files: [
|
||||
{
|
||||
id: 50,
|
||||
automation_rule_id: 164,
|
||||
file_type: 'image/jpeg',
|
||||
account_id: 1,
|
||||
file_url:
|
||||
'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBRQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--965b4c27f4c5e47c526f0f38266b25417b72e5dd/pfp.jpeg',
|
||||
blob_id: 59,
|
||||
filename: 'pfp.jpeg',
|
||||
},
|
||||
],
|
||||
};
|
||||
export const agents = [
|
||||
{
|
||||
id: 1,
|
||||
account_id: 1,
|
||||
availability_status: 'online',
|
||||
auto_offline: true,
|
||||
confirmed: true,
|
||||
email: 'john@acme.inc',
|
||||
available_name: 'Fayaz',
|
||||
name: 'Fayaz',
|
||||
role: 'administrator',
|
||||
thumbnail:
|
||||
'https://www.gravatar.com/avatar/0d722ac7bc3b3c92c030d0da9690d981?d=404',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
account_id: 1,
|
||||
availability_status: 'offline',
|
||||
auto_offline: true,
|
||||
confirmed: true,
|
||||
email: 'john@doe.com',
|
||||
available_name: 'John',
|
||||
name: 'John',
|
||||
role: 'agent',
|
||||
thumbnail:
|
||||
'https://www.gravatar.com/avatar/6a6c19fea4a3676970167ce51f39e6ee?d=404',
|
||||
},
|
||||
];
|
||||
export const booleanFilterOptions = [
|
||||
{
|
||||
id: true,
|
||||
name: 'True',
|
||||
},
|
||||
{
|
||||
id: false,
|
||||
name: 'False',
|
||||
},
|
||||
];
|
||||
export const teams = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'sales team',
|
||||
description: 'This is our internal sales team',
|
||||
allow_auto_assign: true,
|
||||
account_id: 1,
|
||||
is_member: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'fayaz',
|
||||
description: 'Test',
|
||||
allow_auto_assign: true,
|
||||
account_id: 1,
|
||||
is_member: false,
|
||||
},
|
||||
];
|
||||
export const campaigns = [];
|
||||
export const contacts = [
|
||||
{
|
||||
additional_attributes: {},
|
||||
availability_status: 'offline',
|
||||
email: 'asd123123@asd.com',
|
||||
id: 32,
|
||||
name: 'asd123123',
|
||||
phone_number: null,
|
||||
identifier: null,
|
||||
thumbnail:
|
||||
'https://www.gravatar.com/avatar/46000d9a1eef3e24a02ca9d6c2a8f494?d=404',
|
||||
custom_attributes: {},
|
||||
conversations_count: 5,
|
||||
last_activity_at: 1650519706,
|
||||
},
|
||||
{
|
||||
additional_attributes: {},
|
||||
availability_status: 'offline',
|
||||
email: 'barry_allen@a.com',
|
||||
id: 29,
|
||||
name: 'barry_allen',
|
||||
phone_number: null,
|
||||
identifier: null,
|
||||
thumbnail:
|
||||
'https://www.gravatar.com/avatar/ab5ff99efa3bc1f74db1dc2885f9e2ce?d=404',
|
||||
custom_attributes: {},
|
||||
conversations_count: 1,
|
||||
last_activity_at: 1643728899,
|
||||
},
|
||||
];
|
||||
export const inboxes = [
|
||||
{
|
||||
id: 1,
|
||||
avatar_url: '',
|
||||
channel_id: 1,
|
||||
name: 'Acme Support',
|
||||
channel_type: 'Channel::WebWidget',
|
||||
greeting_enabled: false,
|
||||
greeting_message: '',
|
||||
working_hours_enabled: false,
|
||||
enable_email_collect: true,
|
||||
csat_survey_enabled: true,
|
||||
sender_name_type: 0,
|
||||
enable_auto_assignment: true,
|
||||
out_of_office_message:
|
||||
'We are unavailable at the moment. Leave a message we will respond once we are back.',
|
||||
working_hours: [
|
||||
{
|
||||
day_of_week: 0,
|
||||
closed_all_day: true,
|
||||
open_hour: null,
|
||||
open_minutes: null,
|
||||
close_hour: null,
|
||||
close_minutes: null,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 1,
|
||||
closed_all_day: false,
|
||||
open_hour: 9,
|
||||
open_minutes: 0,
|
||||
close_hour: 17,
|
||||
close_minutes: 0,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 2,
|
||||
closed_all_day: false,
|
||||
open_hour: 9,
|
||||
open_minutes: 0,
|
||||
close_hour: 17,
|
||||
close_minutes: 0,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 3,
|
||||
closed_all_day: false,
|
||||
open_hour: 9,
|
||||
open_minutes: 0,
|
||||
close_hour: 17,
|
||||
close_minutes: 0,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 4,
|
||||
closed_all_day: false,
|
||||
open_hour: 9,
|
||||
open_minutes: 0,
|
||||
close_hour: 17,
|
||||
close_minutes: 0,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 5,
|
||||
closed_all_day: false,
|
||||
open_hour: 9,
|
||||
open_minutes: 0,
|
||||
close_hour: 17,
|
||||
close_minutes: 0,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 6,
|
||||
closed_all_day: true,
|
||||
open_hour: null,
|
||||
open_minutes: null,
|
||||
close_hour: null,
|
||||
close_minutes: null,
|
||||
open_all_day: false,
|
||||
},
|
||||
],
|
||||
timezone: 'America/Los_Angeles',
|
||||
callback_webhook_url: null,
|
||||
allow_messages_after_resolved: true,
|
||||
widget_color: '#1f93ff',
|
||||
website_url: 'https://acme.inc',
|
||||
hmac_mandatory: false,
|
||||
welcome_title: '',
|
||||
welcome_tagline: '',
|
||||
web_widget_script:
|
||||
'\n <script>\n (function(d,t) {\n var BASE_URL="http://localhost:3000";\n var g=d.createElement(t),s=d.getElementsByTagName(t)[0];\n g.src=BASE_URL+"/packs/js/sdk.js";\n g.defer = true;\n g.async = true;\n s.parentNode.insertBefore(g,s);\n g.onload=function(){\n window.chatwootSDK.run({\n websiteToken: \'yZ7USzaEs7hrwUAHLGwjbxJ1\',\n baseUrl: BASE_URL\n })\n }\n })(document,"script");\n </script>\n ',
|
||||
website_token: 'yZ7USzaEs7hrwUAHLGwjbxJ1',
|
||||
selected_feature_flags: ['attachments', 'emoji_picker', 'end_conversation'],
|
||||
reply_time: 'in_a_few_minutes',
|
||||
hmac_token: 'rRJW1BHu4aFMMey4SE7tWr8A',
|
||||
pre_chat_form_enabled: false,
|
||||
pre_chat_form_options: {
|
||||
pre_chat_fields: [
|
||||
{
|
||||
name: 'emailAddress',
|
||||
type: 'email',
|
||||
label: 'Email Id',
|
||||
enabled: false,
|
||||
required: true,
|
||||
field_type: 'standard',
|
||||
},
|
||||
{
|
||||
name: 'fullName',
|
||||
type: 'text',
|
||||
label: 'Full name',
|
||||
enabled: false,
|
||||
required: false,
|
||||
field_type: 'standard',
|
||||
},
|
||||
{
|
||||
name: 'phoneNumber',
|
||||
type: 'text',
|
||||
label: 'Phone number',
|
||||
enabled: false,
|
||||
required: false,
|
||||
field_type: 'standard',
|
||||
},
|
||||
],
|
||||
pre_chat_message: 'Share your queries or comments here.',
|
||||
},
|
||||
continuity_via_email: true,
|
||||
phone_number: null,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
avatar_url: '',
|
||||
channel_id: 1,
|
||||
name: 'Email',
|
||||
channel_type: 'Channel::Email',
|
||||
greeting_enabled: false,
|
||||
greeting_message: null,
|
||||
working_hours_enabled: false,
|
||||
enable_email_collect: true,
|
||||
csat_survey_enabled: false,
|
||||
enable_auto_assignment: true,
|
||||
out_of_office_message: null,
|
||||
working_hours: [
|
||||
{
|
||||
day_of_week: 0,
|
||||
closed_all_day: true,
|
||||
open_hour: null,
|
||||
open_minutes: null,
|
||||
close_hour: null,
|
||||
close_minutes: null,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 1,
|
||||
closed_all_day: false,
|
||||
open_hour: 9,
|
||||
open_minutes: 0,
|
||||
close_hour: 17,
|
||||
close_minutes: 0,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 2,
|
||||
closed_all_day: false,
|
||||
open_hour: 9,
|
||||
open_minutes: 0,
|
||||
close_hour: 17,
|
||||
close_minutes: 0,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 3,
|
||||
closed_all_day: false,
|
||||
open_hour: 9,
|
||||
open_minutes: 0,
|
||||
close_hour: 17,
|
||||
close_minutes: 0,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 4,
|
||||
closed_all_day: false,
|
||||
open_hour: 9,
|
||||
open_minutes: 0,
|
||||
close_hour: 17,
|
||||
close_minutes: 0,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 5,
|
||||
closed_all_day: false,
|
||||
open_hour: 9,
|
||||
open_minutes: 0,
|
||||
close_hour: 17,
|
||||
close_minutes: 0,
|
||||
open_all_day: false,
|
||||
},
|
||||
{
|
||||
day_of_week: 6,
|
||||
closed_all_day: true,
|
||||
open_hour: null,
|
||||
open_minutes: null,
|
||||
close_hour: null,
|
||||
close_minutes: null,
|
||||
open_all_day: false,
|
||||
},
|
||||
],
|
||||
timezone: 'UTC',
|
||||
callback_webhook_url: null,
|
||||
allow_messages_after_resolved: true,
|
||||
widget_color: null,
|
||||
website_url: null,
|
||||
hmac_mandatory: null,
|
||||
welcome_title: null,
|
||||
welcome_tagline: null,
|
||||
web_widget_script: null,
|
||||
website_token: null,
|
||||
selected_feature_flags: null,
|
||||
reply_time: null,
|
||||
phone_number: null,
|
||||
forward_to_email: '9ae8ebb96c7f2d6705009f5add6d1a2d@false',
|
||||
email: 'fayaz@chatwoot.com',
|
||||
imap_login: '',
|
||||
imap_password: '',
|
||||
imap_address: '',
|
||||
imap_port: 0,
|
||||
imap_enabled: false,
|
||||
imap_enable_ssl: true,
|
||||
smtp_login: '',
|
||||
smtp_password: '',
|
||||
smtp_address: '',
|
||||
smtp_port: 0,
|
||||
smtp_enabled: false,
|
||||
smtp_domain: '',
|
||||
smtp_enable_ssl_tls: false,
|
||||
smtp_enable_starttls_auto: true,
|
||||
smtp_openssl_verify_mode: 'none',
|
||||
smtp_authentication: 'login',
|
||||
},
|
||||
];
|
||||
export const labels = [
|
||||
{
|
||||
id: 2,
|
||||
title: 'testlabel',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'snoozes',
|
||||
},
|
||||
];
|
||||
export const statusFilterOptions = [
|
||||
{ id: 'open', name: 'Open' },
|
||||
{ id: 'resolved', name: 'Resolved' },
|
||||
{ id: 'pending', name: 'Pending' },
|
||||
{ id: 'snoozed', name: 'Snoozed' },
|
||||
{ id: 'all', name: 'All' },
|
||||
];
|
||||
export const languages = allLanguages;
|
||||
export const countries = allCountries;
|
||||
export const MESSAGE_CONDITION_VALUES = [
|
||||
{
|
||||
id: 'incoming',
|
||||
name: 'Incoming Message',
|
||||
},
|
||||
{
|
||||
id: 'outgoing',
|
||||
name: 'Outgoing Message',
|
||||
},
|
||||
];
|
||||
|
||||
export const automationToSubmit = {
|
||||
name: 'Fayaz',
|
||||
description: 'Hello',
|
||||
event_name: 'conversation_created',
|
||||
conditions: [
|
||||
{
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: [{ id: 'open', name: 'Open' }],
|
||||
query_operator: 'and',
|
||||
custom_attribute_type: '',
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{ action_name: 'add_label', action_params: [{ id: 2, name: 'testlabel' }] },
|
||||
],
|
||||
};
|
||||
|
||||
export const savedAutomation = {
|
||||
id: 165,
|
||||
account_id: 1,
|
||||
name: 'Fayaz',
|
||||
description: 'Hello',
|
||||
event_name: 'conversation_created',
|
||||
conditions: [
|
||||
{
|
||||
values: ['open'],
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
action_name: 'add_label',
|
||||
action_params: [2],
|
||||
},
|
||||
],
|
||||
created_on: 1652776043,
|
||||
active: true,
|
||||
};
|
||||
|
||||
export const contactAttrs = [
|
||||
{
|
||||
key: 'contact_list',
|
||||
name: 'Contact List',
|
||||
inputType: 'search_select',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export const conversationAttrs = [
|
||||
{
|
||||
key: 'text_attr',
|
||||
name: 'Text Attr',
|
||||
inputType: 'plain_text',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
{
|
||||
value: 'is_present',
|
||||
label: 'Is present',
|
||||
},
|
||||
{
|
||||
value: 'is_not_present',
|
||||
label: 'Is not present',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export const expectedOutputForCustomAttributeGenerator = [
|
||||
{
|
||||
key: 'conversation_custom_attribute',
|
||||
name: 'Conversation Custom Attributes',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: 'text_attr',
|
||||
name: 'Text Attr',
|
||||
inputType: 'plain_text',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
{ value: 'is_present', label: 'Is present' },
|
||||
{ value: 'is_not_present', label: 'Is not present' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'contact_custom_attribute',
|
||||
name: 'Contact Custom Attributes',
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
key: 'contact_list',
|
||||
name: 'Contact List',
|
||||
inputType: 'search_select',
|
||||
filterOperators: [
|
||||
{ value: 'equal_to', label: 'Equal to' },
|
||||
{ value: 'not_equal_to', label: 'Not equal to' },
|
||||
],
|
||||
},
|
||||
];
|
||||
export const slaPolicies = [
|
||||
{
|
||||
id: 1,
|
||||
account_id: 1,
|
||||
name: 'Low',
|
||||
first_response_time_threshold: 60,
|
||||
next_response_time_threshold: 120,
|
||||
resolution_time_threshold: 240,
|
||||
created_at: '2022-01-26T08:06:39.470Z',
|
||||
updated_at: '2022-01-26T08:06:39.470Z',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
account_id: 1,
|
||||
name: 'Medium',
|
||||
first_response_time_threshold: 30,
|
||||
next_response_time_threshold: 60,
|
||||
resolution_time_threshold: 120,
|
||||
created_at: '2022-01-26T08:06:39.470Z',
|
||||
updated_at: '2022-01-26T08:06:39.470Z',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
account_id: 1,
|
||||
name: 'High',
|
||||
first_response_time_threshold: 15,
|
||||
next_response_time_threshold: 30,
|
||||
resolution_time_threshold: 60,
|
||||
created_at: '2022-01-26T08:06:39.470Z',
|
||||
updated_at: '2022-01-26T08:06:39.470Z',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
account_id: 1,
|
||||
name: 'Urgent',
|
||||
first_response_time_threshold: 5,
|
||||
next_response_time_threshold: 10,
|
||||
resolution_time_threshold: 20,
|
||||
created_at: '2022-01-26T08:06:39.470Z',
|
||||
updated_at: '2022-01-26T08:06:39.470Z',
|
||||
},
|
||||
];
|
||||
@@ -1,323 +0,0 @@
|
||||
import * as helpers from 'dashboard/helper/automationHelper';
|
||||
import {
|
||||
OPERATOR_TYPES_1,
|
||||
OPERATOR_TYPES_3,
|
||||
OPERATOR_TYPES_4,
|
||||
} from 'dashboard/routes/dashboard/settings/automation/operators';
|
||||
import {
|
||||
customAttributes,
|
||||
labels,
|
||||
automation,
|
||||
contactAttrs,
|
||||
conversationAttrs,
|
||||
expectedOutputForCustomAttributeGenerator,
|
||||
} from './automationFixtures';
|
||||
import { AUTOMATIONS } from 'dashboard/routes/dashboard/settings/automation/constants';
|
||||
|
||||
describe('automationMethodsMixin', () => {
|
||||
it('getCustomAttributeInputType returns the attribute input type', () => {
|
||||
expect(helpers.getCustomAttributeInputType('date')).toEqual('date');
|
||||
expect(helpers.getCustomAttributeInputType('date')).not.toEqual(
|
||||
'some_random_value'
|
||||
);
|
||||
expect(helpers.getCustomAttributeInputType('text')).toEqual('plain_text');
|
||||
expect(helpers.getCustomAttributeInputType('list')).toEqual(
|
||||
'search_select'
|
||||
);
|
||||
expect(helpers.getCustomAttributeInputType('checkbox')).toEqual(
|
||||
'search_select'
|
||||
);
|
||||
expect(helpers.getCustomAttributeInputType('some_random_text')).toEqual(
|
||||
'plain_text'
|
||||
);
|
||||
});
|
||||
it('isACustomAttribute returns the custom attribute value if true', () => {
|
||||
expect(
|
||||
helpers.isACustomAttribute(customAttributes, 'signed_up_at')
|
||||
).toBeTruthy();
|
||||
expect(helpers.isACustomAttribute(customAttributes, 'status')).toBeFalsy();
|
||||
});
|
||||
it('getCustomAttributeListDropdownValues returns the attribute dropdown values', () => {
|
||||
const myListValues = [
|
||||
{
|
||||
id: 'item1',
|
||||
name: 'item1',
|
||||
},
|
||||
{
|
||||
id: 'item2',
|
||||
name: 'item2',
|
||||
},
|
||||
{
|
||||
id: 'item3',
|
||||
name: 'item3',
|
||||
},
|
||||
];
|
||||
expect(
|
||||
helpers.getCustomAttributeListDropdownValues(customAttributes, 'my_list')
|
||||
).toEqual(myListValues);
|
||||
});
|
||||
|
||||
it('isCustomAttributeCheckbox checks if attribute is a checkbox', () => {
|
||||
expect(
|
||||
helpers.isCustomAttributeCheckbox(customAttributes, 'prime_user')
|
||||
.attribute_display_type
|
||||
).toEqual('checkbox');
|
||||
expect(
|
||||
helpers.isCustomAttributeCheckbox(customAttributes, 'my_check')
|
||||
.attribute_display_type
|
||||
).toEqual('checkbox');
|
||||
expect(
|
||||
helpers.isCustomAttributeCheckbox(customAttributes, 'my_list')
|
||||
).not.toEqual('checkbox');
|
||||
});
|
||||
it('isCustomAttributeList checks if attribute is a list', () => {
|
||||
expect(
|
||||
helpers.isCustomAttributeList(customAttributes, 'my_list')
|
||||
.attribute_display_type
|
||||
).toEqual('list');
|
||||
});
|
||||
it('getOperatorTypes returns the correct custom attribute operators', () => {
|
||||
expect(helpers.getOperatorTypes('list')).toEqual(OPERATOR_TYPES_1);
|
||||
expect(helpers.getOperatorTypes('text')).toEqual(OPERATOR_TYPES_3);
|
||||
expect(helpers.getOperatorTypes('number')).toEqual(OPERATOR_TYPES_1);
|
||||
expect(helpers.getOperatorTypes('link')).toEqual(OPERATOR_TYPES_1);
|
||||
expect(helpers.getOperatorTypes('date')).toEqual(OPERATOR_TYPES_4);
|
||||
expect(helpers.getOperatorTypes('checkbox')).toEqual(OPERATOR_TYPES_1);
|
||||
expect(helpers.getOperatorTypes('some_random')).toEqual(OPERATOR_TYPES_1);
|
||||
});
|
||||
it('generateConditionOptions returns expected conditions options array', () => {
|
||||
const testConditions = [
|
||||
{
|
||||
id: 123,
|
||||
title: 'Fayaz',
|
||||
email: 'test@test.com',
|
||||
},
|
||||
{
|
||||
title: 'John',
|
||||
id: 324,
|
||||
email: 'test@john.com',
|
||||
},
|
||||
];
|
||||
|
||||
const expectedConditions = [
|
||||
{
|
||||
id: 123,
|
||||
name: 'Fayaz',
|
||||
},
|
||||
{
|
||||
id: 324,
|
||||
name: 'John',
|
||||
},
|
||||
];
|
||||
expect(helpers.generateConditionOptions(testConditions)).toEqual(
|
||||
expectedConditions
|
||||
);
|
||||
});
|
||||
it('getActionOptions returns expected actions options array', () => {
|
||||
const expectedOptions = [
|
||||
{
|
||||
id: 'testlabel',
|
||||
name: 'testlabel',
|
||||
},
|
||||
{
|
||||
id: 'snoozes',
|
||||
name: 'snoozes',
|
||||
},
|
||||
];
|
||||
expect(helpers.getActionOptions({ labels, type: 'add_label' })).toEqual(
|
||||
expectedOptions
|
||||
);
|
||||
});
|
||||
it('getConditionOptions returns expected conditions options', () => {
|
||||
const testOptions = [
|
||||
{
|
||||
id: 'open',
|
||||
name: 'Open',
|
||||
},
|
||||
{
|
||||
id: 'resolved',
|
||||
name: 'Resolved',
|
||||
},
|
||||
{
|
||||
id: 'pending',
|
||||
name: 'Pending',
|
||||
},
|
||||
{
|
||||
id: 'snoozed',
|
||||
name: 'Snoozed',
|
||||
},
|
||||
{
|
||||
id: 'all',
|
||||
name: 'All',
|
||||
},
|
||||
];
|
||||
const expectedOptions = [
|
||||
{
|
||||
id: 'open',
|
||||
name: 'Open',
|
||||
},
|
||||
{
|
||||
id: 'resolved',
|
||||
name: 'Resolved',
|
||||
},
|
||||
{
|
||||
id: 'pending',
|
||||
name: 'Pending',
|
||||
},
|
||||
{
|
||||
id: 'snoozed',
|
||||
name: 'Snoozed',
|
||||
},
|
||||
{
|
||||
id: 'all',
|
||||
name: 'All',
|
||||
},
|
||||
];
|
||||
expect(
|
||||
helpers.getConditionOptions({
|
||||
customAttributes,
|
||||
campaigns: [],
|
||||
statusFilterOptions: testOptions,
|
||||
type: 'status',
|
||||
})
|
||||
).toEqual(expectedOptions);
|
||||
});
|
||||
it('getFileName returns the correct file name', () => {
|
||||
expect(
|
||||
helpers.getFileName(automation.actions[0], automation.files)
|
||||
).toEqual('pfp.jpeg');
|
||||
});
|
||||
it('getDefaultConditions returns the resp default condition model', () => {
|
||||
const messageCreatedModel = [
|
||||
{
|
||||
attribute_key: 'message_type',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
custom_attribute_type: '',
|
||||
},
|
||||
];
|
||||
const genericConditionModel = [
|
||||
{
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
custom_attribute_type: '',
|
||||
},
|
||||
];
|
||||
expect(helpers.getDefaultConditions('message_created')).toEqual(
|
||||
messageCreatedModel
|
||||
);
|
||||
expect(helpers.getDefaultConditions()).toEqual(genericConditionModel);
|
||||
});
|
||||
it('getDefaultActions returns the resp default action model', () => {
|
||||
const genericActionModel = [
|
||||
{
|
||||
action_name: 'assign_agent',
|
||||
action_params: [],
|
||||
},
|
||||
];
|
||||
expect(helpers.getDefaultActions()).toEqual(genericActionModel);
|
||||
});
|
||||
it('filterCustomAttributes filters the raw custom attributes', () => {
|
||||
const filteredAttributes = [
|
||||
{ key: 'signed_up_at', name: 'Signed Up At', type: 'date' },
|
||||
{ key: 'prime_user', name: 'Prime User', type: 'checkbox' },
|
||||
{ key: 'test', name: 'Test', type: 'text' },
|
||||
{ key: 'link', name: 'Link', type: 'link' },
|
||||
{ key: 'my_list', name: 'My List', type: 'list' },
|
||||
{ key: 'my_check', name: 'My Check', type: 'checkbox' },
|
||||
{ key: 'conlist', name: 'ConList', type: 'list' },
|
||||
{ key: 'asdf', name: 'asdf', type: 'link' },
|
||||
];
|
||||
expect(helpers.filterCustomAttributes(customAttributes)).toEqual(
|
||||
filteredAttributes
|
||||
);
|
||||
});
|
||||
it('getStandardAttributeInputType returns the resp default action model', () => {
|
||||
expect(
|
||||
helpers.getStandardAttributeInputType(
|
||||
AUTOMATIONS,
|
||||
'message_created',
|
||||
'message_type'
|
||||
)
|
||||
).toEqual('search_select');
|
||||
expect(
|
||||
helpers.getStandardAttributeInputType(
|
||||
AUTOMATIONS,
|
||||
'conversation_created',
|
||||
'status'
|
||||
)
|
||||
).toEqual('multi_select');
|
||||
expect(
|
||||
helpers.getStandardAttributeInputType(
|
||||
AUTOMATIONS,
|
||||
'conversation_updated',
|
||||
'referer'
|
||||
)
|
||||
).toEqual('plain_text');
|
||||
});
|
||||
it('generateAutomationPayload returns the resp default action model', () => {
|
||||
const testPayload = {
|
||||
name: 'Test',
|
||||
description: 'This is a test',
|
||||
event_name: 'conversation_created',
|
||||
conditions: [
|
||||
{
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: [{ id: 'open', name: 'Open' }],
|
||||
query_operator: 'and',
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
action_name: 'add_label',
|
||||
action_params: [{ id: 2, name: 'testlabel' }],
|
||||
},
|
||||
],
|
||||
};
|
||||
const expectedPayload = {
|
||||
name: 'Test',
|
||||
description: 'This is a test',
|
||||
event_name: 'conversation_created',
|
||||
conditions: [
|
||||
{
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: ['open'],
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
action_name: 'add_label',
|
||||
action_params: [2],
|
||||
},
|
||||
],
|
||||
};
|
||||
expect(helpers.generateAutomationPayload(testPayload)).toEqual(
|
||||
expectedPayload
|
||||
);
|
||||
});
|
||||
it('isCustomAttribute returns the resp default action model', () => {
|
||||
const attrs = helpers.filterCustomAttributes(customAttributes);
|
||||
expect(helpers.isCustomAttribute(attrs, 'my_list')).toBeTruthy();
|
||||
expect(helpers.isCustomAttribute(attrs, 'my_check')).toBeTruthy();
|
||||
expect(helpers.isCustomAttribute(attrs, 'signed_up_at')).toBeTruthy();
|
||||
expect(helpers.isCustomAttribute(attrs, 'link')).toBeTruthy();
|
||||
expect(helpers.isCustomAttribute(attrs, 'prime_user')).toBeTruthy();
|
||||
expect(helpers.isCustomAttribute(attrs, 'hello')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('generateCustomAttributes generates and returns correct condition attribute', () => {
|
||||
expect(
|
||||
helpers.generateCustomAttributes(
|
||||
conversationAttrs,
|
||||
contactAttrs,
|
||||
'Conversation Custom Attributes',
|
||||
'Contact Custom Attributes'
|
||||
)
|
||||
).toEqual(expectedOutputForCustomAttributeGenerator);
|
||||
});
|
||||
});
|
||||
@@ -1,463 +0,0 @@
|
||||
import methodsMixin from '../../../dashboard/mixins/automations/methodsMixin';
|
||||
import validationsMixin from '../../../dashboard/mixins/automations/validationsMixin';
|
||||
import {
|
||||
automation,
|
||||
customAttributes,
|
||||
agents,
|
||||
booleanFilterOptions,
|
||||
teams,
|
||||
labels,
|
||||
statusFilterOptions,
|
||||
campaigns,
|
||||
contacts,
|
||||
inboxes,
|
||||
languages,
|
||||
countries,
|
||||
slaPolicies,
|
||||
MESSAGE_CONDITION_VALUES,
|
||||
automationToSubmit,
|
||||
savedAutomation,
|
||||
} from './automationFixtures';
|
||||
import {
|
||||
AUTOMATIONS,
|
||||
AUTOMATION_ACTION_TYPES,
|
||||
} from '../../../dashboard/routes/dashboard/settings/automation/constants.js';
|
||||
|
||||
import { createWrapper, createLocalVue } from '@vue/test-utils';
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
const localVue = createLocalVue();
|
||||
localVue.use(Vuex);
|
||||
|
||||
// Vuelidate required to test submit method
|
||||
import Vuelidate from 'vuelidate';
|
||||
Vue.use(Vuelidate);
|
||||
|
||||
const createComponent = (
|
||||
mixins,
|
||||
data,
|
||||
// eslint-disable-next-line default-param-last
|
||||
computed = {},
|
||||
// eslint-disable-next-line default-param-last
|
||||
methods = {},
|
||||
validations
|
||||
) => {
|
||||
const Component = {
|
||||
render() {},
|
||||
mixins,
|
||||
data,
|
||||
computed,
|
||||
methods,
|
||||
validations,
|
||||
};
|
||||
const Constructor = Vue.extend(Component);
|
||||
const vm = new Constructor().$mount();
|
||||
return createWrapper(vm);
|
||||
};
|
||||
|
||||
const generateComputedProperties = () => {
|
||||
return {
|
||||
statusFilterOptions() {
|
||||
return statusFilterOptions;
|
||||
},
|
||||
agents() {
|
||||
return agents;
|
||||
},
|
||||
customAttributes() {
|
||||
return customAttributes;
|
||||
},
|
||||
labels() {
|
||||
return labels;
|
||||
},
|
||||
teams() {
|
||||
return teams;
|
||||
},
|
||||
booleanFilterOptions() {
|
||||
return booleanFilterOptions;
|
||||
},
|
||||
campaigns() {
|
||||
return campaigns;
|
||||
},
|
||||
contacts() {
|
||||
return contacts;
|
||||
},
|
||||
inboxes() {
|
||||
return inboxes;
|
||||
},
|
||||
languages() {
|
||||
return languages;
|
||||
},
|
||||
countries() {
|
||||
return countries;
|
||||
},
|
||||
slaPolicies() {
|
||||
return slaPolicies;
|
||||
},
|
||||
MESSAGE_CONDITION_VALUES() {
|
||||
return MESSAGE_CONDITION_VALUES;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
describe('automationMethodsMixin', () => {
|
||||
it('getFileName returns the correct file name', () => {
|
||||
const data = () => {
|
||||
return {};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
expect(
|
||||
wrapper.vm.getFileName(automation.actions[0], automation.files)
|
||||
).toEqual(automation.files[0].filename);
|
||||
});
|
||||
|
||||
it('getAttributes returns all attributes', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
automationTypes: AUTOMATIONS,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
expect(wrapper.vm.getAttributes('conversation_created')).toEqual(
|
||||
AUTOMATIONS.conversation_created.conditions
|
||||
);
|
||||
});
|
||||
|
||||
it('getAttributes returns all respective attributes', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
allCustomAttributes: customAttributes,
|
||||
automationTypes: AUTOMATIONS,
|
||||
automation,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
expect(wrapper.vm.getInputType('status')).toEqual('multi_select');
|
||||
expect(wrapper.vm.getInputType('my_list')).toEqual('search_select');
|
||||
});
|
||||
|
||||
it('getOperators returns all respective operators', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
allCustomAttributes: customAttributes,
|
||||
automationTypes: AUTOMATIONS,
|
||||
automation,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
expect(wrapper.vm.getOperators('status')).toEqual(
|
||||
AUTOMATIONS.conversation_created.conditions[0].filterOperators
|
||||
);
|
||||
});
|
||||
|
||||
it('getAutomationType returns the correct automationType', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
automationTypes: AUTOMATIONS,
|
||||
automation,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
expect(wrapper.vm.getAutomationType('status')).toEqual(
|
||||
AUTOMATIONS[automation.event_name].conditions[0]
|
||||
);
|
||||
});
|
||||
|
||||
it('getConditionDropdownValues returns respective condition dropdown values', () => {
|
||||
const computed = generateComputedProperties();
|
||||
const data = () => {
|
||||
return {
|
||||
allCustomAttributes: customAttributes,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data, computed);
|
||||
expect(wrapper.vm.getConditionDropdownValues('status')).toEqual(
|
||||
statusFilterOptions
|
||||
);
|
||||
expect(wrapper.vm.getConditionDropdownValues('team_id')).toEqual(teams);
|
||||
expect(wrapper.vm.getConditionDropdownValues('assignee_id')).toEqual(
|
||||
agents
|
||||
);
|
||||
expect(wrapper.vm.getConditionDropdownValues('contact')).toEqual(contacts);
|
||||
expect(wrapper.vm.getConditionDropdownValues('inbox_id')).toEqual(inboxes);
|
||||
expect(wrapper.vm.getConditionDropdownValues('campaigns')).toEqual(
|
||||
campaigns
|
||||
);
|
||||
expect(wrapper.vm.getConditionDropdownValues('browser_language')).toEqual(
|
||||
languages
|
||||
);
|
||||
expect(wrapper.vm.getConditionDropdownValues('country_code')).toEqual(
|
||||
countries
|
||||
);
|
||||
expect(wrapper.vm.getConditionDropdownValues('message_type')).toEqual(
|
||||
MESSAGE_CONDITION_VALUES
|
||||
);
|
||||
});
|
||||
|
||||
it('appendNewCondition appends a new condition to the automation data property', () => {
|
||||
const condition = {
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
custom_attribute_type: '',
|
||||
};
|
||||
const data = () => {
|
||||
return {
|
||||
automation,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
wrapper.vm.appendNewCondition();
|
||||
expect(automation.conditions[automation.conditions.length - 1]).toEqual(
|
||||
condition
|
||||
);
|
||||
});
|
||||
|
||||
it('appendNewAction appends a new condition to the automation data property', () => {
|
||||
const action = {
|
||||
action_name: 'assign_agent',
|
||||
action_params: [],
|
||||
};
|
||||
const data = () => {
|
||||
return {
|
||||
automation,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
wrapper.vm.appendNewAction();
|
||||
expect(automation.actions[automation.actions.length - 1]).toEqual(action);
|
||||
});
|
||||
|
||||
it('removeFilter removes the given condition in the automation', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
automation,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
wrapper.vm.removeFilter(0);
|
||||
expect(automation.conditions.length).toEqual(1);
|
||||
});
|
||||
|
||||
it('removeAction removes the given action in the automation', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
automation,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
wrapper.vm.removeAction(0);
|
||||
expect(automation.actions.length).toEqual(1);
|
||||
});
|
||||
|
||||
it('resetFilter resets the current automation conditions', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
automation: automationToSubmit,
|
||||
automationTypes: AUTOMATIONS,
|
||||
};
|
||||
};
|
||||
const conditionAfterReset = {
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
custom_attribute_type: '',
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
wrapper.vm.resetFilter(0, automationToSubmit.conditions[0]);
|
||||
expect(automation.conditions[0]).toEqual(conditionAfterReset);
|
||||
});
|
||||
|
||||
it('showUserInput returns boolean value based on the operator type', () => {
|
||||
const data = () => {
|
||||
return {};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
expect(wrapper.vm.showUserInput('is_present')).toBeFalsy();
|
||||
expect(wrapper.vm.showUserInput('is_not_present')).toBeFalsy();
|
||||
expect(wrapper.vm.showUserInput('equal_to')).toBeTruthy();
|
||||
expect(wrapper.vm.showUserInput('not_equal_to')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('showActionInput returns boolean value based on the action type', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
automationActionTypes: AUTOMATION_ACTION_TYPES,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
expect(wrapper.vm.showActionInput('send_email_to_team')).toBeFalsy();
|
||||
expect(wrapper.vm.showActionInput('send_message')).toBeFalsy();
|
||||
expect(wrapper.vm.showActionInput('send_webhook_event')).toBeTruthy();
|
||||
expect(wrapper.vm.showActionInput('resolve_conversation')).toBeFalsy();
|
||||
expect(wrapper.vm.showActionInput('add_label')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('resetAction resets the action to default state', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
automation,
|
||||
};
|
||||
};
|
||||
const wrapper = createComponent([methodsMixin], data);
|
||||
wrapper.vm.resetAction(0);
|
||||
expect(automation.actions[0].action_params).toEqual([]);
|
||||
});
|
||||
|
||||
it('manifestConditions resets the action to default state', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
automation: {},
|
||||
allCustomAttributes: customAttributes,
|
||||
automationTypes: AUTOMATIONS,
|
||||
};
|
||||
};
|
||||
const methods = {
|
||||
getConditionDropdownValues() {
|
||||
return statusFilterOptions;
|
||||
},
|
||||
};
|
||||
|
||||
const manifestedConditions = [
|
||||
{
|
||||
values: [
|
||||
{
|
||||
id: 'open',
|
||||
name: 'Open',
|
||||
},
|
||||
],
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
query_operator: 'and',
|
||||
},
|
||||
];
|
||||
const wrapper = createComponent([methodsMixin], data, {}, methods);
|
||||
expect(wrapper.vm.manifestConditions(savedAutomation)).toEqual(
|
||||
manifestedConditions
|
||||
);
|
||||
});
|
||||
|
||||
it('generateActionsArray return the manifested actions array', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
automationActionTypes: AUTOMATION_ACTION_TYPES,
|
||||
};
|
||||
};
|
||||
const computed = {
|
||||
agents() {
|
||||
return agents;
|
||||
},
|
||||
labels() {
|
||||
return labels;
|
||||
},
|
||||
teams() {
|
||||
return teams;
|
||||
},
|
||||
};
|
||||
|
||||
const methods = {
|
||||
getActionDropdownValues() {
|
||||
return [
|
||||
{
|
||||
id: 2,
|
||||
name: 'testlabel',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'snoozes',
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
const testAction = {
|
||||
action_name: 'add_label',
|
||||
action_params: [2],
|
||||
};
|
||||
|
||||
const expectedActionArray = [
|
||||
{
|
||||
id: 2,
|
||||
name: 'testlabel',
|
||||
},
|
||||
];
|
||||
|
||||
const wrapper = createComponent([methodsMixin], data, computed, methods);
|
||||
expect(wrapper.vm.generateActionsArray(testAction)).toEqual(
|
||||
expectedActionArray
|
||||
);
|
||||
});
|
||||
|
||||
it('manifestActions manifest the received action and generate the correct array', () => {
|
||||
const data = () => {
|
||||
return {
|
||||
automation: {},
|
||||
allCustomAttributes: customAttributes,
|
||||
automationTypes: AUTOMATIONS,
|
||||
};
|
||||
};
|
||||
const methods = {
|
||||
generateActionsArray() {
|
||||
return [
|
||||
{
|
||||
id: 2,
|
||||
name: 'testlabel',
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
const expectedActions = [
|
||||
{
|
||||
action_name: 'add_label',
|
||||
action_params: [
|
||||
{
|
||||
id: 2,
|
||||
name: 'testlabel',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const wrapper = createComponent([methodsMixin], data, {}, methods);
|
||||
expect(wrapper.vm.manifestActions(savedAutomation)).toEqual(
|
||||
expectedActions
|
||||
);
|
||||
});
|
||||
|
||||
it('getActionDropdownValues returns Action dropdown Values', () => {
|
||||
const data = () => {
|
||||
return {};
|
||||
};
|
||||
const computed = {
|
||||
agents() {
|
||||
return agents;
|
||||
},
|
||||
labels() {
|
||||
return labels;
|
||||
},
|
||||
teams() {
|
||||
return teams;
|
||||
},
|
||||
slaPolicies() {
|
||||
return slaPolicies;
|
||||
},
|
||||
};
|
||||
const expectedActionDropdownValues = [
|
||||
{ id: 'testlabel', name: 'testlabel' },
|
||||
{ id: 'snoozes', name: 'snoozes' },
|
||||
];
|
||||
const wrapper = createComponent([methodsMixin], data, computed);
|
||||
expect(wrapper.vm.getActionDropdownValues('add_label')).toEqual(
|
||||
expectedActionDropdownValues
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('automationValidationsMixin', () => {
|
||||
it('automationValidationsMixin is present', () => {
|
||||
const data = () => {
|
||||
return {};
|
||||
};
|
||||
const wrapper = createComponent([validationsMixin], data, {}, {});
|
||||
expect(typeof wrapper.vm.$options.validations).toBe('object');
|
||||
});
|
||||
});
|
||||
@@ -1,17 +0,0 @@
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import messageFormatterMixin from '../messageFormatterMixin';
|
||||
|
||||
describe('messageFormatterMixin', () => {
|
||||
it('returns correct plain text', () => {
|
||||
const Component = {
|
||||
render() {},
|
||||
mixins: [messageFormatterMixin],
|
||||
};
|
||||
const wrapper = shallowMount(Component);
|
||||
const message =
|
||||
'<b>Chatwoot is an opensource tool. https://www.chatwoot.com</b>';
|
||||
expect(wrapper.vm.getPlainText(message)).toMatch(
|
||||
'Chatwoot is an opensource tool. https://www.chatwoot.com'
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -1,26 +0,0 @@
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import rtlMixin from 'shared/mixins/rtlMixin';
|
||||
|
||||
describe('rtlMixin', () => {
|
||||
const createComponent = rtl_view => {
|
||||
return shallowMount({
|
||||
render() {},
|
||||
mixins: [rtlMixin],
|
||||
computed: {
|
||||
uiSettings() {
|
||||
return { rtl_view };
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
it('returns is direction right-to-left view', () => {
|
||||
const wrapper = createComponent(true);
|
||||
expect(wrapper.vm.isRTLView).toBe(true);
|
||||
});
|
||||
|
||||
it('returns is direction left-to-right view', () => {
|
||||
const wrapper = createComponent(false);
|
||||
expect(wrapper.vm.isRTLView).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -3,11 +3,10 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
|
||||
import { templates } from './fixtures';
|
||||
const localVue = createLocalVue();
|
||||
import VueI18n from 'vue-i18n';
|
||||
import Vuelidate from 'vuelidate';
|
||||
import i18n from 'dashboard/i18n';
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
localVue.use(VueI18n);
|
||||
localVue.use(Vuelidate);
|
||||
|
||||
const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
|
||||
const config = {
|
||||
@@ -20,30 +19,32 @@ const config = {
|
||||
};
|
||||
|
||||
describe('#WhatsAppTemplates', () => {
|
||||
it('returns all variables from a template string', () => {
|
||||
it('returns all variables from a template string', async () => {
|
||||
const wrapper = shallowMount(TemplateParser, {
|
||||
...config,
|
||||
propsData: { template: templates[0] },
|
||||
});
|
||||
await nextTick();
|
||||
expect(wrapper.vm.variables).toEqual(['{{1}}', '{{2}}', '{{3}}']);
|
||||
});
|
||||
|
||||
it('returns no variables from a template string if it does not contain variables', () => {
|
||||
it('returns no variables from a template string if it does not contain variables', async () => {
|
||||
const wrapper = shallowMount(TemplateParser, {
|
||||
...config,
|
||||
propsData: { template: templates[12] },
|
||||
});
|
||||
await nextTick();
|
||||
expect(wrapper.vm.variables).toBeNull();
|
||||
});
|
||||
|
||||
it('returns the body of a template', () => {
|
||||
it('returns the body of a template', async () => {
|
||||
const wrapper = shallowMount(TemplateParser, {
|
||||
...config,
|
||||
propsData: { template: templates[1] },
|
||||
});
|
||||
const expectedOutput = templates[1].components.find(
|
||||
i => i.type === 'BODY'
|
||||
).text;
|
||||
await nextTick();
|
||||
const expectedOutput =
|
||||
templates[1].components.find(i => i.type === 'BODY')?.text || '';
|
||||
expect(wrapper.vm.templateString).toEqual(expectedOutput);
|
||||
});
|
||||
|
||||
@@ -51,14 +52,12 @@ describe('#WhatsAppTemplates', () => {
|
||||
const wrapper = shallowMount(TemplateParser, {
|
||||
...config,
|
||||
propsData: { template: templates[0] },
|
||||
data: () => {
|
||||
return { processedParams: {} };
|
||||
},
|
||||
});
|
||||
await nextTick();
|
||||
await wrapper.setData({
|
||||
processedParams: { 1: 'abc', 2: 'xyz', 3: 'qwerty' },
|
||||
});
|
||||
await wrapper.vm.$nextTick();
|
||||
await nextTick();
|
||||
const expectedOutput =
|
||||
'Esta é a sua confirmação de voo para abc-xyz em qwerty.';
|
||||
expect(wrapper.vm.processedString).toEqual(expectedOutput);
|
||||
|
||||
Reference in New Issue
Block a user