feat: Show errors for message bubbles in dashboard (#3585)

2021-12-21 00:07:33 +05:30 · 2021-12-21 00:07:33 +05:30 · 83655f4ca4
commit 83655f4ca4
parent 6fe5484119
8 changed files with 110 additions and 53 deletions
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@ -1,4 +1,4 @@
-version: "2"
+version: '2'
 plugins:
  rubocop:
    enabled: false
@ -17,30 +17,30 @@ checks:
  method-count:
    enabled: true
    config:
-      threshold: 30
+      threshold: 32
  file-lines:
    enabled: true
    config:
      threshold: 300
 exclude_patterns:
-  - "spec/"
-  - "**/specs/"
-  - "db/*"
-  - "bin/**/*"
-  - "db/**/*"
-  - "config/**/*"
-  - "public/**/*"
-  - "vendor/**/*"
-  - "node_modules/**/*"
-  - "lib/tasks/auto_annotate_models.rake"
-  - "app/test-matchers.js"
-  - "docs/*"
-  - "**/*.md"
-  - "**/*.yml"
-  - "app/javascript/dashboard/i18n/locale"
-  - "**/*.stories.js"
-  - "stories/"
-  - "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js"
-  - "app/javascript/shared/constants/countries.js"
-  - "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js"
-  - "app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js"
+  - 'spec/'
+  - '**/specs/'
+  - 'db/*'
+  - 'bin/**/*'
+  - 'db/**/*'
+  - 'config/**/*'
+  - 'public/**/*'
+  - 'vendor/**/*'
+  - 'node_modules/**/*'
+  - 'lib/tasks/auto_annotate_models.rake'
+  - 'app/test-matchers.js'
+  - 'docs/*'
+  - '**/*.md'
+  - '**/*.yml'
+  - 'app/javascript/dashboard/i18n/locale'
+  - '**/*.stories.js'
+  - 'stories/'
+  - 'app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js'
+  - 'app/javascript/shared/constants/countries.js'
+  - 'app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js'
+  - 'app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js'
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@ -86,7 +86,7 @@ export default {
        this.isExpanded ? 'expanded' : '',
      ];
    },
