diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js
index 062ae2783..24a81ee20 100644
--- a/app/javascript/dashboard/components/index.js
+++ b/app/javascript/dashboard/components/index.js
@@ -1,10 +1,11 @@
/* eslint no-plusplus: 0 */
/* eslint-env browser */
-
+import AvatarUploader from './widgets/forms/AvatarUploader.vue';
import Bar from './widgets/chart/BarChart';
import Code from './Code';
import ColorPicker from './widgets/ColorPicker';
import DeleteModal from './widgets/modal/DeleteModal.vue';
+import Input from './widgets/forms/Input.vue';
import LoadingState from './widgets/LoadingState';
import Modal from './Modal';
import ModalHeader from './ModalHeader';
@@ -14,12 +15,15 @@ import Spinner from 'shared/components/Spinner';
import SubmitButton from './buttons/FormSubmitButton';
import Tabs from './ui/Tabs/Tabs';
import TabsItem from './ui/Tabs/TabsItem';
+import Thumbnail from './widgets/Thumbnail.vue';
const WootUIKit = {
+ AvatarUploader,
Bar,
Code,
ColorPicker,
DeleteModal,
+ Input,
LoadingState,
Modal,
ModalHeader,
@@ -29,6 +33,7 @@ const WootUIKit = {
SubmitButton,
Tabs,
TabsItem,
+ Thumbnail,
install(Vue) {
const keys = Object.keys(this);
keys.pop(); // remove 'install' from keys
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 9110939ea..25b707c04 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -105,6 +105,15 @@ export default {
return `user-thumbnail ${classname}`;
},
},
+ watch: {
+ src: {
+ handler(value, oldValue) {
+ if (value !== oldValue && this.imgError) {
+ this.imgError = false;
+ }
+ },
+ },
+ },
methods: {
onImgError() {
this.imgError = true;
diff --git a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
new file mode 100644
index 000000000..d0bfc5596
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
diff --git a/app/javascript/dashboard/components/widgets/forms/Input.vue b/app/javascript/dashboard/components/widgets/forms/Input.vue
new file mode 100644
index 000000000..db8dcb130
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/forms/Input.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index da8465626..514391664 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -44,6 +44,9 @@
"TITLE": "Website channel",
"DESC": "Create a channel for your website and start supporting your customers via our website widget.",
"LOADING_MESSAGE": "Creating Website Support Channel",
+ "CHANNEL_AVATAR": {
+ "LABEL": "Channel Avatar"
+ },
"CHANNEL_NAME": {
"LABEL": "Website Name",
"PLACEHOLDER": "Enter your website name (eg: Acme Inc)"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index b152a6364..b36756b6e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -10,110 +10,89 @@
:title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
{
this.fetchAttachedAgents();
+ this.avatarUrl = this.inbox.avatar_url;
this.selectedInboxName = this.inbox.name;
this.autoAssignment = this.inbox.enable_auto_assignment;
this.channelWebsiteUrl = this.inbox.website_url;
@@ -296,7 +290,7 @@ export default {
},
async updateInbox() {
try {
- await this.$store.dispatch('inboxes/updateInbox', {
+ const payload = {
id: this.currentInboxId,
name: this.selectedInboxName,
enable_auto_assignment: this.autoAssignment,
@@ -307,12 +301,21 @@ export default {
welcome_tagline: this.channelWelcomeTagline,
agent_away_message: this.channelAgentAwayMessage,
},
- });
+ };
+ if (this.avatarFile) {
+ payload.avatar = this.avatarFile;
+ }
+ await this.$store.dispatch('inboxes/updateInbox', payload);
this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
} catch (error) {
this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
}
},
+ handleImageUpload({ file, url }) {
+ this.avatarFile = file;
+ this.avatarUrl = url;
+ console.log(this.avatarUrl);
+ },
},
validations: {
selectedAgents: {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
index 1e955e1d7..644eb10a1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue
@@ -141,7 +141,7 @@ export default {
channel: {
type: 'web_widget',
website_url: this.channelWebsiteUrl,
- widget_color: this.channelWidgetColor.hex,
+ widget_color: this.channelWidgetColor,
welcome_title: this.channelWelcomeTitle,
welcome_tagline: this.channelWelcomeTagline,
agent_away_message: this.channelAgentAwayMessage,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
index 883ede7df..03944cd2a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
@@ -9,17 +9,11 @@
{{ $t('PROFILE_SETTINGS.FORM.PROFILE_SECTION.NOTE') }}
-
+