feat: adds inbox name component

package.json

@@ -14,6 +14,7 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "@iconify-json/bxl": "^1.1.10",
     "@vueuse/core": "^10.7.2",
     "mitt": "^3.0.1",
     "radix-vue": "^1.3.2",

src/components/InboxName/InboxName.story.vue

@@ -0,0 +1,22 @@
+<script setup>
+import InboxName from './InboxName.vue';
+</script>
+<template>
+  <Story title="Conversation/InboxName">
+    <Variant title="Facebook inbox">
+      <InboxName :inbox="{ channel_type: 'Channel::FacebookPage' }" />
+    </Variant>
+    <Variant title="Livechat inbox with action">
+      <InboxName :inbox="{ channel_type: 'Channel::WebWidget' }" />
+    </Variant>
+    <Variant title="Telegram inbox with action">
+      <InboxName :inbox="{ channel_type: 'Channel::Telegram' }" />
+    </Variant>
+    <Variant title="Whatsapp inbox with action">
+      <InboxName :inbox="{ channel_type: 'Channel::Whatsapp' }" />
+    </Variant>
+    <Variant title="Api inbox with action">
+      <InboxName :inbox="{ channel_type: 'Channel::Api' }" />
+    </Variant>
+  </Story>
+</template>

src/components/InboxName/InboxName.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="inline-flex items-center p-1 h-5 leading-4 text-xs font-medium bg-none rounded-lg whitespace-nowrap border border-solid border-slate-600"
+  >
+    <span class="text-slate-1100 shrink-0" :class="inboxIcon" />
+    <span class="text-ellipsis hidden sr-only">{{ inbox.name }}</span>
+  </div>
+</template>
+<script setup>
+import { computed, defineProps } from 'vue';
+import { getChannelIconByType } from '../../helpers/inbox';
+
+const props = defineProps({
+  inbox: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const inboxIcon = computed(() => {
+  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
+  const classByType = getChannelIconByType(type, phoneNumber);
+  return classByType;
+});
+</script>

src/constants/inbox.js

@@ -0,0 +1,12 @@
+export const INBOX_TYPES = {
+  WEB: 'Channel::WebWidget',
+  FB: 'Channel::FacebookPage',
+  TWITTER: 'Channel::TwitterProfile',
+  TWILIO: 'Channel::TwilioSms',
+  WHATSAPP: 'Channel::Whatsapp',
+  API: 'Channel::Api',
+  EMAIL: 'Channel::Email',
+  TELEGRAM: 'Channel::Telegram',
+  LINE: 'Channel::Line',
+  SMS: 'Channel::Sms',
+};

src/helpers/inbox.js

@@ -0,0 +1,94 @@
+import { INBOX_TYPES } from '@/constants/inbox';
+
+export const getInboxSource = (type, phoneNumber, inbox) => {
+  switch (type) {
+    case INBOX_TYPES.WEB:
+      return inbox.website_url || '';
+
+    case INBOX_TYPES.TWILIO:
+    case INBOX_TYPES.WHATSAPP:
+      return phoneNumber || '';
+
+    case INBOX_TYPES.EMAIL:
+      return inbox.email || '';
+
+    default:
+      return '';
+  }
+};
+export const getReadableInboxByType = (type, phoneNumber) => {
+  switch (type) {
+    case INBOX_TYPES.WEB:
+      return 'livechat';
+
+    case INBOX_TYPES.FB:
+      return 'facebook';
+
+    case INBOX_TYPES.TWITTER:
+      return 'twitter';
+
+    case INBOX_TYPES.TWILIO:
+      return phoneNumber?.startsWith('whatsapp') ? 'whatsapp' : 'sms';
+
+    case INBOX_TYPES.WHATSAPP:
+      return 'whatsapp';
+
+    case INBOX_TYPES.API:
+      return 'api';
+
+    case INBOX_TYPES.EMAIL:
+      return 'email';
+
+    case INBOX_TYPES.TELEGRAM:
+      return 'telegram';
+
+    case INBOX_TYPES.LINE:
+      return 'line';
+
+    default:
+      return 'chat';
+  }
+};
+
+export const getChannelIconByType = (type, phoneNumber) => {
+  switch (type) {
+    case INBOX_TYPES.WEB:
+      return 'i-fluent-globe-16-regular';
+
+    case INBOX_TYPES.FB:
+      return 'i-bxl-facebook';
+
+    case INBOX_TYPES.TWITTER:
+      return 'i-bxl-twitter';
+
+    case INBOX_TYPES.TWILIO:
+      return phoneNumber?.startsWith('whatsapp')
+        ? 'i-bxl-whatsapp'
+        : 'i-fluent-chat-16-regular';
+
+    case INBOX_TYPES.WHATSAPP:
+      return 'i-bxl-whatsapp';
+
+    case INBOX_TYPES.API:
+      return 'i-fluent-plug-connected-16-regular';
+
+    case INBOX_TYPES.EMAIL:
+      return 'i-fluent-mail-16-regular';
+
+    case INBOX_TYPES.TELEGRAM:
+      return 'i-bxl-telegram';
+
+    case INBOX_TYPES.LINE:
+    default:
+
+      // TODO add custom icon for line
+      return 'i-fluent-chat-empty-16-regular';
+  }
+};
+
+export const getInboxWarningIconClass = (type, reauthorizationRequired) => {
+  if (type === INBOX_TYPES.FB && reauthorizationRequired) {
+    return 'warning';
+  }
+  return '';
+};

tailwind.config.cjs

@@ -16,7 +16,7 @@ const tailwindConfig = {
     iconsPlugin({
       // Select the icon collections you want to use
       // You can also ignore this option to automatically discover all icon collections you have installed
-      collections: getIconCollections(['fluent']),
+      collections: getIconCollections(['fluent', 'bxl']),
     }),
   ],
 };

yarn.lock

@@ -388,6 +388,13 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
   integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
+"@iconify-json/bxl@^1.1.10":
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/@iconify-json/bxl/-/bxl-1.1.10.tgz#f7ab43028727bff36763986d556e00f315a960c0"
+  integrity sha512-/+9L0XBI7vvP8tU2NVfqr45BjUndbTEaDuU6PERn9zKH0Rtsi9GDpaba7FY8PgA91ugGIpuwUPsFLCofkYreNg==
+  dependencies:
+    "@iconify/types" "*"
+
 "@iconify-json/fluent@^1.1.46":
   version "1.1.46"
   resolved "https://registry.yarnpkg.com/@iconify-json/fluent/-/fluent-1.1.46.tgz#bd68a6ee2ef9c0d487a16b3e64f77420b0306af9"