-    withTextIconSize() {
+    iconSize() {
      switch (this.size) {
        case 'tiny':
          return 12;
@ -101,26 +101,6 @@ export default {
          return 16;
      }
    },
-    withoutTextIconSize() {
-      switch (this.size) {
-        case 'tiny':
-          return 14;
-        case 'small':
-          return 16;
-        case 'medium':
-          return 18;
-        case 'large':
-          return 20;
-
-        default:
-          return 18;
-      }
-    },
-    iconSize() {
-      return this.hasOnlyIcon
-        ? this.withoutTextIconSize
-        : this.withTextIconSize;
-    },
  },
  methods: {
    handleClick(evt) {
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@ -55,6 +55,7 @@
        </span>
        <span v-else-if="lastMessageInChat.attachments">
          <fluent-icon
+            v-if="attachmentIcon"
            size="16"
            class="message--attachment-icon"
            :icon="attachmentIcon"
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@ -1,7 +1,7 @@
 <template>
  <li v-if="hasAttachments || data.content" :class="alignBubble">
    <div :class="wrapClass">
-      <div v-tooltip.top-start="sentByMessage" :class="bubbleClass">
+      <div v-tooltip.top-start="messageToolTip" :class="bubbleClass">
        <bubble-mail-head
          :email-attributes="contentAttributes.email"
          :cc="emailHeadAttributes.cc"
@ -73,8 +73,18 @@
          {{ sender.name }}
        </div>
      </a>
+      <div v-if="isFailed" class="message-failed--alert">
+        <woot-button
+          v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
+          size="tiny"
+          color-scheme="alert"
+          variant="clear"
+          icon="arrow-clockwise"
+          @click="retrySendMessage"
+        />
+      </div>
    </div>
-    <div class="context-menu-wrap">
+    <div v-if="shouldShowContextMenu" class="context-menu-wrap">
      <context-menu
        v-if="isBubble && !isMessageDeleted"
        :is-open="showContextMenu"
@ -248,10 +258,13 @@ export default {
    hasText() {
      return !!this.data.content;
    },
-    sentByMessage() {
+    messageToolTip() {
      if (this.isMessageDeleted) {
        return false;
      }
+      if (this.isFailed) {
+        return this.$t(`CONVERSATION.SEND_FAILED`);
+      }
      const { sender } = this;
      return this.data.message_type === 1 && !isEmptyObject(sender)
        ? {
@ -265,6 +278,7 @@ export default {
        wrap: this.isBubble,
        'activity-wrap': !this.isBubble,
        'is-pending': this.isPending,
+        'is-failed': this.isFailed,
      };
    },
    bubbleClass() {
@ -275,19 +289,30 @@ export default {
        'is-video': this.hasMediaAttachment('video'),
        'is-text': this.hasText,
        'is-from-bot': this.isSentByBot,
+        'is-failed': this.isFailed,
      };
    },
    isPending() {
      return this.data.status === MESSAGE_STATUS.PROGRESS;
    },
+    isFailed() {
+      return this.data.status === MESSAGE_STATUS.FAILED;
+    },
    isSentByBot() {
-      if (this.isPending) return false;
+      if (this.isPending || this.isFailed) return false;
      return !this.sender.type || this.sender.type === 'agent_bot';
    },
    contextMenuPosition() {
      const { message_type: messageType } = this.data;
      return messageType ? 'right' : 'left';
    },
+    shouldShowContextMenu() {
+      return !(this.isFailed || this.isPending);
+    },
+    errorMessage() {
+      const { meta } = this.data;
+      return meta ? meta.error : '';
+    },
  },
  watch: {
    data() {
@ -327,6 +352,9 @@ export default {
      this.showAlert(this.$t('CONTACT_PANEL.COPY_SUCCESSFUL'));
      this.showContextMenu = false;
    },
+    async retrySendMessage() {
+      await this.$store.dispatch('sendMessageWithData', this.data);
+    },
    onImageLoadError() {
      this.hasImageError = true;
    },
@ -396,6 +424,14 @@ export default {
        color: var(--v-50);
      }
    }
+
+    &.is-failed {
+      background: var(--r-200);
+
+      .message-text--metadata .time {
+        color: var(--r-50);
+      }
+    }
  }

  &.is-pending {
@ -426,6 +462,13 @@ export default {
  }
 }

+.message-failed--alert {
+  color: var(--r-900);
+  flex-grow: 1;
+  text-align: right;
+  margin-top: var(--space-smaller) var(--space-smaller) 0 0;
+}
+
 .button--delete-message {
  visibility: hidden;
 }
@ -451,6 +494,17 @@ li.right .context-menu-wrap {
 li.right {
  flex-direction: row-reverse;
  justify-content: flex-end;
+
+  .wrap.is-pending {
+    margin-left: auto;
+  }
+
+  .wrap.is-failed {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-end;
+    margin-left: auto;
+  }
 }

 .has-context-menu {
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@ -369,7 +369,10 @@ export default {
        const messagePayload = this.getMessagePayload(newMessage);
        this.clearMessage();
        try {
-          await this.$store.dispatch('sendMessage', messagePayload);
+          await this.$store.dispatch(
+            'createPendingMessageAndSend',
+            messagePayload
+          );
          this.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
        } catch (error) {
          const errorMessage =
--- a/app/javascript/dashboard/i18n/locale/en/conversation.json
+++ b/app/javascript/dashboard/i18n/locale/en/conversation.json
@ -90,6 +90,8 @@
    "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_FILE_UPLOAD_SIZE} attachment limit",
    "MESSAGE_ERROR": "Unable to send this message, please try again later",
    "SENT_BY": "Sent by:",
+    "SEND_FAILED": "Couldn't send message! Try again",
+    "TRY_AGAIN": "retry",
    "ASSIGNMENT": {
      "SELECT_AGENT": "Select Agent",
      "REMOVE": "Remove",
--- a/app/javascript/dashboard/store/modules/conversations/actions.js
+++ b/app/javascript/dashboard/store/modules/conversations/actions.js
@ -158,17 +158,33 @@ const actions = {
    }
  },

-  sendMessage: async ({ commit }, data) => {
-    // eslint-disable-next-line no-useless-catch
+  createPendingMessageAndSend: async ({ dispatch }, data) => {
+    const pendingMessage = createPendingMessage(data);
+    dispatch('sendMessageWithData', pendingMessage);
+  },
+
+  sendMessageWithData: async ({ commit }, pendingMessage) => {
    try {
-      const pendingMessage = createPendingMessage(data);
-      commit(types.ADD_MESSAGE, pendingMessage);
+      commit(types.ADD_MESSAGE, {
+        ...pendingMessage,
+        status: MESSAGE_STATUS.PROGRESS,
+      });
      const response = await MessageApi.create(pendingMessage);
      commit(types.ADD_MESSAGE, {
        ...response.data,
        status: MESSAGE_STATUS.SENT,
      });
    } catch (error) {
+      const errorMessage = error.response
+        ? error.response.data.error
+        : undefined;
+      commit(types.ADD_MESSAGE, {
+        ...pendingMessage,
+        meta: {
+          error: errorMessage,
+        },
+        status: MESSAGE_STATUS.FAILED,
+      });
      throw error;
    }
  },
--- a/app/javascript/shared/components/FluentIcon/dashboard-icons.json
+++ b/app/javascript/shared/components/FluentIcon/dashboard-icons.json
@ -4,6 +4,7 @@
  "alert-outline": "M12 1.996a7.49 7.49 0 0 1 7.496 7.25l.004.25v4.097l1.38 3.156a1.25 1.25 0 0 1-1.145 1.75L15 18.502a3 3 0 0 1-5.995.177L9 18.499H4.275a1.251 1.251 0 0 1-1.147-1.747L4.5 13.594V9.496c0-4.155 3.352-7.5 7.5-7.5ZM13.5 18.5l-3 .002a1.5 1.5 0 0 0 2.993.145l.006-.147ZM12 3.496c-3.32 0-6 2.674-6 6v4.41L4.656 17h14.697L18 13.907V9.509l-.004-.225A5.988 5.988 0 0 0 12 3.496Z",
  "arrow-chevron-left-outline": "M15 17.898c0 1.074-1.265 1.648-2.073.941l-6.31-5.522a1.75 1.75 0 0 1 0-2.634l6.31-5.522c.808-.707 2.073-.133 2.073.941v11.796Z",
  "arrow-chevron-right-outline": "M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796Z",
+  "arrow-clockwise-outline": "M12 4.75a7.25 7.25 0 1 0 7.201 6.406c-.068-.588.358-1.156.95-1.156.515 0 .968.358 1.03.87a9.25 9.25 0 1 1-3.432-6.116V4.25a1 1 0 1 1 2.001 0v2.698l.034.052h-.034v.25a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h.666A7.219 7.219 0 0 0 12 4.75Z",
  "arrow-download-outline": "M18.25 20.5a.75.75 0 1 1 0 1.5l-13 .004a.75.75 0 1 1 0-1.5l13-.004ZM11.648 2.012l.102-.007a.75.75 0 0 1 .743.648l.007.102-.001 13.685 3.722-3.72a.75.75 0 0 1 .976-.073l.085.073a.75.75 0 0 1 .072.976l-.073.084-4.997 4.997a.75.75 0 0 1-.976.073l-.085-.073-5.003-4.996a.75.75 0 0 1 .976-1.134l.084.072 3.719 3.714L11 2.755a.75.75 0 0 1 .648-.743l.102-.007-.102.007Z",
  "arrow-redo-outline": "M19.25 2a.75.75 0 0 0-.743.648l-.007.102v5.69l-4.574-4.56a6.41 6.41 0 0 0-8.878-.179l-.186.18a6.41 6.41 0 0 0 0 9.063l8.845 8.84a.75.75 0 0 0 1.06-1.062l-8.845-8.838a4.91 4.91 0 0 1 6.766-7.112l.178.17L17.438 9.5H11.75a.75.75 0 0 0-.743.648L11 10.25c0 .38.282.694.648.743l.102.007h7.5a.75.75 0 0 0 .743-.648L20 10.25v-7.5a.75.75 0 0 0-.75-.75Z",
  "arrow-reply-outline": "M9.277 16.221a.75.75 0 0 1-1.061 1.06l-4.997-5.003a.75.75 0 0 1 0-1.06L8.217 6.22a.75.75 0 0 1 1.061 1.06L5.557 11h7.842c1.595 0 2.81.242 3.889.764l.246.126a6.203 6.203 0 0 1 2.576 2.576c.61 1.14.89 2.418.89 4.135a.75.75 0 0 1-1.5 0c0-1.484-.228-2.52-.713-3.428a4.702 4.702 0 0 0-1.96-1.96c-.838-.448-1.786-.676-3.094-.709L13.4 12.5H5.562l3.715 3.721Z",