Enhancement: Conversation item redesign (#1857)

* Rearrange the inboxes label in conversations.

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -14,7 +14,6 @@
   @include flex;
   @include flex-shrink;
   @include padding(0 0 0 $space-normal);
-  align-items: center;
   border-bottom: 1px solid transparent;
   border-left: $space-micro solid transparent;
   border-top: 1px solid transparent;

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -49,10 +49,8 @@
       margin-top: $space-micro;
 
       .inbox-icon {
-        $icon-top-space: -1px;
         display: inline-block;
         margin-right: $space-micro;
-        margin-top: $icon-top-space;
         min-width: $space-normal;
         text-align: center;
       }

app/javascript/dashboard/components/layout/SidebarItem.vue

@@ -60,35 +60,7 @@ import { mapGetters } from 'vuex';
 
 import router from '../../routes';
 import adminMixin from '../../mixins/isAdmin';
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
-
-const getInboxClassByType = (type, phoneNumber) => {
-  switch (type) {
-    case INBOX_TYPES.WEB:
-      return 'ion-earth';
-
-    case INBOX_TYPES.FB:
-      return 'ion-social-facebook';
-
-    case INBOX_TYPES.TWITTER:
-      return 'ion-social-twitter';
-
-    case INBOX_TYPES.TWILIO:
-      return phoneNumber.startsWith('whatsapp')
-        ? 'ion-social-whatsapp-outline'
-        : 'ion-android-textsms';
-
-    case INBOX_TYPES.API:
-      return 'ion-cloud';
-
-    case INBOX_TYPES.EMAIL:
-      return 'ion-email';
-
-    default:
-      return '';
-  }
-};
-
+import { getInboxClassByType } from 'dashboard/helper/inbox';
 export default {
   mixins: [adminMixin],
   props: {
@@ -166,26 +138,26 @@ export default {
 }
 
 .inbox-icon.ion-social-facebook {
-	color: var(--color-facebook-brand);
+  color: var(--color-facebook-brand);
 }
 
 .inbox-icon.ion-social-whatsapp-outline {
-	color: var(--color-twitter-brand);
+  color: var(--color-whatsapp-brand);
 }
 
 .inbox-icon.ion-social-twitter {
-	color: var(--color-twitter-brand);
+  color: var(--color-twitter-brand);
 }
 
 .inbox-icon.ion-android-textsms {
-	color: var(--color-sms-twilio);
+  color: var(--color-sms-twilio);
 }
 
 .inbox-icon.ion-earth {
-	color: var(--color-woot);
+  color: var(--color-woot);
 }
 
 .inbox-icon.ion-cloud {
-	color: var(--color-cloud-generic);
+  color: var(--color-cloud-generic);
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -1,7 +1,11 @@
 <template>
   <div
     class="conversation"
-    :class="{ active: isActiveChat, 'unread-chat': hasUnread }"
+    :class="{
+      active: isActiveChat,
+      'unread-chat': hasUnread,
+      'has-inbox-name': showInboxName,
+    }"
     @click="cardClick(chat)"
   >
     <Thumbnail
@@ -14,15 +18,12 @@
       size="40px"
     />
     <div class="conversation--details columns">
+      <span v-if="showInboxName" v-tooltip.bottom="inboxName" class="label">
+        <i :class="computedInboxClass" />
+        {{ inboxName }}
+      </span>
       <h4 class="conversation--user">
         {{ currentContact.name }}
-        <span
-          v-if="!hideInboxName && isInboxNameVisible"
-          v-tooltip.bottom="inboxName(chat.inbox_id)"
-          class="label"
-        >
-          {{ inboxName(chat.inbox_id) }}
-        </span>
       </h4>
       <p v-if="lastMessageInChat" class="conversation--message">
         <i v-if="messageByAgent" class="ion-ios-undo message-from-agent"></i>
@@ -54,7 +55,7 @@
 import { mapGetters } from 'vuex';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-
+import { getInboxClassByType } from 'dashboard/helper/inbox';
 import Thumbnail from '../Thumbnail';
 import conversationMixin from '../../../mixins/conversations';
 import timeMixin from '../../../mixins/time';
@@ -140,6 +141,26 @@ export default {
     parsedLastMessage() {
       return this.getPlainText(this.lastMessageInChat.content);
     },
+
+    chatInbox() {
+      const { inbox_id: inboxId } = this.chat;
+      const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
+      return stateInbox;
+    },
+
+    computedInboxClass() {
+      const { phone_number: phoneNumber, channel_type: type } = this.chatInbox;
+      const classByType = getInboxClassByType(type, phoneNumber);
+      return classByType;
+    },
+
+    showInboxName() {
+      return !this.hideInboxName && this.isInboxNameVisible;
+    },
+    inboxName() {
+      const stateInbox = this.chatInbox;
+      return stateInbox.name || '';
+    },
   },
 
   methods: {
@@ -153,10 +174,37 @@ export default {
       });
       router.push({ path: frontendURL(path) });
     },
-    inboxName(inboxId) {
-      const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
-      return stateInbox.name || '';
-    },
   },
 };
 </script>
