chore: Minor fix

app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue

@@ -5,7 +5,8 @@ import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Policy from 'dashboard/components/policy.vue';
 import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
-import { INBOX_TYPES, getChannelTypeDisplayName } from 'dashboard/helper/inbox';
+import ChannelName from 'dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
 const props = defineProps({
   id: {
@@ -42,11 +43,6 @@ const inboxName = computed(() => {
   return inbox.name;
 });
 
-const channelType = computed(() => {
-  const { channel_type: type, medium } = props.inbox;
-  return getChannelTypeDisplayName(type, medium);
-});
-
 const handleAction = (action, value) => {
   emit('action', { action, value, id: props.id });
 };
@@ -70,9 +66,11 @@ const handleAction = (action, value) => {
           {{ inboxName }}
         </span>
         <div class="w-px h-3 bg-n-weak rounded-lg flex-shrink-0" />
-        <span class="text-body-main text-n-slate-11 flex-shrink-0">{{
-          channelType
-        }}</span>
+        <ChannelName
+          :channel-type="inbox.channel_type"
+          :medium="inbox.medium"
+          class="text-body-main text-n-slate-11 flex-shrink-0"
+        />
       </div>
       <Policy :permissions="['administrator']">
         <Button

app/javascript/dashboard/helper/inbox.js

@@ -171,30 +171,3 @@ export const getInboxWarningIconClass = (type, reauthorizationRequired) => {
   }
   return '';
 };
-
-export const getChannelTypeDisplayName = (type, medium) => {
-  // Handle Twilio special case
-  if (type === INBOX_TYPES.TWILIO) {
-    return medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP
-      ? 'Twilio WhatsApp'
-      : 'Twilio SMS';
-  }
-
-  // Map channel types to display names
-  const channelTypeMap = {
-    [INBOX_TYPES.WEB]: 'Website',
-    [INBOX_TYPES.FB]: 'Messenger',
-    [INBOX_TYPES.TWITTER]: 'Twitter',
-    [INBOX_TYPES.WHATSAPP]: 'WhatsApp',
-    [INBOX_TYPES.API]: 'API',
-    [INBOX_TYPES.EMAIL]: 'Email',
-    [INBOX_TYPES.TELEGRAM]: 'Telegram',
-    [INBOX_TYPES.LINE]: 'Line',
-    [INBOX_TYPES.SMS]: 'SMS',
-    [INBOX_TYPES.INSTAGRAM]: 'Instagram',
-    [INBOX_TYPES.TIKTOK]: 'TikTok',
-    [INBOX_TYPES.VOICE]: 'Voice',
-  };
-
-  return channelTypeMap[type] || 'Chat';
-};

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

@@ -3,7 +3,6 @@ import {
   getInboxClassByType,
   getInboxIconByType,
   getInboxWarningIconClass,
-  getChannelTypeDisplayName,
 } from '../inbox';
 
 describe('#Inbox Helpers', () => {
@@ -167,86 +166,4 @@ describe('#Inbox Helpers', () => {
       );
     });
   });
-
-  describe('getChannelTypeDisplayName', () => {
-    it('returns "Website" for web widget', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.WEB)).toBe('Website');
-    });
-
-    it('returns "Messenger" for Facebook', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.FB)).toBe('Messenger');
-    });
-
-    it('returns "Twitter" for Twitter', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.TWITTER)).toBe('Twitter');
-    });
-
-    it('returns "WhatsApp" for WhatsApp', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.WHATSAPP)).toBe('WhatsApp');
-    });
-
-    it('returns "API" for API', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.API)).toBe('API');
-    });
-
-    it('returns "Email" for Email', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.EMAIL)).toBe('Email');
-    });
-
-    it('returns "Telegram" for Telegram', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.TELEGRAM)).toBe('Telegram');
-    });
-
-    it('returns "Line" for Line', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.LINE)).toBe('Line');
-    });
-
-    it('returns "SMS" for SMS', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.SMS)).toBe('SMS');
-    });
-
-    it('returns "Instagram" for Instagram', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.INSTAGRAM)).toBe(
-        'Instagram'
-      );
-    });
-
-    it('returns "TikTok" for TikTok', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.TIKTOK)).toBe('TikTok');
-    });
-
-    it('returns "Voice" for Voice', () => {
-      expect(getChannelTypeDisplayName(INBOX_TYPES.VOICE)).toBe('Voice');
-    });
-
-    it('returns "Chat" for unknown type', () => {
-      expect(getChannelTypeDisplayName('UNKNOWN_TYPE')).toBe('Chat');
-    });
-
-    describe('Twilio cases', () => {
-      it('returns "Twilio WhatsApp" for Twilio with whatsapp medium', () => {
-        expect(getChannelTypeDisplayName(INBOX_TYPES.TWILIO, 'whatsapp')).toBe(
-          'Twilio WhatsApp'
-        );
-      });
-
-      it('returns "Twilio SMS" for Twilio with sms medium', () => {
-        expect(getChannelTypeDisplayName(INBOX_TYPES.TWILIO, 'sms')).toBe(
-          'Twilio SMS'
-        );
-      });
-
-      it('returns "Twilio SMS" for Twilio with undefined medium', () => {
-        expect(getChannelTypeDisplayName(INBOX_TYPES.TWILIO, undefined)).toBe(
-          'Twilio SMS'
-        );
-      });
-
-      it('returns "Twilio SMS" for Twilio with empty medium', () => {
-        expect(getChannelTypeDisplayName(INBOX_TYPES.TWILIO, '')).toBe(
-          'Twilio SMS'
-        );
-      });
-    });
-  });
 });