chore: Add an indicator for incoming emails (#1112)

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="message-text--metadata">
+    <span class="time">{{ readableTime }}</span>
+    <i
+      v-if="isEmail"
+      v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
+      class="ion ion-android-mail"
+    />
+    <i
+      v-if="isPrivate"
+      v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
+      class="icon ion-android-lock"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    readableTime: {
+      type: String,
+      default: '',
+    },
+    isEmail: {
+      type: Boolean,
+      default: true,
+    },
+    isPrivate: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.right {
+  .message-text--metadata {
+    .time {
+      color: var(--w-100);
+    }
+  }
+}
+
+.left {
+  .message-text--metadata {
+    .time {
+      color: var(--s-400);
+    }
+  }
+}
+
+.message-text--metadata {
+  align-items: flex-end;
+  display: flex;
+
+  .time {
+    margin-right: var(--space-small);
+    display: block;
+    font-size: var(--font-size-micro);
+    line-height: 1.8;
+  }
+
+  i {
+    line-height: 1.4;
+  }
+}
+
+.activity-wrap {
+  .message-text--metadata {
+    display: inline-block;
+
+    .time {
+      color: var(--s-300);
+      font-size: var(--font-size-micro);
+      margin-left: var(--space-small);
+    }
+  }
+}
+
+.is-image {
+  .message-text--metadata {
+    .time {
+      bottom: var(--space-smaller);
+      color: var(--white);
+      position: absolute;
+      right: var(--space-small);
+      white-space: nowrap;
+    }
+  }
+}
+
+.is-private {
+  .message-text--metadata {
+    align-items: flex-end;
+
+    .time {
+      color: var(--s-400);
+    }
+  }
+
+  &.is-image {
+    .time {
+      position: inherit;
+      padding-left: var(--space-one);
+    }
+  }
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/bubble/Audio.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="audio message-text__wrap">
-    <a-player
-      :music="playerOptions"
-      mode="order"
-    />
-    <span class="time">{{readableTime}}</span>
-  </div>
-</template>
-
-<script>
-import APlayer from 'vue-aplayer';
-
-export default {
-  components: {
-    APlayer,
-  },
-  props: [
-    'url',
-    'readableTime',
-  ],
-  data() {
-    return {
-      musicObj: {
-        title: ' ',
-        author: ' ',
-        autoplay: false,
-        narrow: true,
-      },
-    };
-  },
-  computed: {
-    playerOptions() {
-      return {
-        ...this.musicObj,
-        url: this.url,
-      };
-    },
-  },
-};
-</script>

app/javascript/dashboard/components/widgets/conversation/bubble/File.vue

@@ -16,13 +16,17 @@
         {{ $t('CONVERSATION.DOWNLOAD') }}
       </a>
     </div>
-    <span class="time">{{ readableTime }}</span>
   </div>
 </template>
 
 <script>
 export default {
-  props: ['url', 'readableTime'],
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+  },
   computed: {
     fileName() {
       const filename = this.url.substring(this.url.lastIndexOf('/') + 1);
@@ -31,7 +35,7 @@ export default {
   },
   methods: {
     openLink() {
-      const win = window.open(this.url, '_blank');
+      const win = window.open(this.url, '_blank', 'noopener');
       win.focus();
     },
   },

app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue

@@ -1,25 +1,20 @@
 <template>
   <div class="image message-text__wrap">
-    <img
-      :src="url"
-      v-on:click="onClick"
-    />
-    <span class="time">{{readableTime}}</span>
+    <img :src="url" @click="onClick" />
     <woot-modal :show.sync="show" :on-close="onClose">
-      <img
-        :src="url"
-        class="modal-image"
-      />
+      <img :src="url" class="modal-image" />
     </woot-modal>
   </div>
 </template>
 
 <script>
 export default {
-  props: [
-    'url',
-    'readableTime',
-  ],
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       show: false,

app/javascript/dashboard/components/widgets/conversation/bubble/Map.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="map message-text__wrap">
-    <img
-      :src="locUrl"
-    />
-    <span class="locname">{{label || ' '}}</span>
-    <span class="time">{{readableTime}}</span>
-  </div>
-</template>
-
-<script>
-export default {
-  props: [
-    'lat',
-    'lng',
-    'label',
-    'readableTime',
-  ],
-  data() {
-    return {
-      accessToken: 'pk.eyJ1IjoiY2hhdHdvb3QiLCJhIjoiY2oyazVsM3d0MDBmYjJxbmkyYXlwY3hzZyJ9.uWUdfItb0sSZQ4nfwlmuPg',
-      zoomLevel: 14,
-      mapType: 'mapbox.streets',
-      apiEndPoint: 'https://api.mapbox.com/v4/',
-      h: 100,
-      w: 150,
-    };
-  },
-  computed: {
-    locUrl() {
-      const { apiEndPoint, mapType, lat, lng, zoomLevel, h, w, accessToken } = this;
-      return `${apiEndPoint}${mapType}/${lng},${lat},${zoomLevel}/${w}x${h}.png?access_token=${accessToken}`;
-    },
-  },
-};
-</script>

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -1,12 +1,24 @@
 <template>
   <span class="message-text__wrap">
     <span v-html="message"></span>
-    <span class="time">{{ readableTime }}</span>
   </span>
 </template>
 
 <script>
 export default {
-  props: ['message', 'readableTime'],
+  props: {
+    message: {
+      type: String,
+      default: '',
+    },
+    readableTime: {
+      type: String,
+      default: '',
+    },
+    isEmail: {
+      type: Boolean,
+      default: true,
+    },
+  },
 };
 </script>