+<style lang="scss" scoped>
+.conversation {
+  align-items: center;
+}
+
+.has-inbox-name {
+  &::v-deep .user-thumbnail-box {
+    padding-top: var(--space-small);
+    align-items: flex-start;
+  }
+}
+
+.conversation--details .label {
+  padding: var(--space-smaller) 0 var(--space-smaller) 0;
+  line-height: var(--space-slab);
+  font-weight: 500;
+  background: none;
+  color: var(--s-500);
+  font-size: var(--font-size-mini);
+}
+
+.conversation--details {
+  .ion-earth {
+    font-size: var(--font-size-mini);
+  }
+
+  .timestamp {
+    margin-top: var(--space-slab);
+  }
+}
+</style>

app/javascript/dashboard/helper/inbox.js

@@ -0,0 +1,28 @@
+import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
+
+export const getInboxClassByType = (type, phoneNumber) => {
+  switch (type) {
+    case INBOX_TYPES.WEB:
+      return 'ion-earth';
+
+    case INBOX_TYPES.FB:
+      return 'ion-social-facebook';
+
+    case INBOX_TYPES.TWITTER:
+      return 'ion-social-twitter';
+
+    case INBOX_TYPES.TWILIO:
+      return phoneNumber.startsWith('whatsapp')
+        ? 'ion-social-whatsapp-outline'
+        : 'ion-android-textsms';
+
+    case INBOX_TYPES.API:
+      return 'ion-cloud';
+
+    case INBOX_TYPES.EMAIL:
+      return 'ion-email';
+
+    default:
+      return '';
+  }
+};

app/javascript/dashboard/helper/specs/inbox.spec.js

@@ -0,0 +1,35 @@
+import { getInboxClassByType } from '../inbox';
+
+describe('#Inbox Helpers', () => {
+  describe('getInboxClassByType', () => {
+    it('should return correct class for web widget', () => {
+      expect(getInboxClassByType('Channel::WebWidget')).toEqual('ion-earth');
+    });
+    it('should return correct class for fb page', () => {
+      expect(getInboxClassByType('Channel::FacebookPage')).toEqual(
+        'ion-social-facebook'
+      );
+    });
+    it('should return correct class for  twitter profile', () => {
+      expect(getInboxClassByType('Channel::TwitterProfile')).toEqual(
+        'ion-social-twitter'
+      );
+    });
+    it('should return correct class for twilio sms', () => {
+      expect(getInboxClassByType('Channel::TwilioSms', '')).toEqual(
+        'ion-android-textsms'
+      );
+    });
+    it('should return correct class for whatsapp', () => {
+      expect(getInboxClassByType('Channel::TwilioSms', 'whatsapp')).toEqual(
+        'ion-social-whatsapp-outline'
+      );
+    });
+    it('should return correct class for Api', () => {
+      expect(getInboxClassByType('Channel::Api')).toEqual('ion-cloud');
+    });
+    it('should return correct class for Email', () => {
+      expect(getInboxClassByType('Channel::Email')).toEqual('ion-email');
+    });
+  });
+});