feat(inbox): preserve channel logo with voice badge in inbox/sidebar
Inboxes with voice enabled were showing a generic phone icon in the inbox list and sidebar, hiding the underlying channel (e.g. WhatsApp). Keep the native channel logo and overlay an audio-waveform badge when voice is enabled. The native Twilio Voice inbox (TwilioSms with no WhatsApp medium) still resolves to the phone icon.
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
import { toRef } from 'vue';
|
||||
import { computed, toRef } from 'vue';
|
||||
import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
|
||||
import { useChannelIcon } from './provider';
|
||||
import Icon from 'next/icon/Icon.vue';
|
||||
|
||||
@@ -10,9 +11,20 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
defineOptions({ inheritAttrs: false });
|
||||
|
||||
const channelIcon = useChannelIcon(toRef(props, 'inbox'));
|
||||
const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Icon :icon="channelIcon" />
|
||||
<span class="relative inline-flex" v-bind="$attrs">
|
||||
<Icon :icon="channelIcon" class="size-full" />
|
||||
<span
|
||||
v-if="hasVoiceBadge"
|
||||
class="absolute -top-1 -right-1 inline-flex items-center justify-center size-2.5 rounded-full bg-n-alpha-2 ring-1 ring-n-solid-1"
|
||||
>
|
||||
<Icon icon="i-lucide-audio-lines" class="size-1.5 text-n-slate-10" />
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { computed } from 'vue';
|
||||
import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
|
||||
|
||||
export function useChannelIcon(inbox) {
|
||||
const channelTypeIconMap = {
|
||||
@@ -38,8 +37,15 @@ export function useChannelIcon(inbox) {
|
||||
icon = 'i-woot-whatsapp';
|
||||
}
|
||||
|
||||
// Special case for voice-enabled inboxes (Twilio, WhatsApp, etc.)
|
||||
if (isVoiceCallEnabled(inboxDetails)) {
|
||||
// Native Twilio voice inbox: a TwilioSms with voice enabled (and no WhatsApp medium)
|
||||
// is presented as a Voice channel, so show the phone icon.
|
||||
const voiceEnabled =
|
||||
inboxDetails.voice_enabled || inboxDetails.voiceEnabled;
|
||||
if (
|
||||
type === 'Channel::TwilioSms' &&
|
||||
voiceEnabled &&
|
||||
inboxDetails.medium !== 'whatsapp'
|
||||
) {
|
||||
icon = 'i-woot-voice';
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user