diff --git a/app/javascript/entrypoints/sdk.js b/app/javascript/entrypoints/sdk.js index a2cf297f1..2a919f42c 100755 --- a/app/javascript/entrypoints/sdk.js +++ b/app/javascript/entrypoints/sdk.js @@ -72,6 +72,13 @@ const runSDK = ({ baseUrl, websiteToken }) => { widgetStyle: getWidgetStyle(chatwootSettings.widgetStyle) || 'standard', resetTriggered: false, darkMode: getDarkMode(chatwootSettings.darkMode), + welcomeTitle: chatwootSettings.welcomeTitle || '', + welcomeDescription: chatwootSettings.welcomeDescription || '', + availableMessage: chatwootSettings.availableMessage || '', + unavailableMessage: chatwootSettings.unavailableMessage || '', + enableFileUpload: chatwootSettings.enableFileUpload ?? true, + enableEmojiPicker: chatwootSettings.enableEmojiPicker ?? true, + enableEndConversation: chatwootSettings.enableEndConversation ?? true, toggle(state) { IFrameHelper.events.toggleBubble(state); diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js index 469fbe8de..3ab1ba1f5 100644 --- a/app/javascript/sdk/IFrameHelper.js +++ b/app/javascript/sdk/IFrameHelper.js @@ -166,6 +166,13 @@ export const IFrameHelper = { darkMode: window.$chatwoot.darkMode, showUnreadMessagesDialog: window.$chatwoot.showUnreadMessagesDialog, campaignsSnoozedTill, + welcomeTitle: window.$chatwoot.welcomeTitle, + welcomeDescription: window.$chatwoot.welcomeDescription, + availableMessage: window.$chatwoot.availableMessage, + unavailableMessage: window.$chatwoot.unavailableMessage, + enableFileUpload: window.$chatwoot.enableFileUpload, + enableEmojiPicker: window.$chatwoot.enableEmojiPicker, + enableEndConversation: window.$chatwoot.enableEndConversation, }); IFrameHelper.onLoad({ widgetColor: message.config.channelConfig.widgetColor, diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue index ac5a54127..64a20bcc7 100755 --- a/app/javascript/widget/components/ChatAttachment.vue +++ b/app/javascript/widget/components/ChatAttachment.vue @@ -24,7 +24,10 @@ export default { return { isUploading: false }; }, computed: { - ...mapGetters({ globalConfig: 'globalConfig/get' }), + ...mapGetters({ + globalConfig: 'globalConfig/get', + shouldShowFilePicker: 'appConfig/getShouldShowFilePicker', + }), fileUploadSizeLimit() { return MAXIMUM_FILE_UPLOAD_SIZE; }, @@ -40,6 +43,9 @@ export default { }, methods: { handleClipboardPaste(e) { + // If file picker is not enabled, do not allow paste + if (!this.shouldShowFilePicker) return; + const items = (e.clipboardData || e.originalEvent.clipboardData).items; // items is a DataTransferItemList object which does not have forEach method const itemsArray = Array.from(items); diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue index 6d8ac4a96..e89b1aef0 100755 --- a/app/javascript/widget/components/ChatHeaderExpanded.vue +++ b/app/javascript/widget/components/ChatHeaderExpanded.vue @@ -47,11 +47,11 @@ const containerClasses = computed(() => [

diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue index 64997eed8..c423ab220 100755 --- a/app/javascript/widget/components/ChatInputWrap.vue +++ b/app/javascript/widget/components/ChatInputWrap.vue @@ -41,9 +41,15 @@ export default { ...mapGetters({ widgetColor: 'appConfig/getWidgetColor', isWidgetOpen: 'appConfig/getIsWidgetOpen', + shouldShowFilePicker: 'appConfig/getShouldShowFilePicker', + shouldShowEmojiPicker: 'appConfig/getShouldShowEmojiPicker', }), showAttachment() { - return this.hasAttachmentsEnabled && this.userInput.length === 0; + return ( + this.shouldShowFilePicker && + this.hasAttachmentsEnabled && + this.userInput.length === 0 + ); }, showSendButton() { return this.userInput.length > 0; @@ -143,7 +149,7 @@ export default { :on-attach="onSendAttachment" /> 0; @@ -71,12 +78,8 @@ export default { >

-
- {{ - isOnline - ? $t('TEAM_AVAILABILITY.ONLINE') - : $t('TEAM_AVAILABILITY.OFFLINE') - }} +
+ {{ headerMessage }}
{{ replyWaitMessage }} diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue index 1b1e1e2fd..70eaf783b 100644 --- a/app/javascript/widget/components/layouts/ViewWithHeader.vue +++ b/app/javascript/widget/components/layouts/ViewWithHeader.vue @@ -119,8 +119,10 @@ export default { > diff --git a/app/javascript/widget/store/modules/appConfig.js b/app/javascript/widget/store/modules/appConfig.js index 44a13c4c4..3ad5078b8 100644 --- a/app/javascript/widget/store/modules/appConfig.js +++ b/app/javascript/widget/store/modules/appConfig.js @@ -21,6 +21,13 @@ const state = { widgetStyle: 'standard', darkMode: 'light', isUpdatingRoute: false, + welcomeTitle: '', + welcomeDescription: '', + availableMessage: '', + unavailableMessage: '', + enableFileUpload: true, + enableEmojiPicker: true, + enableEndConversation: true, }; export const getters = { @@ -34,6 +41,13 @@ export const getters = { darkMode: $state => $state.darkMode, getShowUnreadMessagesDialog: $state => $state.showUnreadMessagesDialog, getIsUpdatingRoute: _state => _state.isUpdatingRoute, + getWelcomeHeading: $state => $state.welcomeTitle, + getWelcomeTagline: $state => $state.welcomeDescription, + getAvailableMessage: $state => $state.availableMessage, + getUnavailableMessage: $state => $state.unavailableMessage, + getShouldShowFilePicker: $state => $state.enableFileUpload, + getShouldShowEmojiPicker: $state => $state.enableEmojiPicker, + getCanUserEndConversation: $state => $state.enableEndConversation, }; export const actions = { @@ -46,6 +60,13 @@ export const actions = { showUnreadMessagesDialog, widgetStyle = 'rounded', darkMode = 'light', + welcomeTitle = '', + welcomeDescription = '', + availableMessage = '', + unavailableMessage = '', + enableFileUpload = true, + enableEmojiPicker = true, + enableEndConversation = true, } ) { commit(SET_WIDGET_APP_CONFIG, { @@ -55,6 +76,13 @@ export const actions = { showUnreadMessagesDialog: !!showUnreadMessagesDialog, widgetStyle, darkMode, + welcomeTitle, + welcomeDescription, + availableMessage, + unavailableMessage, + enableFileUpload, + enableEmojiPicker, + enableEndConversation, }); }, toggleWidgetOpen({ commit }, isWidgetOpen) { @@ -90,6 +118,13 @@ export const mutations = { $state.darkMode = data.darkMode; $state.locale = data.locale || $state.locale; $state.showUnreadMessagesDialog = data.showUnreadMessagesDialog; + $state.welcomeTitle = data.welcomeTitle; + $state.welcomeDescription = data.welcomeDescription; + $state.availableMessage = data.availableMessage; + $state.unavailableMessage = data.unavailableMessage; + $state.enableFileUpload = data.enableFileUpload; + $state.enableEmojiPicker = data.enableEmojiPicker; + $state.enableEndConversation = data.enableEndConversation; }, [TOGGLE_WIDGET_OPEN]($state, isWidgetOpen) { $state.isWidgetOpen = isWidgetOpen; diff --git a/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js b/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js index 5d3db77bc..a6020cb84 100644 --- a/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js +++ b/app/javascript/widget/store/modules/specs/appConfig/getters.spec.js @@ -19,6 +19,48 @@ describe('#getters', () => { expect(getters.getShowUnreadMessagesDialog(state)).toEqual(true); }); }); + describe('#getAvailableMessage', () => { + it('returns correct value', () => { + const state = { availableMessage: 'We reply quickly' }; + expect(getters.getAvailableMessage(state)).toEqual('We reply quickly'); + }); + }); + describe('#getWelcomeHeading', () => { + it('returns correct value', () => { + const state = { welcomeTitle: 'Hello!' }; + expect(getters.getWelcomeHeading(state)).toEqual('Hello!'); + }); + }); + describe('#getWelcomeTagline', () => { + it('returns correct value', () => { + const state = { welcomeDescription: 'Welcome to our site' }; + expect(getters.getWelcomeTagline(state)).toEqual('Welcome to our site'); + }); + }); + describe('#getShouldShowFilePicker', () => { + it('returns correct value', () => { + const state = { enableFileUpload: true }; + expect(getters.getShouldShowFilePicker(state)).toEqual(true); + }); + }); + describe('#getShouldShowEmojiPicker', () => { + it('returns correct value', () => { + const state = { enableEmojiPicker: true }; + expect(getters.getShouldShowEmojiPicker(state)).toEqual(true); + }); + }); + describe('#getCanUserEndConversation', () => { + it('returns correct value', () => { + const state = { enableEndConversation: true }; + expect(getters.getCanUserEndConversation(state)).toEqual(true); + }); + }); + describe('#getUnavailableMessage', () => { + it('returns correct value', () => { + const state = { unavailableMessage: 'We are offline' }; + expect(getters.getUnavailableMessage(state)).toEqual('We are offline'); + }); + }); describe('#getIsUpdatingRoute', () => { it('returns correct value', () => { const state = { isUpdatingRoute: true };