chore: Refactor widget (#5621)

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 });
 };

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 ({

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 () => {

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;
   }
 

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;

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) {

app/javascript/widget/components/ChatHeaderExpanded.vue

@@ -7,7 +7,12 @@
       class="flex items-start"
       :class="[avatarUrl ? 'justify-between' : 'justify-end']"
     >
-      <img v-if="avatarUrl" class="h-12 rounded-full" :src="avatarUrl" />
+      <img
+        v-if="avatarUrl"
+        class="h-12 rounded-full"
+        :src="avatarUrl"
+        alt="Avatar"
+      />
       <header-actions :show-popout-button="showPopoutButton" />
     </div>
     <h2

app/javascript/widget/components/ChatInputWrap.vue

@@ -209,9 +209,7 @@ export default {
   min-height: $space-large;
   max-height: 2.4 * $space-mega;
   resize: none;
-  padding: 0;
-  padding-top: $space-smaller;
-  padding-bottom: $space-smaller;
+  padding: $space-smaller 0;
   margin-top: $space-small;
   margin-bottom: $space-small;
 }

app/javascript/widget/components/FileBubble.vue

@@ -49,8 +49,7 @@ export default {
         : decodeURI(this.fileName);
     },
     fileName() {
-      const filename = this.url.substring(this.url.lastIndexOf('/') + 1);
-      return filename;
+      return this.url.substring(this.url.lastIndexOf('/') + 1);
     },
   },
   methods: {

app/javascript/widget/components/PreChat/Form.vue

@@ -118,13 +118,10 @@ export default {
       const isUserEmailAvailable = !!this.currentUser.email;
       const isUserPhoneNumberAvailable = !!this.currentUser.phone_number;
       return this.preChatFields.filter(field => {
-        if (
+        return !(
           (isUserEmailAvailable && field.name === 'emailAddress') ||
           (isUserPhoneNumberAvailable && field.name === 'phoneNumber')
-        ) {
-          return false;
-        }
-        return true;
+        );
       });
     },
     enabledPreChatFields() {

app/javascript/widget/components/TeamAvailability.vue

@@ -13,7 +13,7 @@
           }}
         </div>
         <div class="text-xs leading-4 mt-1">
-          {{ replyWaitMeessage }}
+          {{ replyWaitMessage }}
         </div>
       </div>
       <available-agents v-if="isOnline" :agents="availableAgents" />
@@ -75,7 +75,7 @@ export default {
       }
       return anyAgentOnline;
     },
-    replyWaitMeessage() {
+    replyWaitMessage() {
       const { workingHoursEnabled } = this.channelConfig;
 
       if (this.isOnline) {

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);

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');

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, '')),
 };

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);
   },
 };

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;

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) {

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
     }
   },
 };