diff --git a/app/javascript/dashboard/components-next/icon/ChannelIcon.story.vue b/app/javascript/dashboard/components-next/icon/ChannelIcon.story.vue
new file mode 100644
index 00000000000..38868039eb3
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/ChannelIcon.story.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+ {{ inbox.name }}
+
+
+
+
+
+
+
+ {{ inbox.name }}
+
+
+
+
+
diff --git a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
index aef6a57ec5d..f680d3f0384 100644
--- a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
+++ b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
@@ -1,7 +1,7 @@
-
+
inbox?.value ?? inbox;
+
export function useChannelIcon(inbox) {
- const channelTypeIconMap = {
- 'Channel::Api': 'i-woot-api',
- 'Channel::Email': 'i-woot-mail',
- 'Channel::FacebookPage': 'i-woot-messenger',
- 'Channel::Line': 'i-woot-line',
- 'Channel::Sms': 'i-woot-sms',
- 'Channel::Telegram': 'i-woot-telegram',
- 'Channel::TwilioSms': 'i-woot-sms',
- 'Channel::TwitterProfile': 'i-woot-x',
- 'Channel::WebWidget': 'i-woot-website',
- 'Channel::Whatsapp': 'i-woot-whatsapp',
- 'Channel::Instagram': 'i-woot-instagram',
- 'Channel::Tiktok': 'i-woot-tiktok',
- };
-
- const providerIconMap = {
- microsoft: 'i-woot-outlook',
- google: 'i-woot-gmail',
- };
-
const channelIcon = computed(() => {
- const inboxDetails = inbox.value || inbox;
+ const inboxDetails = resolveInbox(inbox);
const type = inboxDetails.channel_type;
let icon = channelTypeIconMap[type];
@@ -58,3 +78,26 @@ export function useChannelIcon(inbox) {
return channelIcon;
}
+
+export function useChannelBrandIcon(inbox) {
+ return computed(() => {
+ const inboxDetails = resolveInbox(inbox);
+ const type = inboxDetails.channel_type;
+ let icon = channelTypeBrandIconMap[type];
+
+ if (type === INBOX_TYPES.EMAIL && inboxDetails.provider) {
+ if (Object.keys(providerBrandIconMap).includes(inboxDetails.provider)) {
+ icon = providerBrandIconMap[inboxDetails.provider];
+ }
+ }
+
+ if (
+ type === INBOX_TYPES.TWILIO &&
+ inboxDetails.medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP
+ ) {
+ icon = channelTypeBrandIconMap['Channel::Whatsapp'];
+ }
+
+ return icon ?? null;
+ });
+}
diff --git a/theme/icons.js b/theme/icons.js
index 0cf0b719934..2bd218cb0ec 100644
--- a/theme/icons.js
+++ b/theme/icons.js
@@ -314,6 +314,21 @@ export const icons = {
width: 24,
height: 24,
},
+ 'outlook-color': {
+ body: ``,
+ width: 1040.8409,
+ height: 742.6319,
+ },
+ 'instagram-color': {
+ body: ``,
+ width: 256,
+ height: 256,
+ },
+ 'line-color': {
+ body: ``,
+ width: 427,
+ height: 427,
+ },
voice: {
body: ``,
width: 24,