From a6960dc2d38f64f02eb17af88c59ca3f50a24c48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Kube=C5=A1?= <46596180+KubesDavid@users.noreply.github.com> Date: Fri, 14 Oct 2022 05:43:11 +0200 Subject: [PATCH] chore: Refactor widget (#5621) --- app/javascript/widget/api/agent.js | 3 +-- app/javascript/widget/api/campaign.js | 3 +-- app/javascript/widget/api/conversation.js | 12 ++++-------- app/javascript/widget/assets/scss/woot.scss | 5 +---- app/javascript/widget/components/AgentMessage.vue | 3 +-- app/javascript/widget/components/ChatAttachment.vue | 4 ++-- .../widget/components/ChatHeaderExpanded.vue | 7 ++++++- app/javascript/widget/components/ChatInputWrap.vue | 4 +--- app/javascript/widget/components/FileBubble.vue | 3 +-- app/javascript/widget/components/PreChat/Form.vue | 7 ++----- .../widget/components/TeamAvailability.vue | 4 ++-- .../widget/components/UnreadMessageList.vue | 3 +-- app/javascript/widget/helpers/IframeEventHelper.js | 2 +- app/javascript/widget/helpers/utils.js | 11 +---------- .../widget/store/modules/conversation/getters.js | 6 ++---- .../widget/store/modules/conversation/helpers.js | 2 +- .../widget/store/modules/conversation/mutations.js | 3 +-- .../widget/store/modules/conversationLabels.js | 4 ++-- 18 files changed, 31 insertions(+), 55 deletions(-) diff --git a/app/javascript/widget/api/agent.js b/app/javascript/widget/api/agent.js index 0debeccaf..5dceecad7 100644 --- a/app/javascript/widget/api/agent.js +++ b/app/javascript/widget/api/agent.js @@ -3,6 +3,5 @@ import { API } from 'widget/helpers/axios'; export const getAvailableAgents = async websiteToken => { const urlData = endPoints.getAvailableAgents(websiteToken); - const result = await API.get(urlData.url, { params: urlData.params }); - return result; + return API.get(urlData.url, { params: urlData.params }); }; diff --git a/app/javascript/widget/api/campaign.js b/app/javascript/widget/api/campaign.js index 57d81e084..efa154f41 100644 --- a/app/javascript/widget/api/campaign.js +++ b/app/javascript/widget/api/campaign.js @@ -3,8 +3,7 @@ import { API } from 'widget/helpers/axios'; const getCampaigns = async websiteToken => { const urlData = endPoints.getCampaigns(websiteToken); - const result = await API.get(urlData.url, { params: urlData.params }); - return result; + return API.get(urlData.url, { params: urlData.params }); }; const triggerCampaign = async ({ diff --git a/app/javascript/widget/api/conversation.js b/app/javascript/widget/api/conversation.js index fdb3842fd..4cf4de25e 100755 --- a/app/javascript/widget/api/conversation.js +++ b/app/javascript/widget/api/conversation.js @@ -3,26 +3,22 @@ import { API } from 'widget/helpers/axios'; const createConversationAPI = async content => { const urlData = endPoints.createConversation(content); - const result = await API.post(urlData.url, urlData.params); - return result; + return API.post(urlData.url, urlData.params); }; const sendMessageAPI = async content => { const urlData = endPoints.sendMessage(content); - const result = await API.post(urlData.url, urlData.params); - return result; + return API.post(urlData.url, urlData.params); }; const sendAttachmentAPI = async attachment => { const urlData = endPoints.sendAttachment(attachment); - const result = await API.post(urlData.url, urlData.params); - return result; + return API.post(urlData.url, urlData.params); }; const getMessagesAPI = async ({ before }) => { const urlData = endPoints.getConversation({ before }); - const result = await API.get(urlData.url, { params: urlData.params }); - return result; + return API.get(urlData.url, { params: urlData.params }); }; const getConversationAPI = async () => { diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss index 9a2a6a8e6..3f882eb38 100755 --- a/app/javascript/widget/assets/scss/woot.scss +++ b/app/javascript/widget/assets/scss/woot.scss @@ -61,10 +61,7 @@ body { .is-flat-design { .chat-bubble { - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; - border-top-left-radius: 0 !important; - border-top-right-radius: 0 !important; + border-radius: 0 !important; box-shadow: none; } diff --git a/app/javascript/widget/components/AgentMessage.vue b/app/javascript/widget/components/AgentMessage.vue index c338dce83..6b1fb782b 100755 --- a/app/javascript/widget/components/AgentMessage.vue +++ b/app/javascript/widget/components/AgentMessage.vue @@ -104,8 +104,7 @@ export default { ) { return false; } - if (!this.message.content) return false; - return true; + return this.message.content; }, readableTime() { const { created_at: createdAt = '' } = this.message; diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue index 87da3f5df..0412ca5fb 100755 --- a/app/javascript/widget/components/ChatAttachment.vue +++ b/app/javascript/widget/components/ChatAttachment.vue @@ -54,9 +54,9 @@ export default { }, async onFileUpload(file) { if (this.globalConfig.directUploadsEnabled) { - this.onDirectFileUpload(file); + await this.onDirectFileUpload(file); } else { - this.onIndirectFileUpload(file); + await this.onIndirectFileUpload(file); } }, async onDirectFileUpload(file) { diff --git a/app/javascript/widget/components/ChatHeaderExpanded.vue b/app/javascript/widget/components/ChatHeaderExpanded.vue index c1823f504..f82f66c46 100755 --- a/app/javascript/widget/components/ChatHeaderExpanded.vue +++ b/app/javascript/widget/components/ChatHeaderExpanded.vue @@ -7,7 +7,12 @@ class="flex items-start" :class="[avatarUrl ? 'justify-between' : 'justify-end']" > - + Avatar

{ - if ( + return !( (isUserEmailAvailable && field.name === 'emailAddress') || (isUserPhoneNumberAvailable && field.name === 'phoneNumber') - ) { - return false; - } - return true; + ); }); }, enabledPreChatFields() { diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue index 1f4c5d046..a3a6b0c02 100644 --- a/app/javascript/widget/components/TeamAvailability.vue +++ b/app/javascript/widget/components/TeamAvailability.vue @@ -13,7 +13,7 @@ }}
- {{ replyWaitMeessage }} + {{ replyWaitMessage }}
@@ -75,7 +75,7 @@ export default { } return anyAgentOnline; }, - replyWaitMeessage() { + replyWaitMessage() { const { workingHoursEnabled } = this.channelConfig; if (this.isOnline) { diff --git a/app/javascript/widget/components/UnreadMessageList.vue b/app/javascript/widget/components/UnreadMessageList.vue index 19afe49d1..6683c585e 100644 --- a/app/javascript/widget/components/UnreadMessageList.vue +++ b/app/javascript/widget/components/UnreadMessageList.vue @@ -107,13 +107,12 @@ export default { .clear-button { background: transparent; color: $color-woot; - padding: 0; border: 0; font-weight: $font-weight-bold; font-size: $font-size-medium; transition: all 0.3s var(--ease-in-cubic); margin-left: $space-smaller; - padding-right: $space-one; + padding: 0 $space-one 0 0; &:hover { transform: translateX($space-smaller); diff --git a/app/javascript/widget/helpers/IframeEventHelper.js b/app/javascript/widget/helpers/IframeEventHelper.js index 953802df8..40c0e1f1c 100644 --- a/app/javascript/widget/helpers/IframeEventHelper.js +++ b/app/javascript/widget/helpers/IframeEventHelper.js @@ -10,7 +10,7 @@ export const loadedEventConfig = () => { export const getExtraSpaceToScroll = () => { // This function calculates the extra space needed for the view to - // accomodate the height of close button + height of + // accommodate the height of close button + height of // read messages button. So that scrollbar won't appear const unreadMessageWrap = document.querySelector('.unread-messages'); const unreadCloseWrap = document.querySelector('.close-unread-wrap'); diff --git a/app/javascript/widget/helpers/utils.js b/app/javascript/widget/helpers/utils.js index 1a4b2c1d6..a4d5dafa3 100755 --- a/app/javascript/widget/helpers/utils.js +++ b/app/javascript/widget/helpers/utils.js @@ -3,13 +3,6 @@ import { WOOT_PREFIX } from './constants'; export const isEmptyObject = obj => Object.keys(obj).length === 0 && obj.constructor === Object; -export const arrayToHashById = array => - array.reduce((map, obj) => { - const newMap = map; - newMap[obj.id] = obj; - return newMap; - }, {}); - export const sendMessage = msg => { window.parent.postMessage( `chatwoot-widget:${JSON.stringify({ ...msg })}`, @@ -22,9 +15,7 @@ export const IFrameHelper = { sendMessage, isAValidEvent: e => { const isDataAString = typeof e.data === 'string'; - const isAValidWootEvent = - isDataAString && e.data.indexOf(WOOT_PREFIX) === 0; - return isAValidWootEvent; + return isDataAString && e.data.indexOf(WOOT_PREFIX) === 0; }, getMessage: e => JSON.parse(e.data.replace(WOOT_PREFIX, '')), }; diff --git a/app/javascript/widget/store/modules/conversation/getters.js b/app/javascript/widget/store/modules/conversation/getters.js index 9d1c067f4..74e582348 100644 --- a/app/javascript/widget/store/modules/conversation/getters.js +++ b/app/javascript/widget/store/modules/conversation/getters.js @@ -32,7 +32,7 @@ export const getters = { }, getUnreadMessageCount: _state => { const { userLastSeenAt } = _state.meta; - const count = Object.values(_state.conversations).filter(chat => { + return Object.values(_state.conversations).filter(chat => { const { created_at: createdAt, message_type: messageType } = chat; const isOutGoing = messageType === MESSAGE_TYPE.OUTGOING; const hasNotSeen = userLastSeenAt @@ -40,7 +40,6 @@ export const getters = { : true; return hasNotSeen && isOutGoing; }).length; - return count; }, getUnreadTextMessages: (_state, _getters) => { const unreadCount = _getters.getUnreadMessageCount; @@ -50,7 +49,6 @@ export const getters = { return messageType === MESSAGE_TYPE.OUTGOING; }); const maxUnreadCount = Math.min(unreadCount, 3); - const allUnreadMessages = unreadAgentMessages.splice(-maxUnreadCount); - return allUnreadMessages; + return unreadAgentMessages.splice(-maxUnreadCount); }, }; diff --git a/app/javascript/widget/store/modules/conversation/helpers.js b/app/javascript/widget/store/modules/conversation/helpers.js index 44e2a6729..2ebac5242 100644 --- a/app/javascript/widget/store/modules/conversation/helpers.js +++ b/app/javascript/widget/store/modules/conversation/helpers.js @@ -29,7 +29,7 @@ const shouldShowAvatar = (message, nextMessage) => { export const groupConversationBySender = conversationsForADate => conversationsForADate.map((message, index) => { - let showAvatar = false; + let showAvatar; const isLastMessage = index === conversationsForADate.length - 1; if (isASubmittedFormMessage(message)) { showAvatar = false; diff --git a/app/javascript/widget/store/modules/conversation/mutations.js b/app/javascript/widget/store/modules/conversation/mutations.js index f47971f07..ca6dafada 100644 --- a/app/javascript/widget/store/modules/conversation/mutations.js +++ b/app/javascript/widget/store/modules/conversation/mutations.js @@ -88,8 +88,7 @@ export const mutations = { }, toggleAgentTypingStatus($state, { status }) { - const isTyping = status === 'on'; - $state.uiFlags.isAgentTyping = isTyping; + $state.uiFlags.isAgentTyping = status === 'on'; }, setMetaUserLastSeenAt($state, lastSeen) { diff --git a/app/javascript/widget/store/modules/conversationLabels.js b/app/javascript/widget/store/modules/conversationLabels.js index 3fbcd230d..3ae600082 100644 --- a/app/javascript/widget/store/modules/conversationLabels.js +++ b/app/javascript/widget/store/modules/conversationLabels.js @@ -9,14 +9,14 @@ export const actions = { try { await conversationLabels.create(label); } catch (error) { - // Ingore error + // Ignore error } }, destroy: async (_, label) => { try { await conversationLabels.destroy(label); } catch (error) { - // Ingore error + // Ignore error } }, };